14 of the Best Parallax Scroll Examples for 2025

Much of web design is about finding new ways to engage users on your website. Parallax scroll is a popular technique used by developers to build more immersive websites that tell more compelling stories. Here are the most important things you need to know about implementing parallax scrolling on your site and 14 of the best examples we could find from around the internet. 

Why use Parallax Scrolls? 

Parallax scroll is a popular and effective web design technique where background content moves at a different speed (usually slower) than content in the foreground, creating an illusion of depth and immersion. It’s most often used in situations where the visual appeal of a website plays an important role in the overall user experience. In particular, parallax scroll can be a powerful way to increase the storytelling and immersiveness of your website, without having to invest in costly and performance-hampering full-length animated content elements. Much of what we now consider to be parallax animation was popularized with the animated cartoons and side-scrolling video games of the 1980s and 1990s. 

In general, a good use of parallax scroll means that the user is left with a feeling of intrigue or novelty at the way your site is designed. When initiating this kind of “2.5D” experience, the user should feel immersed in whatever information or story you are trying to tell on your site. It is for this reason that (as you’ll see below) many sites that involve writing, travel, or products in some way make a particular effort to incorporate parallax scrolling. 

A standout example of this is Apple’s product pages in recent years. With every new iPhone release, their website uses parallax scrolling to demonstrate the way a phone will look as it follows you throughout your life. In this way, the goal is not simply to display a new product, but rather to immerse the viewer in the experience of the product. This, by all measures, is an effective and logical way that parallax can be used for business-oriented purposes. 

How to build a Parallax Scroll 

In general, parallax scrolls require three components: 1) some way to listen for a scroll or mouse movement event, 2) some way to separate background and foreground layers with different z-indexes, and 3) some way to calculate how much each layer should move in the Y-direction based on the amount of scrolling that has taken place. You are essentially trying to create the illusion of three-dimensions on a two-dimensional plane, and so the repositioning of the layer must be precisely calculated so that the effect is preserved and believable. Whether you are trying to build this natively in Webflow or using embedded JS code, the process is largely the same. 

On Webflow 

In Webflow, it is possible to build a parallax effect without needing to use any code. Here is the process for creating a vertical scroll parallax effect: 

• Create a Section element that will contain all of the involved components (name this something like parallax-section). Set its Position to Relative. 
  
  
• Inside of parallax-section, create a Div Block that will hold your background image. Give this element a class called something like parallax-background.
  
  
• Style  parallax-background to have Position: Absolute, Full (so that it covers the entire parent section), and z-index: -1. Add a Background Image to parallax-background with Size: Cover and Position: Center.
  

• Inside parallax-section (but after or as a sibling to the parallax-background), add all of the foreground content (other images, text, headers). Give each of these elements have a higher z-index than -1.
  
  
• Add a “While Scrolling in View” interaction to the parallax-section component from the Interaction panel > Element Trigger menu.
  

• Add a “Play scroll animation” action (named something like “Background Slow Scroll”) to that interaction.
  
  
• Within this action, target the parallax-background element. Select “Play scroll animation” set to “When element starts entering”.

•  Add a “Move” Scroll Animation. Set the initial State (so 0% on the timeline scrubber) to wherever you want the background to start on the y-axis. This will probably be at 0% or below (such as -50px if the image needs to start higher up to have room to move down more slowly). Remember: positive y-values move the content down, and negative values move it up.
  

• On the same parallax-background element, add a second Move at the 100% position on the timeline scribber. Add another “Moved Timed” action here. The goal is to have the background move slower than the content, so the amount that it will move will depend. For the sake of this example, if the closest section content will move up 100px, you’ll probably only want the background to move up 50px.

• Apply this same logic to elements in the foreground, ensuring that you set progressively larger scroll amounts with each layer. This will require some trial and error, but the goal should always be to create a believable and aesthetically pleasing viewing experience.
  
  
• Within the “While scrolling in view” menu, make sure to set a high value (70-90%) in the “Smoothing” field. This will prevent the effect from appearing choppy or disorienting.

Again, this process will require some trial and error, but eventually you should be able to create a compelling visual experience. 

From Scratch 

If you’re more inclined to build the parallax element from scratch (and, for example, implement it in custom code), the process is largely the same.

1. Create the main container for your parallax section and give it a class name. 

2. Within that container, create separate elements for the background (often a div with a background image) and your foreground content. 

