How to Add Parallax Scrolling to Your Website (With Examples)

Looking to add some depth and visual interest to your website? Parallax scrolling could be just the thing. This popular web design trend creates an immersive, engaging experience by making background images move slower than foreground elements, creating an illusion of depth and movement as the user scrolls down the page.

When used strategically, parallax design is a powerful tool for storytelling, directing attention, and making web pages feel more dynamic and alive. In this post, we‘ll demystify parallax scrolling – explaining what it is, how it works, and how you can implement it on your own site. We‘ll also showcase some stellar examples of parallax done well. Let‘s dive in!

What is Parallax Scrolling?

Parallax scrolling is a web design technique where the background content (usually an image) and the foreground content (usually text) move at different speeds as the user scrolls down the page. This creates a perception of depth and immersion.

The term "parallax" has roots in astronomy, where it refers to the apparent displacement of an object caused by a change in the observer‘s point of view. In web design, we achieve a similar effect by making background images scroll more slowly than foreground elements.

The History of Parallax Scrolling in Web Design

While parallax has a long history in video game design and traditional animation, it started gaining traction in web design in the early 2010s. One of the first prominent examples was Nike‘s "Better World" site in 2011, which used parallax to create an engaging, story-driven experience about the company‘s sustainability initiatives.

In the following years, parallax became a web design trend, with many sites using the technique to add visual flair and make long-scrolling pages feel more dynamic. Some key milestones in parallax web design:

• 2011: Nike Better World
• 2012: Oakley‘s "Airbrake" site
• 2013: New York Times‘ "Snow Fall" article
• 2015: Firewatch game site
• 2016: Make Your Money Matter

While the technique has evolved over the years (now often enhanced with SVG graphics, WebGL, and more sophisticated animations), the core principle remains the same: use the parallax depth effect to create immersion and guide the user through content in an engaging way.

The Benefits of Parallax Scrolling

When used strategically, parallax scrolling can enhance the user experience in several ways:

1. Visual Engagement: The depth effect and subtle animations created by parallax are naturally eye-catching, making web pages more dynamic and memorable.

2. Storytelling: Parallax allows you to control the pace and flow of information as the user scrolls, making it an effective tool for visual storytelling and guiding users through your content.

3. Better Pacing: On long-scrolling pages, parallax can help break up content and provide visual markers of progression. This can make dense content feel more digestible.

4. Memorable Experiences: When executed well, parallax contributes to a richer, more immersive user experience that can differentiate your site and brand.

Some compelling statistics on the impact of parallax:

• Pages with parallax have an average session duration of 2+ minutes, 26.9% longer than the average non-parallax page. (Upwork)
• 70% of users report that page speed affects their willingness to buy from an online store. Visual techniques like parallax can make load times feel faster. (Unbounce)
• Eye-tracking studies show that parallax effects successfully attract and direct user attention. (CXL Institute)

However, it‘s important to note that parallax is not always the right solution. It comes with some potential downsides that need to be considered and mitigated:

• Performance: The graphics and scripting required for parallax can negatively impact page load times and performance, especially on mobile. Optimization is key.
• Overuse: Too many parallax effects can be overwhelming and distracting. Use them sparingly and purposefully.
• Mobile Experience: Parallax doesn‘t always translate well to mobile screens and touch interfaces. Have fallbacks in place.
• Accessibility: Animations can be problematic for users with motion sensitivity. Provide options to turn off parallax effects.

When weighing whether to use parallax, consider your users, your content, and what you want to achieve. Parallax is most effective for narrative-driven sites, long scrolling pages, and immersive brand experiences. For most informational sites, a more conservative approach is likely better.

How Parallax Scrolling Works

Now that we understand what parallax is and when to use it, let‘s look under the hood at how the effect is actually created.

The Building Blocks: HTML, CSS, JavaScript

At its core, parallax scrolling is achieved by moving different page elements at different speeds as the user scrolls. This involves three main building blocks:

1. HTML provides the structure and content of the page, with elements positioned relative to each other.
2. CSS positions elements and sets up properties like background-attachment and transform that create the parallax depth effect.
3. JavaScript tracks the user‘s scroll position and adjusts the positioning/speed of parallax elements accordingly.

Creating a Simple Parallax Effect with CSS

The simplest form of parallax scrolling can be achieved with pure CSS. Here‘s a code snippet that creates a basic parallax effect:

