Hero Parallax Grid — Free HTML CSS JS Scroll Snippet

The hero parallax grid is the showpiece header where several rows of project tiles slide horizontally as you scroll the page — adjacent rows moving in opposite directions — so the gallery drifts past in a layered parallax. This snippet builds it with plain HTML, CSS, and a lean vanilla JavaScript scroll handler, and it's a favorite opener for studio and portfolio sites.

Scroll drives horizontal movement

Unlike a normal page where scrolling only moves things vertically, here the vertical scroll position is translated into horizontal motion. The update() function reads window.scrollY and, for each row, applies translateX proportional to it: base + scrollY * 0.25 * dir. So as you scroll down, the rows glide sideways. The 0.25 factor controls how fast they slide relative to scroll — smaller is subtler, larger is faster.

Opposite directions per row

Each row carries a data-dir of 1 or -1, and the translate is multiplied by it, so odd rows slide one way and even rows the other. This counter-motion between neighboring rows is the essence of the parallax — your eye reads the opposing layers as depth and energy, whereas rows all sliding the same way would just look like a single moving band. Each row also starts at a different base offset so they aren't aligned at the top edge, which makes the staggering feel intentional.

Efficient scroll handling

The scroll listener is { passive: true } and throttled through requestAnimationFrame with a ticking guard, so the transforms update at most once per frame however fast you scroll. Because the only work per frame is reading scrollY and writing a translateX on three elements, it stays smooth even on long pages. The rows have will-change: transform so the browser promotes them to their own compositor layers.

Overflow-wide rows

Each row is width: max-content and filled with seven tiles in a flex line, so the row is much wider than the viewport and there's plenty of content to slide into view from either side. overflow-x: hidden on the body clips the off-screen tiles so the horizontal motion doesn't create a scrollbar. The tiles themselves lift slightly on hover, so the gallery is interactive as well as animated.

Image-free, themeable tiles

Tiles are gradient rectangles with a label and a bottom scrim, generated in JavaScript from a color palette — so the hero is dependency-free and colorful. Swap each tile's --g background for a real image to turn it into an actual portfolio wall; the parallax logic doesn't care what fills the tiles.

Customizing it

Tune the 0.25 speed factor for more or less drift, add rows (each picks up its direction and a base offset automatically), change the per-row base offsets, adjust tile size, or drop in real images. Combine it with a static headline above, as shown, so the moving grid reads as a backdrop to your title. Pair it with a 3D marquee section or a flip link navigation for a striking studio homepage.