Arts numériques

Scroll dans jquery

Jquery possède une fonction que l’on peut appeler automatiquement lors du scroll.

$(window).scroll(function() {
// ici, faire quelque chose
}

Entre les accolades, on placera une série d’instructions. Si on a besoin de connaitre l’état du scroll, on la récupère avec un code comme celui-ci :

var y=$(window).scrollTop();

Fabriquer une animation en boucle avec le scroll

Il est possible de faire une animation en boucle qui s’active en fonction du scroll. Pour ça on utilisera l’opérateur % ou modulo, qui donne le reste d’une division.

Dans le script suivant, on déclenche un changement tous les 10 pixels, et on affiche un élément dans un diaporama. nb_images est le nombre d’éléments dans ce diaporama.

var leframe=Math.ceil(y/10) % nb_images;
$("#diaporama li").hide();
$("#diaporama li").eq(leframe).show();

Faire apparaitre ou disparaitre un élément lors du scroll

On peut aussi activer un élément àun certain point du scroll.

$(window).scroll(function() {
                var y=$(window).scrollTop();
                if(y > 300 && y < 800){
                    $("#truc").show();
                } else {
                    $("#truc").hide();
                }
}

Scroll infini

Pour produire un scroll infini, il suffit de comparer le chiffre du scroll avec la taille de la page. Si on est presque àla fin de la page, on injecte de nouveau éléments. Le tour est joué.

var portion="<div class='bloc rouge'></div><div class='bloc bleu'></div>";
            $(window).scroll(function() {
                var y=$(window).scrollTop();
                var wh=$(window).height();
                var dh=$(document).height();
                if(y+wh > dh -100){ // si on est à 100 pixels de la fin de la page
                    $("body").append(portion);
                }
            });