How to Create a Parallax Scrolling Effect with CSS

Parallax scrolling is a popular web design technique that creates an illusion of depth by moving background elements at a different speed than foreground elements when the user scrolls. This effect can add a sense of immersion and interactivity to a website, making it more engaging for visitors. In this blog post, we will explore how to create a parallax scrolling effect using CSS, covering the fundamental concepts, usage methods, common practices, and best practices.

Table of Contents

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts

What is Parallax Scrolling?

Parallax scrolling is based on the principle of relative motion. When the user scrolls the page, different layers on the screen move at different speeds, creating a 3D-like effect. In CSS, we can achieve this by manipulating the background-attachment and background-position properties.

background-attachment Property

The background-attachment property determines whether a background image is fixed or scrolls with the rest of the page. There are two main values for this property:

  • scroll: The background image scrolls with the page. This is the default value.
  • fixed: The background image remains fixed in place, even when the page is scrolled.

background-position Property

The background-position property sets the starting position of a background image. It can take values such as top, bottom, left, right, center, or specific pixel values.

Usage Methods

Basic Parallax Scrolling with Background Images

The simplest way to create a parallax scrolling effect is by using background images. Here is an example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

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

    .content {
      padding: 50px;
      background-color: white;
    }
  </style>
  <title>Parallax Scrolling Example</title>
</head>

<body>
  <div class="parallax"></div>
  <div class="content">
    <h2>Welcome to my website</h2>
    <p>Here is some sample text. You can replace this with your own content.</p>
  </div>
  <div class="parallax"></div>
</body>

</html>

In this example, the .parallax class has a fixed background image that creates the parallax effect when the user scrolls. The .content class contains the regular page content.

Parallax Scrolling with Multiple Layers

We can also create a more complex parallax effect by using multiple layers. Here is an example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .parallax-container {
      position: relative;
      height: 500px;
      overflow: hidden;
    }

    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .layer1 {
      background-image: url('layer1.jpg');
      background-size: cover;
      z-index: 1;
      transform: translateZ(0);
      will-change: transform;
    }

    .layer2 {
      background-image: url('layer2.jpg');
      background-size: cover;
      z-index: 2;
      transform: translateZ(-1px) scale(2);
      will-change: transform;
    }

    .content {
      padding: 50px;
      background-color: white;
    }
  </style>
  <title>Multi-Layer Parallax Scrolling Example</title>
</head>

<body>
  <div class="parallax-container">
    <div class="layer layer1"></div>
    <div class="layer layer2"></div>
  </div>
  <div class="content">
    <h2>Welcome to my website</h2>
    <p>Here is some sample text. You can replace this with your own content.</p>
  </div>
</body>

</html>

In this example, we have two layers with different transform values. The translateZ property is used to create a depth effect, and the scale property is used to adjust the size of the layer.

Common Practices

Responsive Design

It is important to make your parallax scrolling effect responsive. You can use media queries to adjust the height and other properties of the parallax elements based on the screen size. For example:

@media screen and (max-width: 768px) {
  .parallax {
    height: 300px;
  }
}

Performance Optimization

Parallax scrolling can be resource-intensive, especially on mobile devices. To optimize performance, you can use the will-change property to let the browser know that an element’s properties will change. This allows the browser to optimize its rendering.

.parallax {
  will-change: transform;
}

Best Practices

Use Appropriate Images

Choose high-quality images that are optimized for the web. Large images can slow down the page load time. You can use image compression tools to reduce the file size without sacrificing too much quality.

Test on Different Devices

Test your parallax scrolling effect on different devices and browsers to ensure that it works well and looks good. Some older browsers may not support all the CSS properties used for parallax scrolling.

Conclusion

Creating a parallax scrolling effect with CSS is a great way to add a modern and engaging touch to your website. By understanding the fundamental concepts, using the right usage methods, following common practices, and implementing best practices, you can create a smooth and visually appealing parallax effect. Remember to optimize for performance and test on different devices to provide the best user experience.

References