Scroll Effect

Horizontal Scroll

Vertical scrolling drives horizontal movement — panels slide sideways as you scroll down. Creates a gallery or timeline feel without clicking.

Also called: horizontal scroll section, scroll-jacking (when overused)

Live demo — scroll down to move sideways

Panel One

Scroll down and watch panels slide left.

Panel Two

Each panel is a full scene in your story.

Panel Three

Great for portfolios and case studies.

Panel Four

The vertical scroll distance controls progress.

Panel Five

You've reached the end of the gallery.

How it works

A tall wrapper (300vh) creates scroll distance. Inside, a sticky container holds a horizontal track. As you scroll, JavaScript translates the track left based on scroll progress.

Alternative: native CSS overflow-x: auto with scroll-snap
Use sparingly — users expect vertical scroll by default