webdevpro.net

L’objectif de cet article est de réaliser une animation sur les textes de type titre, disposant de la class
.js-textAnim

Pour l’ensemble de ces éléments, lorsque l’internaute scroll sa page, il va voir un effet translation sur l’axe des Y de 20px en 1 secondes :

HTML à animer

<div class="js-textAnim textAnim titre"> 
<h2>Lorem ipsum.</h2> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae id, earum mollitia reiciendis magnam alias, sunt dolorem, quisquam illo ut aliquam neque. Culpa illum inventore, placeat expedita asperiores, iste vel.</p> 
<p>Animi dolore quos voluptate, error quibusdam eius iste ea facilis alias numquam vitae necessitatibus porro provident quam sed dicta, mollitia autem! Enim rem reprehenderit dicta, odio, pariatur quam assumenda esse!</p> <p>Autem error, fuga non dolorem officia iste harum obcaecati quidem quas vero voluptate eos repudiandae aut maxime perspiciatis quia a pariatur necessitatibus beatae voluptatem vitae rerum. Qui libero reiciendis, dignissimos!</p> <p>Est unde earum rem nobis nostrum sapiente corporis ducimus iure perspiciatis facere, ipsa excepturi, culpa adipisci nisi quisquam optio incidunt in possimus explicabo illo aspernatur aperiam officiis sed harum. Suscipit?</p> <hr>

CSS

.textAnim { 
  transform: translateY(20px); 
  transition: transform 1s; 
  text-align: center; 
} 

Javascript

(function() {
// récupère les titres à animer
const elements = document.querySelectorAll(".js-textAnim");
  // fonction générique appelée par l'event listener vérifier élément par élément si les conditions d'entrée dans la boucle sont true
const animTitles = function() {
   elements.forEach(function(element) {
   var positionElement = element.offsetTop;       
   var heightElement = element.offsetHeight;   
  // lorsque que l'élément devient visible dans le navigateur   
   if (document.documentElement.scrollTop > (positionElement - window.innerHeight + heightElement)) 
    {
  element.style.transform = "translateY(0em)";   
}
   });
 };
 // écoute
   window.addEventListener("scroll", animTitles);
   window.addEventListener("load", animTitles);
 })();