19 Best Parallax Scrolling Websites 2026
Parallax scrolling moves the background of a page more slowly than the content in front of it, which gives a flat screen a sense of depth. These 19 sites use it well, from a game’s layered landscape to a law firm’s portrait, and each comes with a short clip so you can watch the effect instead of imagining it. For a head start on your own, see our parallax website templates.
We re-checked all twenty-one sites from the previous version of this list by recording each one as we scrolled. Only eleven still move in layers; the rest have been redesigned without the effect or no longer exist. We replaced them with eight newer sites and list the platform and scroll libraries behind every entry.
Best Parallax Scrolling Websites
1. Firewatch
Built with: Custom code, jQuery
Firewatch, Campo Santo’s mystery game set in the Wyoming wilderness, opens on an illustrated sunset: a lookout on a cliff edge, pine forest and the sun sinking behind the hills. Scroll, and the dark cliffs rise past the FIREWATCH logo faster than the distant hills, so the landscape seems to open up in front of you.
The hero is a stack of separate illustrated layers, each given its own scroll speed by a small jQuery script. Right below it come the platform buttons, the trailer and the story, so the effect lasts one screen and then the page gets down to business.
What stands out: Layered artwork turns one illustration into a scene with real depth.
2. Supernatural
Built with: Squarespace
Supernatural makes dye-free baking ingredients: sprinkles, plant-based food colors, frostings and flavor drops. The home page puts its jars inside a hand-drawn scribble frame, and as you scroll, product shots slide in at their own pace beside headlines like “Yums without yucks.” and “Same plants, less plastic.”, with doodled stars around them.
It is a Squarespace site, and the layered product images use the platform’s built-in parallax, so there is no custom code behind the effect. The drawings and bright packaging keep the motion in character with a playful brand.
What stands out: Built-in Squarespace parallax, styled to match a playful brand.
3. Cyclemon
Built with: Custom code (CSS fixed backgrounds)
Cyclemon’s home page, labelled Experiment in its menu, is a scroll-driven story about riders and their bikes. The yellow title card gives way to a Night Rider scene, a black bicycle with a wheel glowing red in the dark, and then to a Traveller cargo bike on a peach background, each scene sliding over the one before as you scroll.
The scenes sit on fixed backgrounds while the next panel slides over them, a CSS technique that needs almost no JavaScript. A column of dots on the right edge shows how far through the story you are.
What stands out: A whole story told with pinned scenes and almost no script.
4. NASA Prospect
Built with: Custom code, GSAP (TweenMax), jQuery
NASA Prospect is an illustrated space story that you read by scrolling. It opens with “Pump up the volume! (and start scrolling down)”, then a lone astronaut drifts toward you across a starfield while the narration begins: “I remember the noise that woke me: …NI..ZKO..BSZ!”
Each scroll step moves the astronaut, the stars and the text at different speeds, and a volume control in the corner runs the soundtrack. It is custom code with GSAP, and it shows how many layers one scrolling story needs: 167 elements on the page carry parallax classes.
What stands out: Scrolling becomes reading a comic, one panel of space at a time.
5. Casa Mami
Built with: Squarespace
Casa Mami is a desert house in Pioneertown, California, that doubles as a design showroom: an eco-friendly overnight retreat where everything in the house is available for sale, booked through Airbnb. The home page is almost all photography, starting with the white house and a guest in green trousers on the gravel.
As you scroll, cactus and terrazzo close-ups overlap in a collage and move at different speeds over a cream background, using Squarespace’s built-in parallax. With so little copy, the layered photos do the selling, much like walking through the rooms.
What stands out: A collage of textures that moves like a walk through the house.
6. Spyker
Built with: Next.js, GSAP, ScrollTrigger, Lenis
Spyker, the Dutch maker of hand-built super sports cars, introduces its C8 Preliator XXV Coupé with a full-width teal close-up, then turns the page into an editorial spread. Under “Pure Passion”, detail shots of the rear lights, the rose-gold iso-grid mesh and the bodywork are scattered across white space.
Each image scrolls at its own speed, so the photos drift past the text like prints being laid out on a table. The site runs on Next.js with GSAP, ScrollTrigger and Lenis smooth scrolling, a common stack for this kind of layered editorial scroll.
What stands out: Scattered detail shots that drift like a magazine layout.
7. Canadiens Children’s Foundation
Built with: SvelteKit, GSAP, Lenis
The Montreal Canadiens Children’s Foundation helps underprivileged youth in Quebec discover sport, and its site opens with PLAY TO THRIVE in huge letters over a photo of kids on a water slide. Then a bright blue panel reads “Behind every rink and every program, there is a story of a child discovering their strength.”
As you scroll, cut-out illustrations of a hockey player and a paddler in a red canoe move at a different pace from the photo of a young player in a Canadiens jersey between them, so the panel feels like a pop-up book. The site is built with SvelteKit, GSAP and Lenis.
What stands out: Illustration and photography layered like a pop-up book.
8. ERA Residence
Built with: Webflow, GSAP, ScrollTrigger, Lenis
ERA Residence, a boutique gated community of 25 homes on the New Golden Mile between Marbella and Estepona, opens with a swimming pool seen through an arched window, framed by the words COSTA and DEL SOL on deep burgundy.
Scroll, and the arch widens until the photo fills the screen, while the ERA RESIDENCE title and the lines around it move at their own speeds over the view. It is a Webflow site with GSAP, ScrollTrigger and Lenis, and the whole effect takes one flick of the wheel.
What stands out: A window that opens onto the view as you scroll.
9. Vander Hotel
Built with: Webflow, GSAP
Vander, a design hotel in Ljubljana, lays out its home page like a magazine: big headlines such as “Wake up in Vanderland”, numbered sections for rooms, food and events, and small photos of the rooms placed around the text.
The photos scroll at a different speed from the words, so they seem to float past them, while the playful copy (“Perfect rooms for all Vanderers by heart”) keeps the tone light. It is a Webflow site with GSAP, and the motion never gets in the way of the Book a Room button.
What stands out: Small floating photos give an editorial page gentle depth.
10. Loam House
Built with: Custom code, GSAP
Loam House sells house-sized apartments in Sandringham, in Melbourne’s Bayside, and tells the story in numbered chapters: “Leave the upkeep. Keep the life.”, “A backyard oasis, without the mowing.” and “Everything you need. Nothing you don’t.”
Each chapter is a full-screen artist’s impression that holds still while its headline scrolls over it, and then the next room slides in over the last. Built with GSAP, it works like a property brochure you turn by scrolling, with the brochure download always in the menu.
What stands out: A property brochure turned into full-screen chapters.
11. dsgn interior
Built with: Custom code, GSAP, ScrollTrigger, Lenis
dsgn interior, an interior architecture studio in Malmö, designs offices, hotels and public spaces, and its home page is simply the work: “designing interiors connecting people”, then Fellowmind Göteborg, Car.info, Stretch Care and more, each a full-screen photo with its name in large white type.
As you scroll, each project slides up over the previous one while the photo inside moves a little slower than its frame, so the pictures feel deeper than the page. It is custom code with GSAP, ScrollTrigger and Lenis, and very little else on screen.
What stands out: A portfolio where every project is a full-screen layer.
12. La Dolfina Jumping
Built with: Custom code, GSAP, ScrollTrigger, Lenis
La Dolfina Jumping is the show-jumping breeding program created by polo player Adolfo Cambiaso and the La Dolfina team in Argentina. The site opens on the stables under “Delivering access to exceptional bloodlines”, set in thin, widely spaced capitals, before the page turns deep navy.
As you scroll, the stable photo slides more slowly than its frame, and portraits of riders move at their own speed beside the text, which keeps a long brand story from feeling flat. It is custom code with GSAP, ScrollTrigger and Lenis, with a Spanish version a click away.
What stands out: Slow, weighty motion that suits a premium equestrian brand.
13. Flatiron Family Medical
Built with: Squarespace
Flatiron Family Medical, an integrative primary care practice founded by Dr. Pamela Hops and Dr. Sapna Chaudhary, opens with a warm street photo of a mother and child under “An integrative approach to medicine. A human approach to care.”
Scroll, and the photo moves more slowly than the white mission section that slides up over it. It is Squarespace’s built-in effect, and it gives a clinic site some depth without distracting from the membership offer; the orange Become a Member buttons repeat all the way down.
What stands out: Depth on a medical site without losing the calm.
14. Zion Adventure Photog
Built with: Wix
Zion Adventure Photog photographs families, couples, proposals and elopements in Zion National Park and Southern Utah. The hero is a family walking through red canyon country, with a booking button and a row of review stars right under the headline.
Further down, the canyon photos behind sections like “One of the best ways to experience Zion National Park” move slower than the text over them, using Wix’s built-in background scroll effects. The landscape is what the business sells, so letting it linger on screen is the right call.
What stands out: The scenery stays on screen a little longer than the text.
15. Shola Richards
Built with: WordPress (Hello Elementor), Elementor
Shola Richards is a workplace kindness expert, keynote speaker and best-selling author, and his site leads with “Strong enough to be kind” in big type beside his portrait on a lilac background, with buttons to watch him speak and to check his availability.
Scroll, and the portrait moves more slowly than the headline and buttons, so he seems to stay with you while the dark Rave Reviews section rises underneath. It is WordPress with the Hello Elementor theme and the Elementor page builder.
What stands out: One restrained effect on the portrait, and nothing more.
16. Elles Bailey
Built with: Wix
Elles Bailey, a singer-songwriter who straddles Americana and the blues, turns her home page into a poster wall for her album Can’t Take My Story Away: the cover, a tour poster with a long list of dates and a Listen/Purchase button sit on a warm, textured background.
The layers scroll at different speeds, so the cut-out pieces slide over one another like a collage. Then comes Join the Club, a sign-up for the Wolfpack with early ticket access and new music first. It is a Wix site using the platform’s scroll effects.
What stands out: A home page that works like a tour poster.
17. Chris Boyer
Built with: Squarespace
Chris Boyer, a healthcare digital experience strategist and podcaster, opens with a city skyline at dusk and the line “Inspired to make healthcare work better – digital is how we get there.”
Below long text sections such as A hard truth and The good news, full-width photos like the rows of colored pencils behind Integrated Solutions scroll slower than the page. That gives a text-heavy consultant’s site regular visual breaks, using nothing more than Squarespace’s built-in parallax.
What stands out: Parallax used as a pause between long blocks of text.
18. Michelle Harwell Therapy
Built with: Squarespace
Michelle Harwell Therapy, a practice in the Eagle Rock area of Los Angeles that specializes in trauma, attachment and adoption therapy, welcomes visitors with a calm living-room photo and the line “We are glad you found your way here.”
The photos behind Welcome and Services move slower than the page while white text panels slide over them, which suits the gentle tone. Services are listed plainly, from adults, teens and children to parenting, adoption and couples, all on Squarespace.
What stands out: Soft motion that suits a therapy practice.
19. Page Law
Built with: Squarespace
Page Law is the Toronto practice of criminal defence lawyer Alana Page, and the home page opens on her portrait with her phone number and a Free Consultation button right beside it.
As you scroll, the portrait slides more slowly than the text that follows (“If you are facing criminal charges, your best defence is calling the Law Office of Alana Page.”), and then dark burgundy panels list the charges she handles. It is a Squarespace site with the platform’s built-in parallax.
What stands out: A serious practice, with one quiet effect on the portrait.
What Makes a Great Parallax Website?
Give each layer its own speed. Parallax is simply foreground and background moving at different rates. Firewatch builds its hero from separate illustrated layers, so the near cliffs pass the logo faster than the far hills. Two or three layers are enough to create depth; many more start to feel like the page is lagging behind your scroll.
Keep the offset subtle. On most sites here the speed difference is small. Vander’s room photos drift only a little against its headlines, and Shola Richards’ portrait lags just behind his headline. A slight offset reads as depth, while a large one makes the text hard to follow.
Use the built-in effect on a website builder. You do not need code: Supernatural, Casa Mami, Flatiron Family Medical, Chris Boyer, Michelle Harwell Therapy and Page Law use Squarespace’s built-in parallax, and Zion Adventure Photog and Elles Bailey use Wix scroll effects. Pick a section with a strong background photo, switch the effect on and leave the rest of the page still.
Let the scroll tell a story. Parallax works best when each step shows something new. NASA Prospect brings an astronaut closer with each scroll, Cyclemon swaps one bike scene for the next, and Loam House holds each room still while its headline passes. Plan the page as a sequence of scenes rather than one effect repeated.
Keep text readable over moving images. Put words on a solid panel or a darkened photo. Flatiron Family Medical sets its headline on a dimmed street photo, and Michelle Harwell Therapy slides white text panels over its pictures, so the copy stays sharp while the image behind it moves.
Test on a phone. iOS Safari does not support background-attachment: fixed, the CSS shortcut behind many simple parallax sections, so on iPhones those backgrounds scroll with the page. Script-based effects that move layers with transforms, as GSAP does, work on phones, but check them on a real device, because heavy smooth scrolling can feel sluggish under a thumb.
Respect reduced motion. Parallax can make some visitors dizzy, and many of them switch motion down in their system settings. Wrap the effect in a prefers-reduced-motion check so that, for them, the layers simply scroll together. Nothing important should be lost, because the content should never depend on the effect.
Frequently Asked Questions
What is a parallax scrolling website?
A parallax scrolling website moves some layers at a different speed from others as you scroll, usually a background image more slowly than the text over it. The difference creates a sense of depth, like scenery seen from a moving train. It can be one hero photo, as on Page Law, or a whole scene built from layers, as on Firewatch.
Is parallax scrolling bad for SEO?
Not by itself. Search engines read the HTML, so the effect does no harm as long as headings and copy are real text rather than images, and the page still loads quickly. The risks are indirect: large background images and scripts can slow the page, and a story spread across many screens can bury the key information. Keep the main message near the top.
Does parallax scrolling work on mobile?
Partly. iOS Safari does not support background-attachment: fixed, so the simplest CSS parallax scrolls normally on iPhones, and some builders tone the effect down on small screens. Script-based parallax that moves layers with transforms, such as GSAP, can run on phones, but test it on a real device, because smooth-scroll effects can feel sluggish under a thumb.
How do I add parallax in Squarespace, Wix or WordPress?
Squarespace and Wix include parallax as a built-in background effect: pick a section with a background image and switch the effect on. Six Squarespace sites and two Wix sites on this list do exactly that. In WordPress, many themes and page builders such as Elementor include parallax or scrolling effects, and dedicated parallax themes have it built in.
Which JavaScript libraries are used for parallax scrolling?
GSAP, usually with its ScrollTrigger plugin, is the most common on the custom sites here: eight of the 19 load it, and five add Lenis for smooth scrolling. Older sites use small jQuery scripts, as Firewatch does, or plain CSS fixed backgrounds, as Cyclemon does. Lighter libraries such as Rellax and simpleParallax add a basic effect with little setup.
Is parallax scrolling accessible?
It can be, with care. Motion can cause dizziness for people with vestibular disorders, so honour the prefers-reduced-motion setting and switch the effect off when it is on. Keep text on solid or darkened backgrounds so contrast holds while images move, and make sure the page still works with keyboard scrolling and browser zoom.
Wrapping Up
For more motion on the web, see our animated website examples and interactive websites. To build your own, start from our parallax website templates, parallax WordPress themes or Squarespace parallax templates.
Browse the other Design styles & page types website examples (20 more collections), or see website examples for every industry.
Related Posts
Comments (0)