Home / Motion / Layered Parallax
Layered Parallax CSS Template, Free with Live Demo
Free layered parallax website template for a campground. Sun, mountains and trees move at different speeds as you scroll, drawn with SVG. Live demo. The example is Pinecrest, a campground.
What is layered parallax?
Layered parallax moves background layers slower than the ones in front, so a flat picture feels deep. As you scroll, the far mountains barely move while the trees slide past, just like looking out of a train window.
Each layer has a speed number. A small script reads the scroll position once per frame and moves each layer by that amount. The layers are SVG shapes, so they stay sharp at any size.
Good for
- Campsites, hotels and outdoor brands
- Travel and adventure stories
- Game and film landing pages
- Kids and storytelling sites
What you get in this template
- Five layers moving at different speeds
- Mountains and pine trees drawn with SVG
- Smooth updates with requestAnimationFrame
- Speed set per layer with a data attribute
- Parallax off for reduced motion
The key CSS
This is the part that makes the layered parallax look work. Copy it into your own project.
.ly { position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; }
/* JS: move each layer by its own speed */
const layers = document.querySelectorAll('[data-s]');
addEventListener('scroll', () => requestAnimationFrame(() => {
layers.forEach(l => l.style.transform = `translateY(${scrollY * l.dataset.s}px)`);
}), { passive: true });How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is parallax scrolling?
It is when background layers move slower than foreground layers while you scroll, which creates a feeling of depth.
Is parallax bad for performance?
Not if you only use transform and update once per frame with requestAnimationFrame, like this template.
Can I make parallax with only CSS?
Yes, with scroll driven animations (see design 061) in browsers that support them. The small script here works everywhere.
More Motion designs
061. Scroll Driven Animation
Volt Ride, an e-bike product page
062. View Transitions
Fork and Field, a recipe site
063. Micro Interactions
Streak, a habit tracker
065. Marquee Ticker
Northline, a design studio
066. Morphing Blobs
Bloom, a therapy practice
067. Hover Reveal
Studio Halden, an interior design studio
068. Staggered Entrance
Pipeline, a CRM landing page
069. Skeleton Loaders
Morning Brief, a news app