jQuery – InView : déclencher des actions en fonction des éléments visibles à l’écran.

Le plugin jQuery InView permet de déclencher des actions en JavaScript en fonction de l’apparition à l’écran d’un élément ou d’une partie de cet élément. Il est donc facile d’imaginer toutes sortes de succession d’animations ou d’actions asynchrones grâce à ce plugin. Voyons comment l’utiliser.

J’entends déjà des personnes crier au scandale à cause de la dépendance à jQuery. Il existe un alternative datant de 2016. In-View.js.

Où le trouver

Cela se passe sur GitHub, il est donc possible de télécharger le script, mais également de l’améliorer et partager vos suggestions.
Télécharger InView

Comment l’utiliser ?

Commencez simplement par appeler votre bibliothèque jQuery, puis chargez le plugin InView :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.inview.min.js"></script>

Une fois le plugin chargé, il est possible de « binder », autrement dit de lier un élément à l’évènement « inview » pour effectuer des actions.

$('.element').bind('inview',function(event, isInView, visiblePartX, visiblePartY){
  			// le code ici (ça va venir)
});

La fonction accepte plusieurs variables qui vont nous permettre d’exécuter les choses au bon moment.
Le deuxième paramètre (et variable) isInView retourne true ou false en fonction de si l’élément est visible ou non (peu importe quelle partie est visible). visiblePartX, la troisième variable détecte quelle partie latérale de l’élément est visible (sur l’axe X donc), les valeurs retournées possibles sont left, right et both.
La dernière est visiblePartY et détecte quelle partie en hauteur de l’élément est visible (sur l’axe Y donc), les valeurs retournées possibles sont top, bottom et both.

Nous allons concevoir une bête démonstration pour comprendre les bases.

Définir les parties visibles d’un élément

Nous allons essayer d’afficher un contenu textuel qui nous dit quelle partie est visible de deux éléments d’une page HTML.
Commencez par copier/coller ce code HTML (rien de compliqué).

<div id="first-part">
   <h2>This is the first part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
   <span class="info"></span>
</div>
<div id="second-part">
   <h2>This is the second part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> 
<div id="third-part"> 
   <h2>This is the third part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="last-part"> 
   <h2>This is the last part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <span class="info"></span>
</div>

N’hésitez pas à mettre plus de contenu pour prendre un peu de hauteur dans votre document.

Je vous fourni également ce CSS pour que l’on ait à peu près le même document de test :

html {
	width: 750px;
	margin: 0 auto;
	padding: 2em 0;
	font-size: 62.5%;
	line-height: 1.55em;
	background: #f2f2f2;
	color: #555;
	font-family: Helvetica, Arial, Verdana, sans-serif;
}
body {
	font-size: 1.4em;
	line-height: 1.55em;
}
div {
	margin: 4em 0;
	position:relative;
}
.info {
	position: absolute;
	right: 0;
	top:0;
	padding: 15px;
	border-radius: 8px;
	background: #ddd;
	border: 1px solid #fff;
	color: #666;
	font-weight:bold;
	font-size: 16px;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}

L’élément .info va nous servir à afficher du texte.

Reprenons sur du JS, ce JavaScript est à placer après l’appel à la bibliothèque jQuery et son plugin, bien entendu 😉
Nous allons analyser avec notre code JS quelles sont les zones visibles sur notre première division et sur la dernière division de notre document.

$(document).ready(function(){
   $('.element').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
 
      if (isInView) {
         // l'élément est visible
 
         if (visiblePartY == 'top') {
            // Le haut de l'élément est visible
            $(this).find('.info').text('Only top is visible');
         } 
 
         else if (visiblePartY == 'bottom') {
            // Le bas de l'élément est visible
            $(this).find('.info').text('Only bottom is visible');
         } 
 
         else {
            // Les deux parties sont visibles (tout l'élément)
            $(this).find('.info').text('Whole part is visible');
         }
      } 
 
      else {
         // l'élément n'est pas visible
         // on fait quoi maintenant ?
      }
   });
});

Ici le code est vraiment basique, nous ne faisons qu’ajouter du texte dans un élément span porteur de la classe info en fonction de la zone visible d’un élément.
Voici ce que vous devriez obtenir :
Voir la démonstration
Amusez-vous à faire défiler doucement la page pour voir ce qui s’affiche dans les blocs d’informations en haut et bas de la page.

Avec les quelques commentaires du code jQuery vous devriez maintenant avoir compris le fonctionnement du plugin. À vous d’envisager une suite ! :p (Lazy Load, chargement Ajax, infinite scroll, etc.)
Des exemples plus complexes sont donnés par l’auteur de ce plugin sur GitHub.
Plugin sur GitHub

Amusez-vous bien !