Afficher du contenu au scroll

Afficher du contenu au scroll

Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire apparaître des éléments (images..) lorsque l’internaute découvre votre contenu en scollant vers le bas, comme montré ci-dessous.

Je vous invite à expérimenter cette effet. Commençons par le code HTML :

<main>
  <h1>Effet Scroll</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <figure>
    <img src="https://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7f0bc29050a6d9a793469d897455f7da" alt="" width="50%" />  
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
</main>

Vous remarquez déjà la présence de la balise <figure> qui contient l’image . La technique consiste à faire défiler vers la gauche cette balise lorsque le curseur du scroll s’en approche.  En effet coté CSS, cette balise, par défaut, est cachée par la propriété opacity et positionnée (propriété position) vers la droite avec la propriété left.

figure{
  position: relative;
  left: 60%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition : all 1.5s ease;
}
body{
  overflow-x: hidden;
}

Voici enfin le code Javascript qui va orchestrer l’effet attendu. Pour éviter les conflits de nommage de variable avec les autres scripts existant, le code est placé dans une fonction anonyme.

(function() {
  
})();

Nous allons surveiller la position du scroll avec l’événement scroll puis changer le style de la balise <figure> (fig), lorsque le curseur du scroll (posCurseur) se trouve à moins de 300px de cette dernière (posImg).

(function() {
  var fig = document.querySelectorAll("figure")[0];
  var posImg = fig.offsetTop;
  function effet(){
    var posCurseur = this.pageYOffset;
    if(posImg-posCurseur<300){
      fig.style.left = 0;
      fig.style.opacity = 1;
    }else{
      fig.style.left = "160%";
      fig.style.opacity = 0;
    }
  }
  window.addEventListener("scroll", effet);
})();

Et voilà, c’est terminer! Simple non! Vous pouvez bien-sur personnaliser ce code pour l’adapter à votre graphisme..

Visualisez sur Codepen le résultat.