Scrollorama : créer des animations pendant le scrolling

scrollorama

Vous aimez les effets surprenants sur certain sites web ? Vous aimez quand les interactions et les animations dépasse ce que vous pensiez impossible ? Alors Scrollorama, c’est le plugin jQuery à connaître absolument !

 

Qu’est-ce que ça permet ?

Tout simplement de déclencher des animations lors du défilement de la page avec la molette de la souris. C’est-à-dire que lorsque l’internaute fait défiler sa page jusqu’à un certain niveau, alors une animation se déclenche.

 

Animations disponibles :

  • fondus-enchaînés transparents (fade-in),
  • effets de zoom à l’échelle,
  • déplacements sur les côtés et sur l’axe vertical,
  • effets de rotation (en CSS3),
  • possibilité d’épingler un élément à un certain niveau de la page, alors que la page continue de défiler au rythme de la molette de souris,
  • possibilité de jouer sur l’écartement des lettres.

Et bien entendu, toutes ces animations peuvent être réalisées en même temps !

 

Une configuration simple, mais attention…

Même si la configuration des animation peut prendre un certain temps (en fonction de leur complexité), le plugin est franchement  très simple à configurer.

Par contre, après utilisation, nous avons noté que le plugin peut parfois présenter quelques bugs selon que la taille de l’écran est trop importante. En effet, chaque bloc d’animation sur la page est défini par une classe CSS (.scrollblock par exemple). Si le bloc en cours d’animation n’a pas atteint  le haut de la fenêtre, alors le prochain bloc d’animation ne peut pas prendre le relai et s’animer. Mais cela n’arrive que lorsque la fenêtre du navigateur est trop grande en hauteur et qu’il n’y a pas assez d’espace entre les blocs d’animation.

Du coup, un simple petit script en jQuery pour régler des marges entre les blocs d’animation pourra faire l’affaire…

 

Conclusion

A tester absolument sur le site de scrollorama !

Sinon, patientez encore quelques jours, et Ideo Webdesign vous présentera sa prochaine création : le site d’un client de l’agence sur lequel nous avons travaillé qui est animé avec scrollorama !

 

[EDIT] 14/02/2014 :

Nous venons de mettre en ligne aujourd’hui le site de Florence Fredet qui intègre le plugin Scrollorama sur la page CV. A voir ici : www.florencefredet.fr/cv

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>