DEV Community

Ibrahima Ndaw
Ibrahima Ndaw

Posted on • Updated on • Originally published at ibrahima-ndaw.com

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

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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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);
  }
}


Enter fullscreen mode Exit fullscreen mode

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);
});


Enter fullscreen mode Exit fullscreen mode

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

fullscreen-slider

Top comments (15)

Collapse
 
alexparra profile image
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.

Collapse
 
ibrahima92 profile image
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.

Collapse
 
darkain profile image
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.

Collapse
 
miclgael profile image
Michael Gale

Nice one!

See also: this trick with perspective and translateZ properties

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

Collapse
 
anwar_nairi profile image
Anwar

On fire!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Thanks for sharing your resource.

Collapse
 
mahmoudibrahiam profile image
Mahmoud Ibrahiam

Can I share it on my blog?

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Yes of course you can.

Collapse
 
iquirino profile image
Igor Quirino

What about thousand lines of css? ^
Nice article!

Thread Thread
 
mahmoudibrahiam profile image
Mahmoud Ibrahiam

where ??

Collapse
 
mahmoudibrahiam profile image
Mahmoud Ibrahiam • Edited

Thank you, Mr Ibrahima

Collapse
 
youkero profile image
youkero

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

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

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

Collapse
 
shroom2020 profile image
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.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.