The Parallax Effect : CSS is beautiful !

Paul Annett a imaginé une façon simple et élégante de créer un effet de parallaxes en utilisant uniquement les CSS. Brillant !

Où Paul Annett recréé le parallax scrolling de Sonic (le jeu Sega, si, si) en CSS.

Silverback est un outil de test d’ergonomie des sites internet créé par Clearleft, une web agency de Brighton. Vendu moins de $50, Silverback ne nécessite pas d’autre matériel qu’un Mac tournant sous Tiger ou Leopard. C’est déjà bien. Ce qui est encore plus beau, c’est le site Silverback.

Page d'accueil du site Silverback

On ne s’en rend compte qu’en redimensionnant la fenêtre du navigateur, mais l’image de fond n’est pas fixe. Ainsi, les lianes entourant le gorille, logo de Silverback, se déplacent de façon différentes pour simuler la profondeur.

Pour créer cet effet, Paul Annett a utilisé quatre calques. Il y a à l’écran trois calques de lianes et un calque pour le contenu principal du site.

La décomposition en calques

Les calques de lianes sont positionnés sur l’écran en utilisant des pourcentages, tous différents. C’est simplement ce positionnement qui va donner aux trois calques des comportements différents quand on redimensionne la fenêtre.

Simple (il fallait quand même y penser), mais visuellement impressionnant.

Pour en savoir plus, je vous invite à lire le tutoriel de Paul Annett sur Carsonified.

Leave a Reply

Your email address will not be published. Required fields are marked *