ScrollMagic – Plugin jQuery – Le scroll magique interactif

scrollmagicVous voyez certainement de plus en plus de sites web avec des effets sur le défilement de la page (scrolling), ou plus vous descendez avec la roulette de votre souris et plus les animations sur le site se font ressentir. Et bien entendu, vous avez pleins d’idées d’animations et vous souhaitez pouvoir y intégrer de manière efficace sur votre page web.

Pour se faire, il vous sera possible d’utiliser un plugin jQuery nommé ScrollMagic.

Les particularités de ce plugin jQuery :

  • Animation basée sur la position du scroll.
  • Pointe le début d’une animation sur un élément spécifique via la position du scroll
  • Active des classes css d’élément basées sur la position du scroll
  • Des effets parallaxes poussé
  • Possibilité de créer une page au scrolling infini via ajax
  • Possibilité d’ajouter des callbacks sur une position spécifique du scroll

Le plugin ScrollMagic a été développé avec cet esprit :

  • performances optimisées
  • léger (6KB gzipped)
  • flexible et extensible
  • compatible mobile
  • gestion d’évènements
  • supporte le responsive design
  • développement orienté objet
  • documentation détaillée
  • multiples examples
  • etc…

Il vous est possible de télécharger ce plugin jQuery ici : https://github.com/janpaepke/ScrollMagic/zipball/master
Et de visualiser des exemples plus ou moins poussés avec des codes sources en plus ici : http://janpaepke.github.io/ScrollMagic/examples/index.html
Vous avez notamment la documentation ici : http://janpaepke.github.io/ScrollMagic/docs/index.html

Exemple d’utilisation :
– Le code d’appel du plugin :

<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>

ScrollMagic est basé sur un enchaînement de scènes que vous pouvez créer ainsi :

// init controller
var controller = new ScrollMagic.Controller();
// create a scene
new ScrollMagic.Scene({
duration: 100, // la scène va durer sur une distance de défilement de 100px
offset: 50 // cette scène commence après avoir fait défiler 50px
})
.setPin("#my-sticky-element") // accroche l'élément pour la durée de la scène
.addTo(controller); // attribue la scène au contrôleur

Toutes les infos sur la page du plugin ScrollMagic ici : http://janpaepke.github.io/ScrollMagic/

Bon développement à tous, et n’hésitez pas à partager vos créations de Scroll 🙂

Author: Franck Pertegas

Share This Post On

1 Comment

Submit a Comment

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