Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes.
Il est possible de recréer cet effet dans une page web assez facilement avec CSS et jQuery.
Observations
Le résultat n’est pas toujours aussi fluide qu’on pourrait le souhaiter. Le défilement risque de saccader sur les machines les moins puissantes.
La fluidité de l’animation dépend également de la taille de la fenêtre du navigateur.
Il est sûrement possible d’améliorer le code de cet exemple avec des background multiples ou une optimisation du code Javascript.
Les explications de code sont dans la démo.
Il existe un plugin pour le parallax: jParallax (quelle imagination pour le nom d’ailleur) qui permet de creer assez facilement cet effet, par contre je ne sais pas si il est bien optimisé, a vous de tester.
http://webdev.stephband.info/parallax.html et pour les anglophobes: http://www.webinventif.fr/jparallax-pour-donner-un-effet-parallaxe-via-jquery/
Répondre
Trop bien, il faut en mettre partout!
Répondre
[...] Parallax – Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur. Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes. Cf. la démo de Parallax proposée par Australopitech. [...]
[...] Parallax — Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur. [...]