Most of us scroll through webpages without a second thought. But for designers, this basic and intuitive behavior is a narrative tool to tell more immersive stories. Parallax is a technique to create layers, dimension, or a change of pace. You can use it to steer your visitors’ attention to important messages, product features, calls to action, or the key beats in an interactive story.
Keep reading to learn more about parallax and how designers use it to various effects.
What is parallax scrolling?
Parallax is a technique to assign different rates of motion to different parts of an image. When a user scrolls using their mouse or trackpad, the website’s code tells various elements to move at different speeds. Most commonly, the background image(s) will move a little more slowly than the visual elements in the foreground as a user scrolls, creating a sense of depth.
Think about it in the real world: If you’re looking out a car window, for example, the fences and railings closest to you move fast and blur at higher speeds while the stuff in the background, like houses, buildings, and mountains, move much more slowly. Early animated film cartoons used this to trick our eyes into believing that a two-dimensional image had depth.
In the context of a website, parallax refers to more than just motion visuals. Designers can connect users’ scrolling to shifts in design elements, triggering animations, logo movements, image scaling, and more. For example, making an image larger as users scroll can draw the eye and have them pay more attention to that image’s message. Layering all these types of scroll-triggered changes intentionally in small increments can tell a stronger story, highlight the details of your product, or even show complex information more effectively than static visuals or text can.
At the same time, overdoing it with huge images and big scrolling scripts can slow the page down and dampen the user experience.
How to create a parallax scrolling effect
You’ll likely create this sort of effect using a visual design tool, though some designers prefer to write the code themselves. Either way, the result is the same.
Code it yourself
Cascading Style Sheets (CSS) is a layout and style coding language for websites that allows you to code things for yourself. You can place an image in the background and then set the foreground to scroll. That way, the result will feel like the foreground layer is closer than the other. Simple CSS parallax website code might look like this:
.parallax {
background-image: url('background.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
There are JavaScript options to use to create the parallax effect, too, from simple to more complex, that you can use to manage more complex parallax scrolling effects, along with animation libraries you can incorporate. These can help control things like mapping scroll position or transforming an object’s opacity, scale, or even rotation.
Build visually in Framer
Framer’s built-in tools let you create a parallax effect directly on the canvas of your website without having to code. Each layer—including headlines, images, or background panels—can move at a different pace. You can even connect user scroll behavior to visual transformations, like fading images, shrinking logos, or tilting icons. You can do all of this while working visually rather than in code, letting you focus on how the motion feels rather than the specific code syntax to make it happen.
10 parallax scrolling examples
Explore these examples and get inspired to incorporate parallax scrolling into your own website:
1. The tinyPod
Source: thetinypod.com
The tinyPod website shows how parallax scrolling can create an immersive experience. It’s designed to showcase the innovation of transforming a strapless Apple Watch into a minimalist phone that looks like an iPod. The parallax scroll reveals a 360-degree view of the product, allowing you to explore every angle in a dynamic and captivating way.
Midway through the page, there’s a scroll-driven moment where the tinyPod flips, and a hand moves in to hold it, matching the tagline, “Everything you need in the palm of your hand.” The sequence works like a story beat: The flip reveals a new angle, the hand grounds it in use, and together they hint that more is coming. That anticipation pulls you down the page to see the next reveal.
2. Mars Rejects
Source: marsrejects.com
Mars Rejects is a distinctive collection of 10,000 characters brought to life as NFTs. The website’s hero features a striking graphic that moves horizontally. As you scroll down, the graphic shifts forward slightly, the background changes to a bold red, and the hero text takes center stage.
The parallax effect is also used cleverly in the storytelling section. As you move through the Mars Rejects site, story cards drift onto the screen while the artwork behind them shifts and stacks new details. Each scroll adds another layer, so the scene feels like it’s unfolding in real time and you uncover the narrative step by step.
3. Unifiers of Japan
Source: unifiersofjapan.framer.website
On Tofu Design Co.’s educational site about Japan’s Sengoku-Edo period, parallax is the engine behind the story of the 16th-century historical figure, Oda Nobunaga. The hero image doesn’t just sit there; as you scroll, it shifts and layers until Oda becomes a full samurai, almost like a camera zoom pulling you closer. That background motion makes the page feel cinematic without demanding any clicks or effort beyond the scroll.
The Shiga map drifts forward from behind the text, and story cards lift up as you pass them. Hover states and accordions give you moments to click, but it’s the parallax that stitches everything together. Scrolling helps you watch a scene play out.
4. Punkt
Source: punkt.co
Punkt’s homepage opens with an envelope that tilts and fades, like a discarded note. It sets up the theme: communication piling up and the need to make sense of it. Then comes the void; the word chaos fills the screen in giant type, a tangled thread drifts across the frame, and the page feels messy yet bare.
Keep scrolling, and that emptiness starts to fill. Copy and visuals arrive in step, showing how the platform pulls order out of the clutter. The parallax makes the shift feel like part of the story itself: problem first, solution revealed as you move down the page.
5. Disco Dungeon
Source: discodungeongame.com
Right from the start, the Disco Dungeon website hero section grabs your attention with a striking graphic of the game’s main character floating in mid-air. As you scroll down, the character smoothly descends, as if exploring deeper into the dungeon, perfectly matching the game’s theme.
Parallax scrolling adds depth, but it also transforms the background into part of the story. The dungeon walls peek through cutouts and stay present as you move, making it feel like there’s always more just out of reach. That tension—wanting to get behind the screen to see the rest of the world—is something parallax scrolling can create. It transforms a plain scroll into a glimpse of the gameplay.
6. Cancel Culture
Source: cancelculture.framer.website
The Cancel Culture website by Ariella Delin & Visar Maxhuni showcases how parallax scrolling can enhance text-driven content. Once you click on a specific example and navigate through the site, key content about the cancelled person-of-study comes into focus, while background text, featuring social media commentary and consequences, subtly moves into view. This dynamic layering is effective because it echoes the feeling of a comment thread in motion, with judgments stacking, reactions rolling in, and the pressure mounting as you scroll. The parallax makes those voices feel like they’re piling on in real-time, which heightens the stakes and draws you deeper into the story.
7. i-D
Source: i-d.co
i-D uses parallax as a pacing tool, giving its photo-driven feed the slow rhythm of an editorial spread. As you scroll, large images and headlines move at slightly different speeds, which gives the feed of fashion and culture stories a bit of depth. It’s a light touch—more about evoking the feel of a print magazine on screen than flashy animation—but it helps the images carry the brand’s voice without requiring much text.
8. FLITE
Source: flite.bike
Bicycle digital hardware brand FLITE uses a parallax effect to create an immersive visual module as you scroll down from the top. The image expands to full bleed, and the image of the product increases in size, drawing you in and making you feel as if you were on the bicycle, looking down at the handlebars. The effect is subtle and evocative.
9. Fusion template
Source: Fusion preview
Framer’s “Fusion” template allows app developers to show various screens within a mobile device using the parallax effect. As the user scrolls down the page, the device shell freezes in place while the content inside flips, along with the descriptive copy next to it. Scrolling also triggers a subtle movement of the device itself—it it ever so slightly tilts in space. The device holds the visitor’s eye, while the content and copy tell a feature-benefit story.
10. Archar template
Source: Archar preview
Framer’s “Archar” template for portfolio websites allows creatives to tell the story of their career and work in a visually captivating way. The large-format text anchors in place, stating the subject’s point of view, while the visuals slide beneath it. Together, the elements create a dynamic show-and-tell presentation of the creative’s expertise.
5 tips for creating parallax effects in Framer
Parallax scrolling can feel a bit intimidating, especially if coding isn’t your strong suit. But with Framer, it can be a breeze—you can create those eye-catching effects with just a few clicks.
Here are some tips to help you nail parallax scrolling in Framer, so your designs look great and work smoothly:
Understand layers and motion
The foundation of parallax scrolling in Framer involves working with layers and controlling their movement. Start by setting up your design with multiple layers, each representing different elements like background, midground, and foreground.
In Framer, you can animate these layers at different speeds to create the illusion of depth as the user scrolls. Remember, the key is subtlety—too much movement can overwhelm the user.
Use scroll triggers
One of the most powerful features in Framer is the ability to create scroll-triggered animations. This means you can set specific actions to occur when a user scrolls to a certain part of your page.
For example, you can animate a layer to move upward as the user scrolls down, or you can reveal elements gradually as they come into view. This technique is crucial for implementing engaging parallax effects.
Adjust speed and easing
To achieve a smooth and polished parallax effect, pay attention to the speed and easing of your animations.
Framer allows you to fine-tune these aspects, ensuring that your elements move in a way that feels natural and visually appealing. Typically, background layers move more slowly than foreground layers, enhancing the 3D-like effect that makes parallax scrolling so captivating.
Incorporate interactive elements
Enhance the impact of your parallax scrolling by integrating interactive elements that respond to user actions.
For example, you can create hover effects that trigger additional animations or add clickable areas that reveal more content as users engage with the page. This not only makes your design more dynamic but also keeps users engaged by encouraging them to explore.
Test across devices
Parallax effects can behave differently on various devices, especially between desktop and mobile.
Framer provides tools to preview and adjust your design for different screen sizes, ensuring a consistent experience. Consider simplifying or adjusting the parallax effects for mobile users, where performance and usability are crucial.
Make your website stand out with parallax effects
Parallax effects are a powerful way to add depth and dynamism to your site, making it more memorable and impactful. With Framer, you never need to touch code to create these effects.
Get started with Framer’s Marketplace of website templates, featuring scrolling animations and parallax features. As you build, you can adjust the scroll speed per layer to fine-tune depth and motion. To take it further, use scroll transforms to animated scale, opacity, or rotation with scroll progress.
With Framer, you can do more than just design a beautiful website—you can create an interactive and immersive experience for your visitors.
