Pure CSS Parallax Effects: Creating Depth and Motion Without a Single Line of JavaScript

Photo by Mohammad Rahmani on Unsplash

Parallax scrolling effects are a popular web design trend used to create a sense of depth and engagement by making background layers move slower than foreground content. Traditionally, these effects were achieved with JavaScript, but with the evolution of CSS, you can now create these effects with nothing but pure CSS.

In this advanced article, we’ll explore how to implement a variety of parallax effects using only CSS, breaking down the techniques step-by-step. By the end, you’ll have a clear understanding of how to add depth and motion to your websites without relying on JavaScript.

1. What is Parallax Scrolling?

Parallax scrolling is a technique in which background images move more slowly than the foreground content as a user scrolls down the page. This creates a 3D-like illusion of depth.

With CSS, we can simulate this effect using properties like transform, perspective, translateZ(), and scroll-behavior. These allow us to manipulate elements’ positions and apply different scroll speeds to create the parallax effect.

2. Basic CSS Parallax with Background Images

The easiest and most common way to create a parallax effect is by making the background image scroll at a slower speed than the content in the foreground.

HTML Structure

<section class="parallax-section">
  <div class="content">
    <h1>Welcome to the Parallax World</h1>
    <p>Scroll to see the effect!</p>
  </div>
</section>

<section class="content-section">
  <h2>More Content</h2>
  <p>This section does not have a parallax effect.</p>
</section>

CSS Code for Background Parallax

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.parallax-section {
  height: 100vh;
  background-image: url('https://via.placeholder.com/1920x1080');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
}

.content-section {
  padding: 100px;
  background-color: #f4f4f4;
  text-align: center;
}

Explanation:

• background-attachment: fixed: This keeps the background image fixed in place, while the foreground content scrolls over it, creating a basic parallax effect.
• Full-height sections: The sections are set to 100vh to cover the entire viewport, making the scrolling effect smoother and more pronounced.

3. Multi-Layered Parallax Using CSS Transforms

To create more complex parallax effects with multiple layers, we can use CSS transform properties, specifically translateZ() in combination with perspective. This technique will simulate the depth of field by having different layers move at different speeds.

HTML Structure for Multi-Layered Parallax

<div class="parallax-container">
  <div class="parallax-layer layer-back"></div>
  <div class="parallax-layer layer-middle"></div>
  <div class="parallax-layer layer-front"></div>
</div>

CSS for Multi-Layered Parallax

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  perspective: 1px;
  transform-style: preserve-3d;
}

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  transform-origin: 0 0;
}

.layer-back {
  background-image: url('https://via.placeholder.com/1920x1080/333333');
  transform: translateZ(-2px) scale(3);
}

.layer-middle {
  background-image: url('https://via.placeholder.com/1920x1080/666666');
  transform: translateZ(-1px) scale(2);
}

.layer-front {
  background-image: url('https://via.placeholder.com/1920x1080/999999');
  transform: translateZ(0) scale(1);
}

Explanation:

• perspective: 1px: Sets the perspective on the container to create a 3D space in which elements can move.
• transform: translateZ(): Moves the elements along the Z-axis. The further an element is moved, the slower it will appear to scroll, creating a layered parallax effect.
• scale(): Resizes the layers to compensate for the visual shrinkage caused by translating along the Z-axis.

This technique allows for more dynamic and realistic parallax effects, with each layer moving at a different speed based on its depth.

4. Parallax with CSS Scroll Snap

You can add even more interactivity by combining parallax effects with CSS scroll-snap, creating a smooth, step-by-step scroll through different sections of content.

HTML Structure with Scroll Snap

<div class="scroll-snap-container">
  <section class="snap-section section1">Section 1</section>
  <section class="snap-section section2">Section 2</section>
  <section class="snap-section section3">Section 3</section>
</div>

CSS for Scroll Snap with Parallax

body, html {
  height: 100%;
  margin: 0;
}

.scroll-snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.snap-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}

.section1 {
  background-image: url('https://via.placeholder.com/1920x1080/111111');
}

.section2 {
  background-image: url('https://via.placeholder.com/1920x1080/444444');
}

.section3 {
  background-image: url('https://via.placeholder.com/1920x1080/777777');
}

Explanation:

• scroll-snap-type: y mandatory: Forces the scroll to snap to the start of each section as you scroll down the page.
• Background Parallax: Each section has a parallax background image, and as the user scrolls, they are snapped to each section, making the transitions smooth.

5. Advanced Real-Time Project: Parallax Hero Banner

Let’s combine everything we’ve learned into a real-world project: a parallax hero banner for a landing page.

HTML Structure for Hero Banner

<header class="hero">
  <div class="hero-layer layer-background"></div>
  <div class="hero-layer layer-foreground">
    <h1>Explore the World of CSS</h1>
    <p>Scroll down to discover more</p>
  </div>
</header>
<section class="content-section">
  <h2>About Us</h2>
  <p>CSS Parallax effects can make your website come alive without JavaScript!</p>
</section>

CSS for Hero Parallax Banner

body, html {
  margin: 0;
  font-family: 'Arial', sans-serif;
  height: 100%;
  overflow-x: hidden;
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  perspective: 1px;
}

.hero-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.layer-background {
  background-image: url('https://via.placeholder.com/1920x1080/333333');
  transform: translateZ(-2px) scale(3);
}

.layer-foreground {
  z-index: 1;
}

.content-section {
  padding: 100px;
  text-align: center;
  background-color: #f4f4f4;
}

h1 {
  font-size: 4em;
  margin: 0;
}

p {
  font-size: 1.5em;
}

Explanation:

• Hero Layers: The background and foreground layers move at different speeds, creating a stunning parallax effect. The transform: translateZ(-2px) in the background layer makes it move slower than the content in the foreground.
• Text Overlay: The z-index ensures the text in the foreground remains in front of the background image.

This hero banner creates an impressive visual introduction to a website, adding depth and interactivity without a single line of JavaScript.

Conclusion

In this article, we explored the art of creating captivating parallax effects using pure CSS, proving that you can achieve stunning depth and motion without relying on JavaScript. By mastering CSS properties like transform, translateZ(), and leveraging techniques such as background-attachment and scroll-snap, we unlocked the ability to design dynamic and engaging web experiences.

From basic background parallax to multi-layered effects and interactive hero banners, the techniques outlined here can elevate your web projects, making them visually appealing and immersive. As you experiment with these methods, remember that creativity is your greatest asset — combine layers, adjust speeds, and play with colors to craft unique effects that resonate with your audience.

Embrace the power of CSS to create not just functional layouts, but artful experiences that captivate and inspire. With these skills, you’re well-equipped to bring your web designs to life, one scroll at a time.

Happy coding!