Designers web : animez vos contenus avec scrollReveal.js

L’article d’aujourd’hui présente un petit plugin Javascript permettant facilement à un designer ou à un intégrateur web d’ajouter de l’animation à ses contenus : scrollReveal.js. Les animations apparaîtront au fur et à mesure que l’utilisateur scroll vers le bas et rendront plus dynamiques des pages qui paraissaient un peu terne.

Chaque fois qu’un élément HTML entre dans la fenêtre, il est animé par scrollReveal, dynamisant de manière très fluide l’ensemble de la page.

Donc, attention, il ne s’agit pas d’interactivité, l’utilisateur ne pourra pas déclencher les animations par exemple, mais bien d’animation et d’attrait visuel. On peut avoir un petit aperçu des possibilités d’animations sur le site du plugin. Je l’ai également utilisé pour un de mes clients à Lyon, lors de l’intégration du design : voir ici. Les animations s’accordant très bien sur ce site « one page » basé sur WordPress. C’est également le genre d’animation qui se combinerait très bien avec un design web parallax.

scroll-reveal

L’installation de ce plugin ne requiert même pas jQuery et est très simple. Il suffit de télécharger le fichier Javascript minifié (3Ko seulement) et le joindre à la page. scrollReveal.js pourra être ajouté au thème de n’importe CMS (WordPress, Prestashop, Joomla…), à une page PHP ou à une simple page HTML. Ensuite, il faudra définir quels blocs on veut voir s’animer, puis, définir les animations et leurs paramètres : types d’animations, délai, durée de l’animation… Les possibilités sont assez étendu.

Si vous êtes designer web ou intégrateur web et que vous voulez en savoir plus sur l’installation et le paramétrage, visitez la page GitHub du plugin.

Que votre site soit dynamique ou un simple site vitrine, cette petite librairie Javascript donnera un plus visuel certain à vos pages alors n’hésitez pas, les possibilités sont vastes, l’installation est simple et les fichiers sont légers. Vous pouvez aussi voir AniJS, qui peut éventuellement être une alternative, mais je ne l’ai pas testé.

 

 

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.