Parallax web

Le parallaxe est un phénomène d’optique où la position ou la direction d’un objet semble varier lorsqu’on l’observe depuis des positions différentes. C’est un effet très utilisé en astronomie pour mesurer les distances, mais aussi en photographie et dans les jeux vidéo pour donner une impression de profondeur.
 
 
Pour mon projet de fin d’études, je me suis intéressé de plus près au parallaxe, notamment à la manière de l’intégrer dans une page web et de paramétrer l’intensité du mouvement appliqué sur les positions x et y (z représentant la profondeur).
 

 

Pour mon expérience personnelle, j’ai utilisé des images du jeu “Child of Light” (développé par Ubisoft Montreal / Ubisoft), reprenant l’arrière-plan du site officiel du jeu. J’ai ensuite utilisé le JavaScript “parallax.js” (disponible à cette adresse : http://matthew.wagerfield.com/parallax/) afin de l’appliquer en arrière-plan sur une page HTML. Le résultat est d’autant plus surprenant.

Ceci m’a également été très utile pour l’application que j’ai dû développer avec mon équipe pour mon projet de fin d’études. Dans ce cas de figure, j’ai utilisé le parallaxe pour réaliser une carte interactive faite par mes soins.

See the Pen
Parallax.js – Map by Guillaume Briand (@C2P0)
on CodePen.

En bonus, quelques tests avec mon nom et mon prénom, le parallaxe n’a aucune limite !

See the Pen
Parallax.js – Exploited GB by Guillaume Briand (@C2P0)
on CodePen.