Parallax website templates
10 of our 20 templates
In a parallax website, layers move at different speeds as you scroll: a photo drifts slower than the text over it, or the foreground slides past the background. It adds depth without video and keeps the content readable.
In these templates the parallax is tied to the scroll position with GSAP ScrollTrigger, so it follows the mouse wheel, the trackpad and touch scrolling alike, and it runs backwards when you scroll up. With reduced motion turned on, the layers stay still.
Under each template: where the parallax is.
Every template here is free under the MIT license: one index.html with its CSS and scripts inside (GSAP, ScrollTrigger and Lenis load from jsDelivr), plus AGENTS.md, CREDITS.md (photos from Unsplash under the Unsplash License, fonts under the SIL Open Font License) and LICENSE, in its own GitHub repository at github.com/8bsite with a live demo on GitHub Pages. Each template's page has the download commands.
Leaving the hero, copy and caption chips lift at different speeds over a zooming photo, and review columns rise at two rates.
Grey and black plates behind each project photo move at two depths, and storyboard photos pan inside their frames.
Leaving the first screen, the portrait, intro and split name drift up at different speeds.
Photos slide up inside their frames at their own pace, and the first screen's panels drift apart as you scroll.
On the first screen the photo zooms and sinks while the title's three words fly apart at different speeds.
Photos shift inside their frames as the buildings row slides sideways; headline blocks and portraits move at different speeds.
The hero photo pair climbs at two speeds, and photos in the pinned day track shift inside their frames.
Blurred round photos of grain and citrus float up slower than the sharp ones, giving the tag-card section depth.
On wide screens twelve scattered photos settle into a contact sheet at different speeds, and the first screen's blocks lift away over a slowly zooming room.
Arrangement columns start at different heights and settle as you scroll, and photos in the delivery track and care column move at their own speed.
Questions
How is the parallax effect made?
Each moving layer gets a scroll-linked animation in GSAP ScrollTrigger: as the section passes through the screen, the layer moves by a set amount relative to the rest. It does not rely on the CSS background-attachment trick, which many phone browsers ignore.
Does the parallax work on phones?
Yes. The movement follows the scroll position, so it runs with touch scrolling too, and the layouts switch to a phone version below tablet width. Visitors who turn on reduced motion in their system see the layers still.
Can I make the effect stronger or weaker?
Yes. The distance each layer travels is a number in that section's animation script at the end of the file. Make it smaller for a calmer page, or delete the script to keep the layer still.