Afficher du contenue au scroll

Par JMERISE, il y a 10 ans

Javascript

Bonjour / Bonsoir,

Je voudrais savoir comment faire pour afficher le contenue d'un site en scroll facilement comme sur ce site : http://jaybabani.com/caliber-html/ ?

Merci d'avance pour vos futur post :)

4 réponses

lucien-lefoll, il y a 10 ans

Hello,

Le framework Materialize propose une fonction JS scrollFire qui permet de faire ça de manière assez propre.

otakodes, il y a 10 ans

alors il faut vérifier que l’élément entre dans le viewport, tu as pleins de plugin en tapant "in viewport js / jquery" sur google

https://github.com/zeusdeux/isInViewport : celui ci est cool,

sinon, si tu veux savoir le coder de manière basique, le commentaire plus haut est presque bon, il manque une boucle sur les éléments pour savoir quel élément est dans le viewport et le scrollTop() sur l'élément qui ne donne absolument pas sa distance (Y / Top) mais son scroll interne. Il faut donc utiliser offset().top

scrollTop() ne sert que pour la window / viewport / fenêtre dans le cas présent

$(function () { var $window = $(window); var $elements = $('.elements-qui-apparaissent'); // en gros si l'anime se fait après être apparu au moins de 100 pixel du haut de l'écran var offset = 100; // on vérifie pour chaque élément $elements.each(function() { var $self = $(this); // on set une valeur sur l’élément pour dire si il est en animation ou pas $self.data('animating', false); /*lorsque l'utilisateur scroll*/ $window.scroll(function () { // un offest().top sur l’élément courant pour connaitre sa position // on vérifie si c'est supérieur ou égale car : un scroll rapide ne donnera jamais une suite mais des sauts de valeur donc // si l’élément est a 10px, le scroll peut très bien faire, 0,1,2,5,9,12 et ne jamais animer ton élément // on lui soustrait la hauteur du viewport (fenêtre) car sinon il fera l'animation quand il arrive en haut et non en venant du bas // au résultat on ajoute l'offset à partir du quel il fait l'anime // ici, il fera l'anime dés qu'on verra au moins 100 pixel de l'élément (optionnel) if ($window.scrollTop() >= ($self.offset().top - $window.height() + offest) && $self.data('animating') == false){ // on dit que il anime pour éviter au re scroll que il retente l'animation $self.data('animating', true); $self.animate({ /*ton animation d'entrée*/ }, function(){ // animation fini, on remet le animating a false, si on re scroll du coup quand l'animation est fini elle se re fera // si tu ne veut qu'un seul anime unique laisse à true $self.data('animating', false); }); } }); }); });
keilo, il y a 10 ans

Salut,

Tu peux egalement regarder du coté de wow.js qui te permet d'afficher des elements de ta page quand l'utilisateur arrive a leur niveau.
Facile a mettre en place et la doc est bien faite !

@+