Make a parallax effect with 10 lines of JavaScript

Originally posted on my blog

---

In this post, we're going to make a nice Parallax effect with HTML, CSS and just 10 lines of JavaScript.

You can check it live here

• 1. HTML
• 2. CSS
• 3. JavaScript

HTML

As you can see, we start by wrapping our elements in the main tag.

    <main>
      <header>
        <div class="container">
          <i class="fas fa-5x fa-laugh"></i>
          <h3>Welcome</h3>
          <p>Scroll to see how cool i am!</p>
        </div>
      </header>

      <section>
        <h3>Cool like you</h3>
      </section>
    </main>

Then, we use two tags to make the parallax effect. The first tag, header holds the elements displayed when the page loads, and the second one, section will be fired on scroll to start the effect.

CSS

As usual, we start by doing some resets and import the needed font.

@import url("https://fonts.googleapis.com/css?family=Courgette:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #0056a7, #165fa3, #477aaa);
  font-family: "Courgette", cursive;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  height: 100vh;
  color: #eee;
  z-index: -1;
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
}

Then, we use position:relative to be able to control the position of the header tag, and when the effect will start the property z-index:-1 will place the header tag behind the section element.

section {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 100vh;
  font-size: 5rem;
  background: #fcdb6d;
  color: #0056a7;
}

Here, we use the opposite for the section selector, by assigning the z-index property to 1 to literally place the section tag above the header when we start scrolling.

.animate-me {
  animation: bounceIn 3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

And last but not the least, we make some animations for the elements entrance. With the bouncing effect for the section and the fading effect for the header. The class animate-me will be added to the section later through JavaScript.

JavaScript

We'll finally make the magic happen with JavaScript, to be able to make the parallax effect when we scroll.

window.addEventListener("scroll", function() {
  const distance = window.scrollY;
  document.querySelector("header").style.transform = `translateY(${distance *
    1}px)`;
  document.querySelector(
    ".container"
  ).style.transform = `translateY(${distance * 0.3}px)`;
  setTimeout(() => {
    document.querySelector("section h3").classList.add("animate-me");
  }, 400);
});

As you can see here, we listen to the scroll event to start the effect.

Then, we assign to the constant distance the amount of scroll through the Y-axis(vertically). And select the needed elements from the DOM and access to the transform property.
With that, we can now use the translateY value to dynamically give value to translateY. The value differs between header and its child element container to just have a smoother effect. Then, we finish up everything, by adding the animate-me class for the section title for the bouncing effect.

That's all folks!

You can check it live here

TWITTER	BLOG	NEWSLETTER	GITHUB	LINKEDIN	CODEPEN	DEV

Comments

[Alex Parra]

As a performance improvement, move the document.querySelector calls outside the scroll event listener, assigned to variables. That way, the browser only has to traverse the DOM once instead of on every scroll event which is what’s happening now. And then, look into throttle to limit the handler calls as scroll fires at a very high rate.
Best.

[Ibrahima Ndaw]

You're absolutely right. I always use selectors in that way. For a real apps, i should control the scroll with a debounce function, but for this quick may be it's not mandatory. So thanks again for your very useful comment.

[Michael Gale]

Nice one!

See also: this trick with perspective and translateZ properties

alligator.io/css/pure-css-parallax/

[Anwar]

On fire!

[Ibrahima Ndaw]

Thanks for sharing your resource.

[Mahmoud Ibrahiam]

Can I share it on my blog?

[Ibrahima Ndaw]

Yes of course you can.

[Igor Quirino]

What about thousand lines of css? ^{^}
Nice article!

[Mahmoud Ibrahiam]

where ??

[Mahmoud Ibrahiam]

Thank you, Mr Ibrahima

[Vincent Milum Jr]

Just as an FYI for anyone reading. As a reminder, these types of things are basically an anti-pattern for UX and accessibility. They may be fancy and pretty at face value, but suffer issues in different user agents and for screen readers. These tend to suffer even more when transitioning between touch, mouse wheel, mouse drag, scroll bar, arrow keys, and page up/down keys. And that's before even getting into javascriptless browsing.

[youkero]

If you reduce the height of the window, you can scroll forever 😁

[Ibrahima Ndaw]

It's not that much responsive, i will soon.

[Shroom2020]

This effect doesn't look that good. However, strip away the parts that degrade user experience, and it's an excellent base for a stunning parallax effect.