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
Sorry for the interrupt!
If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)
It's an affiliate link, so by purchasing, you support the blog at the same time.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