3. CSS is then crucial for the initial setup: the parent container might get position: relative, while the background element is typically styled with position: absolute (or fixed for simpler full-page effects), given a z-index to sit behind other content, and its background-image properties (like background-size: cover and ensuring it's taller than the viewable area) are defined to allow for apparent movement.

4. The actual parallax motion would be orchestrated with JavaScript. You'll add an event listener to the window's scroll event. Inside this listener, you'll read the current scroll position (e.g., window.pageYOffset). 

5. Based on this value, you calculate a new position for your background element – critically, this new position will be a fraction of the scroll distance (e.g., scrollPosition * 0.5) to make it appear to move slower. 

6. This calculated value is then dynamically applied to the background element's CSS, commonly using transform: translateY() for performance, or by adjusting background-position-y. Foreground elements can also be manipulated with different speed factors to create more intricate layered effects.

Here is an example of what that code might look like: 

const parallaxBackgroundElement = document.querySelector('.parallax-background-element');

const foregroundObjectOne = document.querySelector('.foreground-object-1);

const foregroundObjectTwo = document.querySelector('.foreground-object-2);

const foregroundObjectThree = document.querySelector('.foreground-object-3);

‍

const backgroundSpeed = 0.3;

const foregroundOneSpeed = 0.5;

const foregroundTwoSpeed = 0.7;

const foregroundThreeSpeed = 0.85; // Closest to normal scroll speed

‍

window.addEventListener('scroll', function() {

    let scrollPosition = window.pageYOffset || window.scrollY;

‍

    if (parallaxBackgroundElement) {

        let backgroundNewY = scrollPosition * backgroundSpeed;

        parallaxBackgroundElement.style.transform = `translateY(${backgroundNewY}px)`;

    }

‍

    if (foregroundObjectOne) {

        let foregroundOneNewY = scrollPosition * foregroundOneSpeed;

        foregroundObjectOne.style.transform = `translateY(${foregroundOneNewY}px)`;

    }

‍

    if (foregroundObjectTwo) {

        let foregroundTwoNewY = scrollPosition * foregroundTwoSpeed;

        foregroundObjectTwo.style.transform = `translateY(${foregroundTwoNewY}px)`;

    }

‍

    if (foregroundObjectThree) {

        let foregroundThreeNewY = scrollPosition * foregroundThreeSpeed;

        foregroundObjectThree.style.transform = `translateY(${foregroundThreeNewY}px)`;

    }

});

‍This will largely come down to trial and error, but building in JavaScript does provide a bit more levity in the precision of the scroll animations (and they allow you to be a bit more mathematical in how you create the relationship between these layers). 

14 of the Best Parallax Scroll Examples 

Hokaido by Diego Toda de Oliveira

Why We Love It

As stated above, the goal of a parallax effect should be to build intrigue or engagement with your site. This is a great example of this because it reimagines something that is relatively uninteresting – a carousel scroll – with a very subtle parallax effect that gives the impression that its content is floating on top of some mysterious, dark background. You are compelled to continue to scroll through the cards, which is ultimately the point of a carousel. That’s the power of parallax: you encourage the right kinds of behaviors simply by making them interesting to do. 

How to Copy It

This is actually an easy one to implement directly on your Webflow site, in particular because it is available as a Webflow cloneable. Otherwise, implementing it from scratch involves following the same process as outlined above, albeit with the x-axis replacing the y-axis as the main dimension of the animation. 

You can find the cloneable template for this here. 

Magnetic Background by Jerome Bergamaschi

‍Why We Love It

Although most people might associate parallax with a scroll event, a really great use case is situations where you want the pointer to control the 3D effect. In the Magnetic Background template website, you can see how moving the mouse in any direction causes all of the layers beneath to move in a similar direction (with the layers “closer” to the pointer and more in the foreground moving faster). This is a great effect if you want to emphasize whatever is in the center of the element, because it forces the eye to move there. The jagged shapes that surround this center point also give a sort of cave-link appearance to the site.

How to Copy It

This is another Webflow-ready, cloneable site template. In general, though, the important feature of this site is the use of transparent PNGs to give this site its cave-like appearance. The challenge of developing a site like this is figuring out how to translate the XY-coordinates of the pointer to the positioning of the PNG elements in a way that is believable and which doesn’t obscure the underlying text in any way. 

You can find the cloneable template for this here. 

Rotational Parallax by Pablo Stanley

‍Why We Love It

This site is similar to the previous one in that it is pointer-dependent as opposed to scroll-dependent. The major difference, however, is how it is used. Here, the 3D effect is mostly used to create a sense of motion between different elements, which are probably all important or relevant to the content being displayed. The rotational aspect of this gives a sort of playfulness, forcing the reader to figure out how to rotate the background such that the button can be clicked (try it out, it’s intuitive but an interesting game to play). This is a good example of an effect that, while not necessarily practical, does increase the level of engagement possible on the site. 

How to Copy It

This one is also readily cloneable on Webflow. Again, the major challenge will be figuring out how to calculate the degree to which each element will be rotated based on the positioning of the pointer on the XY-plane of the browser window. 

You can find the cloneable template for this here. 

Cloudz by Sergio Martos

Why We Love It

This site illustrates very clearly the creative limits of the parallax scroll effect. It is almost impossible to visit the site and not be left a little awestruck at the experience. The core here is storytelling. For a website about clouds, having this immersive cloud experience, as though you were skydiving through them, offers an incredible use case for this technique as a whole. A nice touch here is also the use of non-parallax animations, such as the clouds growing in size and changing their transparency as you scroll. This site speaks for itself and offers an incredible case study in how parallax can improve the immersiveness of your site. 

How to Copy It

This is a ready-to-clone template on Webflow. The real mastery here, however, is the use of images that play well together. Notice how the coloring, the sunlight, and the sizing of the clouds fit together perfectly. I would guess that the creator took one image and cropped it into several images (with the foreground images having transparent backgrounds), which were then resized to make the parallax effect possible. 

You can find the cloneable template for this here. 

Firewatch by Jacob Vinjegaard

Why We Love It

This demo website demonstrates what is perhaps the cleanest example of what a good parallax effect looks like. Without any information (because this site is functionally about nothing), we are transported into the forest on scroll. The trees darken as they enter the foreground, creating the feeling that we’re scrolling from the shadows of a tree. The relationship between each layer is so expertly handled, giving the impression that we really are seeing the trees in the distance through the tops of closer trees. As an inspiration, this is an incredible site to view. 

How to Copy It

Because this is a Webflow cloneable focused specifically on this parallax effect, this is a great place to begin in your study of how to implement it on your site. This was built entirely in Webflow (without any external code), so pay particular attention to the Interactions panel on the hero-container element. It explains in detail the relationship between all 6 layers that were used in this image. 

You can find the cloneable template for this here. 

Infinite Parallax Slider by Timothy Ricks 

Why We Love It

This is a very different application of the parallax effect in that it is not based on the movement of the mouse or your scrolling of the page at all. Instead, it is a more traditional slider component that is made more interesting through an internal parallax effect within each card. As you click and drag the slider, the parallax effect on the images in the background of the card gives you the impression that you are looking through a portal of some kind at the content underneath. This is a great source of inspiration for websites where you have a lot of discrete visual items that need to be displayed in a way that is more interesting than a typical grid. 

How to Copy It

Although this is a Webflow cloneable, most of the action takes place in a custom code element installed on the page. It’s all in JS and uses Flickity to create this effect. Because this is an externally managed JS package applied to your site, however, the performance on the carousel effect is extremely smooth. 

You can find the cloneable template for this here.

Apple October 2020 Homepage Remake by EPYC 

Why We Love It

Sometimes, trying to figure out how to copy the greats is the best way to learn how to be more like them. As I mentioned above, for much of the last several years, Apple has been the king of highly interactive parallax effects on its website. This recreation of the October 2020 Apple homepage shows you exactly how to build these kinds of effects with products in mind. The major thing to notice here is how each new parallax section exists with the explicit goal of centering a new product on the page at exactly the right time. 

How to Copy It

Copying this copy might seem a bit redundant, but this is generally a good exercise in web design. See if you can recreate the work of the great, and in the process, you’ll probably learn a thing or two about how it’s done. Again, this is a free Webflow cloneable, so there are great opportunities to take inspiration from a version of this that worked, but in general, the concept of remaking pages that are inspirational to you is good practice. 

You can find the cloneable template for this here. 

Apartma Bela by Julia Kabelka 

Why We Love It

This is a great example of how a parallax scroll can help produce a mood or energy for a page. The very high-quality photo, when paired with the subtle yet effective scrolling effects, emphasizes the immersive feeling of the outdoors that is likely to make someone want to book this house in Latvia. In general, if you are building a website for something focused on scenery or travel, parallax effects are a great way to create a feeling of immersion that will get people excited about what you are selling. 

How to Copy It

While this template is not directly cloneable in Webflow, the general concept is quite easy to replicate:

1. Find an extremely high-quality photograph of what you are trying to show. 
2. In a photo editing software like Photoshop, create three layers. 
3. Use the original image as the background. 
4. Use something like the Lasso tool in Photoshop to select objects you want to be in the foreground. Remove anything outside of this foreground object and replace it with a transparent background. 
5. Enlarge that selection slightly (so that the original image is not visible behind it).
6. Repeat this process for all subsequent foreground layers. Save each of these layers as a separate PNG. 

Applying the parallax process described above to all of those images (ensuring that the Y-axis movement does not reveal any layers underneath) should allow you to replicate this process. 

The Goonies by Joseph Berry

Why We Love It

As I’ve said throughout this blog, the strength of the parallax effect is its ability to introduce storytelling into your website without relying on videos and text that literally tell stories. This website is a great example of this, with each effect taking the user on a journey through the plot of the movie The Goonies. More than anything, this site is just really cool and offers a very compelling use of the parallax effect that never feels forced or overdone. The initial interaction, where you zoom through the forest and onto the beach, feels very logical and is a fun entrance into the world of the website. 

How to Copy It

The key thing that this website understands is the user journey. There is a clear sequence of events that all make sense and all contribute to the overall goal of the website, which is to inform the reader about what this movie is all about. Recreating this site would likely require a similar understanding of what specific story you are trying to convey to the reader, perhaps charted out frame by frame. 

GlobalLeathers by DigitalButlers 

Why We Love It

The specific thing that I find compelling about this site is the use of parallax frames on top of the leather products that they are trying to sell you. It is a very clever mechanism, where attention is driven away from the couches themselves and instead refocused on the upholstery leather (which is the real product that they are selling). This is a great demonstration of how parallax effects can help guide the user's attention by transforming the passive act of scrolling into something more intentional and interactive. 

How to Copy It

To copy this design, all you need to do is create a frame element with a transparent background and make it position:sticky up until the frame enters the viewport. Then all that you have to do is make it so that any further scrolling past that point happens slower than it happens for the background. This gives the effect that the frame is somehow floating closer to the viewer, bringing the contents of the frame into focus. 

OODOS Homepage

Why We Love It

‍This is another fairly straightforward example of how a parallax effect can induce a sense of immersion into the view. This is a company that lets you share expensive cars with other people. The parallax section at the top of the page makes you feel like you're on the road that you could be driving on. It’s a specific sense of adventure that would likely appeal to someone who visits this website. This is a great example of a real application of these parallax effects out in the wild. 

How to Copy It

This is a very easy one to recreate (it should follow all of the strategies explained above). Something to note, however, is the way the bottom of the parallax section blends into the content below. This is a great way to increase that feeling of immersion, requiring you to add a gradient down to zero opacity at the bottom of whatever image you choose to be in the nearest foreground.  

Hadaka.jp Homepage

Why We Love It

This website is unbelievable on so many levels. This represents what I’d imagine to be the furthest possible end state of what the parallax effect can do. It integrates on-screen animations, video animations, visual effects, mouse-event parallaxes, scroll-event parallaxes, and zoom effects. If anything, just click the link and see it for yourself. While not necessarily applicable to 99% of business use cases (and the conversion rate on a site like this would likely be abysmally low), this is an incredible example of the limits of what you can accomplish with the parallax effect. 

How to Copy It

This one would be inconceivably difficult to recreate exactly, if not simply because the subject matter is both so specific to the website and so materially important to the design decisions that have been made. However, the interesting thought experiment here is to consider how very long-form parallax content might be used in your context. Instead of implying a journey, why not literally take your reader on a journey through your website? 

Delassus Group Homepage

Why We Love It

This site is a great example of how horizontal parallax effects can add a pleasant, playful tone to your website. This company (which presumably sells things like fruits, vegetables, and plants) uses the parallax effect on this automatically scrolling element to complement the 3D animated fruit that they are showing you. It feels natural and almost necessary, creating a more complete experience that entices you to learn more about whatever they are trying to explain to you. 

How to Copy It

Because of the specificity of this website, it might be hard to recreate exactly. However, this does seem to venture more into the world of actual 3D animation and less into the optical illusion that is the parallax effect. If you are curious about learning how to incorporate three-dimensional objects into your website, I encourage you to check out Webflow's “Intro to 3D” course. 

Niika Homepage

Why We Love It

I like this webpage's use of a pointer-based parallax effect because of its subtlety. The parallax section at the top of the page is easy to miss, but once you see it, the effect that it creates feels very pleasant and appropriate. Again, because this is using a 3D animated background object, being able to interact with those elements in a 3D way gives the overall impression that thought and effort were put into its incorporation into the site. This feels especially appropriate because this is the portfolio page of a design and marketing agency. 

How to Copy It

This is a fairly straightforward application of a pointer-based parallax effect. The challenge here is probably determining how to arrange the 3D objects in such a way that the effect makes sense.  

Conclusion 

As the wide array of parallax scroll examples above demonstrates, this technique is far more than just a fleeting design fad. It's a powerful instrument for transforming static digital pages into dynamic, engaging, and often breathtaking narratives. Navigating through these sites (sometimes literally) underscores a significant evolution in what users expect from their online interactions.

The future of the website, it seems, is leaning less towards being a passive repository of information and more towards becoming an active, enjoyable experience. Users are increasingly drawn to sites that don't just tell them something, but make them feel something, inviting them to play, explore, and become part of a story. Parallax scrolling, with its inherent ability to create depth, guide the eye, and inject a sense of wonder and interactivity, is a key player in this shift. By thoughtfully incorporating more immersive techniques, designers and developers can craft web experiences that don't just convey messages but create memories, fostering a deeper connection and leaving a much more lasting impression.