Scrollorama rend la navigation plus fun

Lorsque l'on réalise le design d'une page à navigation verticale, il faut faire attention à ce que le visiteur ne s'ennuie pas à force de trop faire défiler la page. Scrollorama est justement un plugin jQuery qui va utiliser le CSS3 pour rendre le scrolling bien plus fun.

Transition, zoom, parallax ... sont autant d'effet que vous allez pouvoir ajouter aux textes et images de votre page en seulement quelques lignes de code.

Utilisation

On commence par initialiser le pluggin avec la classe des éléments qui seront affectés par le scroll.

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});

On définit ensuite l'animation qui affectera chaque élément individuellement.

scrollorama.animate('#example1',{
    duration:400, property:'opacity' 
});

Et voilà le travail ! Scrollorama propose éventuellement de récupérer un événement lorsqu'on scroll jusqu'à un élément à animer.

scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
});

Je vous laisse voir la démo sur le site officiel pour vous rendre compte de ce que cela peut donner.

Site officiel