Make a parallax effect with 10 lines of JavaScript
Tags: html, css, javascript, beginners
Published: 2019-12-19 17:21:06

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/parallax-effect-with-10-lines-of-javascript/) <hr>

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](https://codepen.io/ibrahima92/full/ExYZPqg)

  - 1. [HTML](#html)
  - 2. [CSS](#css)
  - 3. [JavaScript](#javascript)

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

```html
    <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.

```css
@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.

```css
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.

```css
.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.

```javascript
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.<br> 
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.<br> 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](https://codepen.io/ibrahima92/full/ExYZPqg) <br>
![fullscreen-slider](https://drive.google.com/uc?id=1N0G_WtotWNNrDSsZ2W9rd4Sys8L3Rccc)

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |