Forum Academy Marketplace Showcase Pricing Features

Synchronized Scrolling - Multiple Columns Scroll at Different Speeds

Here’s what I need to make happen…

As user scrolls down… both columns scroll in unison but at DIFFERENT SPEEDS.

The various images in Column B are associated with a particular word in the Column A text. The goal is to have it so that as users scroll down the text in Column A, the images in Column B scroll in a way synchronizes them to their associated word. Explained another way: When a word that has an image associated with it is at the top of the of Column A’s view port, then the associated image should also be at the top of the Column B view port.

(Obviously Column A and Column B can have different heights than each other since any given entry may have lots of Column A content and only a few images in column b. Or only a little column A content and many images in column B. )

Does anyone have an ideas on how I might go about getting started with this… Thanks so much!

Here is another sort of example this website

ezgif.com-gif-maker(1)

Notice how both columns scroll in a synchronized way but that they move at different speeds.