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