Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

In this quick tip tutorial we’ll learn to add a simple yet useful parallax scrolling effect to a hero image. To achieve it we’ll use a bit of JavaScript code, but keep in mind that you can create pure CSS parallax websites by combining 3D transforms.

Here’s the page that we're going to build. Scroll down!

Let’s build it in three fundamental steps: beginning with the markup, then the styling, then the behavioral JavaScript.

1. Begin With the HTML Markup

The page markup consists of two sections. The first section holds the hero image and its child elements, while the second section contains the page’s main content:

<section class="banner" data-direction="down" data-speed="0.6">
  <h1 class="banner-title" data-direction="up" data-speed="0.25">...</h1>
  <p class="banner-subtitle" data-direction="up" data-speed="0.35">...</p>
  <img class="skiing" src="IMG_SRC" alt="" data-direction="up" data-speed="0.85">
</section>

<section class="content">
  <div class="container">...</div>
</section>

Notice the data-direction and data-speed custom attributes assigned to the elements of the first section. These elements are parallax elements and the values of their attributes will determine their behavior during the parallax scrolling. More on that in a minute!

2. Add the CSS

Next we’ll specify a few CSS rules for our page. Nothing really important, just some basic stuff that will enhance the page layout:

body {
  font: 20px/1.6 sans-serif;
}

.banner {
  position: relative;
  height: 100vh;
  background: #ededed url(IMG_SRC) no-repeat center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner > *:not(.skiing) {
  font-weight: 900;
  letter-spacing: -0.05em;
  padding: 5px 15px;
  background: #ffc844;
}

.banner-title {
  font-size: 3em;
  margin-bottom: -0.5em;
  transform: rotate(-6deg);
}

.banner-subtitle {
  font-size: 1.5em;
  box-shadow: -15px -15px 15px rgba(0, 0, 0, 0.07);
  transform: rotate(-3deg);
}

.skiing {
  position: absolute;
  right: 40px;
  bottom: 20px;
  max-width: 150px;
}

.content {
  position: relative;
  padding: 20px 0;
  background: white;
}

.container {
  max-width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
}

.content p + p {
  margin-top: 25px;
}

@media screen and (max-width: 500px) {
  body {
    font-size: 14px;
  }

  .skiing {
    right: 20px;
    max-width: 100px;
  }
}

3. Apply the JavaScript

To create the parallax effect, we’ll listen to the scroll event.

Each time the page is scrolled, we loop through the parallax elements and do the following things:

• We retrieve the value of their data-speed attribute and multiply it by the number of pixels that the document is scrolled vertically. That gives us the speed at which each of the parallax elements runs. So for example, data-speed = 1 means that an element will move as quickly as the page content. On the other hand, an element with data-speed = 0.5 will move 50% slower than the page scrolling.
• We retrieve the value of their data-direction attribute. This attribute specifies where the parallax elements will move as the page gets scrolled. Possible values are up and down. So for example, data-direction = "up" means that an element will move upwards. In our case, everything but the image will move in an upward direction.
• Based on their attribute values, we use the translate3d() function to move the elements either upwards or downwards. 

Here’s the corresponding JavaScript code:

const parallaxEls = document.querySelectorAll("[data-speed]");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  for (const parallaxEl of parallaxEls) {
    const direction = parallaxEl.dataset.direction == "up" ? "-" : "";
    const transformY = this.pageYOffset * parallaxEl.dataset.speed;
    if (parallaxEl.classList.contains("banner-title")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-6deg)`;
    } else if (parallaxEl.classList.contains("banner-subtitle")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-3deg)`;
    } else {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0)`;
    }
  }
}

Conclusion

That’s it! In this quick tip, we managed to create a really simple parallax scrolling effect with just a few lines of JavaScript. Again, as already discussed, this is a basic demo and might not be suitable for all parallax cases. 

Parallax effects can certainly add character to your website, but the browser may have to perform “expensive” tasks to build them, using up resources and impeding performance. Be sure to take performance into account during your parallax implementations.

However, if you want to create a more advanced parallax experience, you can have a look at some JavaScript libraries which exist out there like parallax.js.

As always, thanks for reading!

More Parallax Goodness on Tuts+

• 
  Web Design
  What Is Parallax Scrolling?
  Craig Campbell
• 
  WordPress
  How to Make a Simple One Page Website: From a Parallax WordPress Theme
  Brenda Barron
• 
  Inspiration
  Web Design Inspiration: Scrollin’, Scrollin’, Scrollin’
  Ian Yates