Dans cet article, nous allons créer un bel effet Parallax avec HTML, CSS et seulement 10 lignes de JavaScript.

Vous pouvez le voir en direct ici

• HTML
• CSS
• JavaScript

HTML

Comme vous pouvez le voir, nous commençons par envelopper nos éléments dans la balise main.

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

Ensuite, nous utilisons deux balises pour créer l'effet de parallaxe. La première balise, header contient les éléments affichés lors du chargement de la page, et la seconde,section sera déclenchée lors du défilement pour démarrer l'effet.

CSS

Comme d'habitude, nous commençons par faire quelques réinitialisations et importons la police nécessaire.

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

Ensuite, nous utilisons position: relative pour pouvoir contrôler la position de la balise header, et quand l'effet commencera la propriété z-index: -1 placera la balise header derrière la section élément.

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

Ici, nous utilisons l'inverse pour le sélecteur section, en affectant la propriété z-index à 1 pour placer littéralement la balise section au-dessus de header lorsque nous commençerons à faire défiler.

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

Et enfin et surtout, nous faisons quelques animations pour l'entrée des éléments. Avec l'effet de rebond pour la section et l'effet de fondu pour la balise header. La classe animate-me sera ajoutée à la balise section ultérieurement via JavaScript.

JavaScript

Nous allons enfin faire la magie avec JavaScript, pour pouvoir faire l'effet de parallaxe lorsque nous allons commencer à défiler.

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

Comme vous pouvez le voir ici, nous écoutons l'événement scroll pour démarrer l'effet.
Ensuite, nous attribuons à la constante distance la quantité de défilement sur l'axe Y (verticalement). Et on sélectionne les éléments nécessaires dans le DOM et on accéde à la propriété transform.
Avec cela, nous pouvons maintenant utiliser la valeur translateY pour donner dynamiquement une valeur à translateY. La valeur diffère entre header et son élément enfant container pour juste avoir un effet plus fluide. Ensuite, nous finissons tout, en ajoutant la classe animate-me pour le titre section pour déclencher l'effet rebondissant.

Vous pouvez le voir en direct ici