.parallax {
  background-image: url("background.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

The key property here is background-attachment: fixed;. This keeps the background image stationary while the rest of the page content scrolls over top, creating that signature parallax depth effect.

Advanced Parallax with JavaScript and Libraries

For more complex parallax effects involving multiple elements or advanced animations, JavaScript is typically used to fine-tune the scrolling behavior. Tracking the scroll position with JavaScript allows you to trigger transforms and animations on parallax elements at specific scroll points.

There are also a number of JavaScript libraries and plugins that simplify the process of creating parallax effects:

• Rellax: A lightweight, vanilla JavaScript parallax library
• Parallax.js: A dirt simple parallax scrolling effect created by pixelcog
• ScrollMagic: A powerful animation library that can handle parallax among many other effects
• Skrollr: Another popular parallax and scrolling animation library

These tools provide a foundation to build on so you don‘t have to start from scratch with complex calculations and cross-browser issues.

While we won‘t get into the weeds of JavaScript parallax in this post, here‘s a basic demo of how it can work:

// Cache the elements
let parallaxContainer = document.querySelector(‘.parallax-container‘);
let parallaxItems = document.querySelectorAll(‘.parallax-item‘);

// Track the scroll position
let scrollPosition = window.pageYOffset;

// Map the scroll position to the parallax effect
function parallaxScroll() {
  parallaxItems.forEach(item => {
    let speed = item.dataset.speed; // custom parallax speed on each item
    item.style.transform = `translateY(${scrollPosition * speed}px)`;
  });
}

// Rerun on scroll
window.addEventListener(‘scroll‘, parallaxScroll);

In this example, each parallax item has a custom "speed" set in a data attribute. The higher the speed value, the faster the item will move relative to the scroll position, creating that illusion of depth.

Of course, this is a simplified example. In practice, there are many more factors to consider like performance, cross-browser compatibility, and responsiveness. But hopefully it gives you a sense of how parallax effects are controllable with JavaScript.

Examples of Effective Parallax Scrolling

To better understand how to use parallax effectively, let‘s look at a few real-world examples and break down what makes them work.

1. Firewatch

The website for the game Firewatch is a masterclass in parallax scrolling. As you scroll down the page, multiple layers of background images and text elements move at different speeds, creating a sense of depth and immersion in the game‘s rich, illustrated world.

What makes it effective:

• The parallax effect is used to enhance the storytelling and atmosphere of the game
• The layered elements create a sense of exploring the game‘s environment
• The effect is combined with other animations like fades and zooms to guide the user‘s attention
• Fallbacks are in place for mobile and low-power devices

2. Make Your Money Matter

This site for a financial education initiative uses parallax to add visual interest and flow to what could otherwise be dry subject matter.

What makes it effective:

• Subtle parallax animations help chunk the content and signal transitions between sections
• The parallax effects guide the user‘s focus without being overwhelming
• Strong typographic elements pair well with the parallax backgrounds
• Performance is kept in check with compressed assets and hardware acceleration

3. Soulshifters Studio

This portfolio site for a design agency uses parallax to create an immersive, almost dreamlike feel as you scroll through the showcase of work.

What makes it effective:

• The parallax effects are surreal and memorable without sacrificing usability
• Parallax is paired with other scroll-triggered animations for visual variety
• Hover states and interactions add to the dynamism and invite exploration
• The Effects are turned off on mobile to prioritize simplicity and performance

Tips for Using Parallax Effectively

Drawing from these examples and others, here are some key tips to keep in mind when implementing parallax on your own site:

1. Use parallax to enhance, not distract. Parallax should guide users through your content, not get in the way of it. Avoid overloading pages with too many effects.

2. Be strategic about placement. Parallax is most effective in hero sections, transitions, and key storytelling moments. Don‘t feel like you need to use it everywhere.

3. Optimize for performance. Use compressed assets, lazy loading, and hardware acceleration to minimize the performance impact of parallax. Always test on a variety of devices.

4. Design with depth in mind. Plan out your parallax elements as layers, thinking about how they will move relative to each other. Sketch it out before jumping into code.

5. Provide user controls. Allow users to turn off parallax effects or limit motion if they prefer. This is important for accessibility.

6. Pair parallax with great content. At the end of the day, parallax is just a visual tool. It can enhance great content, but it won‘t save poor content. Focus on substance first.

The Future of Parallax

As web technologies continue to evolve, so do the possibilities for parallax and immersive web design. Some exciting developments on the horizon:

• WebGL and 3D Transforms: Newer CSS properties and Web GL open up possibilities for even more immersive, 3D parallax effects.
• Virtual and Augmented Reality: As VR and AR become more mainstream, parallax principles can be applied to create depth effects in 3D virtual spaces.
• Scroll-Triggered Animations: Parallax is just one type of scrolling animation. Expect to see more immersive effects triggered by user scrolling and interaction.

While trends will come and go, the core principle of parallax – using motion and depth to engage users – is likely here to stay. By understanding how to wield it effectively, you can create web experiences that stand out and captivate.

Key Takeaways

• Parallax scrolling creates an illusion of depth by making background images move more slowly than foreground content.
• When used strategically, parallax can make pages more engaging, memorable, and effective at visual storytelling.
• Parallax is achieved with a combination of HTML, CSS, and JavaScript that position elements in 3D space and move them based on scroll position.
• Key considerations for effective parallax include performance, accessibility, strategic placement, and designing with depth in mind.
• As web technologies evolve, expect to see parallax being used in new ways, from 3D transforms to virtual reality.

By understanding the principles, benefits, and techniques behind parallax scrolling, you can harness its power to create immersive, engaging web experiences. Just remember to always put the user first and use parallax to enhance your content, not overwhelm it. Happy scrolling!