Les pages animées au scroll vertical, deux plugins jQuery
Est-ce que vous connaissez ces fameuses pages avec animations à chaque scroll vers le bas ? Ces types de pages sont relativement nouvelles dans la mesure où ce sont les nouvelles propriétés CSS3 qui permettent de provoquer les animations dans votre navigateur (à moindre frais).
La génèse
Une des première dans le genre (à ma connaissance) fut bien évidemment « Ben the bodyguard », dont voici la vidéo :
On se servira de ce genre de présentation pour mettre en avant un contenu scénarisé avec des étapes bien déterminées.
Le principe
Techniquement, comment cela marche-t-il ? On met en place une grande page, avec un décor statique (fond) et des éléments animés. On place dans cette page des ancres, comme autant d’éléments de votre scénario : étape 1, étape 2, étape 3… Puis à chaque ancre, on associe une animation (ou plusieurs animations).
Donc pendant que vous descendez dans la page, votre navigateur détecte des bornes (ancres), à chaque borne une fonction permet d’activer un événement. Visitez la page de Google green – Better web. Better for the environment..
Les plugins
Je vous propose de regarder deux plugins jQuery
1. jQuery waypoints :
Un plugin qui permet de détecter l’activation d’ancres et de pouvoir lancer un événément JavaScript de son choix. Peut-être utile pour du scroll infini, la détection de bas de page…
jQuery Waypoints
2. jQuery scrollorama :
Un peu plus fin, il pointe directement un élément et permet d’appliquer un événement d’animation sur cet élément. Il semble plus destiné à des effets visuels.
jQuery scrollorama
Articles similaires :
- jQuery : 5 nouveaux plugins de novembre
- jQuery Accessible RIA : fonctionnalités jQuery accessibles
- Galerie d’images avec bxGallery sous jQuery
- ColorBox, plugin lightbox pour jquery
- jQuery : plugin ARIA