26
JAN

Scrollorama rend la navigation plus fun

Publié le 26/01/12 à 09h53 par Skwi

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.

Scolling verticale

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

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web