Associer l’apparition d’un bloc dans la page à une action

Il existe des plugin pour jquery, le plus connu étant waypoints, qui permettent de détecter si lors d’un scroll, un élément apparait dans la page. Voici un code relativement court de démonstration de cette fonction.

Précédent | 11/11

Comparer le scrollTop()

Il s’agit de comparer le nombre de pixels scrollé depuis le haut de la page, qui est un chiffre, avec l’endroit dans la page où se trouve tout les blocs associé à une classe (ici .truc). En comparant position et la taille verticales du bloc avec ce chiffre, on peut déterminer si le bloc est actuellement dans l’espace de la fenêtre du navigateur. Si c’est le cas, on lui ajouter la classe .inview, sinon on la retire.
En associant une transition à cette classe, on peut obtenir différents effets avec l’opacité (opacity), le déplacement (translate), l’agrandissement (scale), la rotation (rotate), etc. Et jouer sur les combinaisons de ces effets.

Modifier le script

Ce code enlève la classe .inview lorsque l’élément disparait de la page, mais il est possible de ne pas supprimer cette classe, rendant l’apparition permanente.

Il est aussi possible de rendre l’apparition plus tardive ou rapide en jouant sur le calcul : l’élément peut alors apparaitre alors qu’il est au milieu de la fenêtre, ou au contraire, commencer sa transition alors qu’il n’est pas encore visible.

Le code

<!-- dupliquer ces blocs pour qu'un scroll soit possible -->
<article class="truc slide-right">Un truc</article>
<article class="truc slide-left">Un truc</article>
<article class="truc appears">Un truc</article>
<article class="truc appears">Un truc</article>
<article class="truc appears">Un truc</article>
<article class="truc appears">Un truc</article>
<article class="truc appears">Un truc</article>

<script>
var $animation_elements = $('.truc');
var $window = $(window);

function check_if_in_view() {
   var window_height = $window.height();
   var window_top_position = $window.scrollTop();
   var window_bottom_position = (window_top_position + window_height);

   $.each($animation_elements, function() {
       var $element = $(this);
       var element_height = $element.outerHeight();
       var element_top_position = $element.offset().top;
       var element_bottom_position = (element_top_position + element_height);

       //check to see if this current container is within viewport
       if ((element_bottom_position >= window_top_position) &&
                       (element_top_position <= window_bottom_position)) {
                       $element.addClass('in-view');
       } else {
           // enlever ceci pour un effet permanent
           $element.removeClass('in-view');
       }
   });
}

$window.on('scroll resize', check_if_in_view);
</script>

Un exemple de css pour accompagner ce code :

<style>
article.truc {
   width:300px;
   height:100px;
   padding:20px;
   background-color:aquamarine;
   border-radius: 10px;
   margin:20px auto;
   transition-property: all;
   transition-duration: 1s;
   transition-timing-function: linear;
   text-align: center;
   line-height:100px;
}

.truc.slide-left {
   transform: translate(-1000px,0);
}

.truc.slide-left.in-view {
   transform: translate(0,0);
}

.truc.slide-right {
   transform: translate(1000px,0);
}
.truc.slide-right.in-view {
   transform: translate(0,0);
</style>