L’effet parallaxe avec jParallax et jQuery

24 septembre 2010

jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. Le défilement parallaxe (ou scrolling différentiel) est une technique qui vise à donner une impression de profondeur à travers des portions de décors défilant à vitesse légèrement variable.

L’effet parallaxe

Pour simuler cet effet de parallaxe, le plugin va superposer plusieurs blocs HTML, ici des « li » qui contiennent des images, et les faire bouger à des vitesses différentes. Ces éléments HTML doivent être de taille différente : en effet, l’élément du premier plan devra se déplacer plus rapidement pour sembler être plus prêt, et par conséquent se déplacer sur une plus grande distance que l’élement du dernier plan. Il faut penser à mettre la « div » englobante avec la propriété CSS overflow:hidden pour cacher tout ce qui dépasse.

Exemple de base

La structure HTML est définit de la manière suivante. On utilise une liste à puces mais on peut également utiliser une simple « div ». L’essentiel étant de lui passer un « id » pour l’identifier. Notez que les images doivent être au format PNG pour jouer sur la transparence.

<ul id="parallax">
        <li><img src="image1.png" alt=""/></li>
        <li><img src="image2.png" alt=""/></li>
        <li><img src="image3.png" alt=""/></li>
        <li><img src="image4.png" alt=""/></li>
</ul>

Pour la feuille de style, il faut impérativement mettre la « div » englobante en position:relative, car jParallax passe ses enfants en position:absolute. Il faut également lui définir des dimensions fixes.

#parallax {
        position: relative;
        overflow: hidden;
        width: 600px;
        height: 200px;
}

Côté jQuery, on sélectionne simplement la div en question et on lui applique la fonction jparallax().

$(document).ready(function () {  
        $("#parallax").jparallax();
});  

Ici, jParallax est utilisé par défaut, sans paramètres. Libre à vous de configurer le plugin pour obtenir l’effet que vous recherchez avec la vingtaine d’options qui existe : le comportement de la souris, le comportement des éléments HTML, et quelques paramètres d’animation sont disponibles sur le site officiel pour vous aider à personnaliser votre parallaxe.

Requis : jQuery
Démonstration : http://webdev.stephband.info/parallax_demos.html
Licence : libre

Commentaires

  • cornelius

    pas mal se petit parallax