jParallax pour donner un effet parallaxe via jQuery

28/11/2008
WebDev et Design Allez aux commentaires

jParallax est un plugin jQuery qui va vous permettre de mettre en place facilement un effet de parallaxe sur un groupe d'images ! Pour faire court, la parallaxe est l'incidence du changement de position de l'observateur sur l'observation d'un objet (cf: wikipedia). Un peu comme lorsque vous êtes en voiture ou en train et que vous regardez par la fenêtre latérale, les différent niveaux du paysage ne défile pas à la même vitesse. Le plan le plus proche est rapide et plus on s'éloigne, plus l'effet de vitesse est moindre.

Comme d'habitude, filez voir la démonstration pour bien comprendre l'utilisation du plugin: Démonstration

Si il est bien utilisé, cet effet peut s'avérer redoutable, je vous invite a jeter un coup d'œil sur les header de ces sites (survolez le) : Site 1 Site 2 Site 3

Et allez aussi jetez un oeil par ici pour voir une utilisation extrême de l'effet parallaxe !

Utilisation

Il vous faudra construire une liste d'image avec un conteneur ayant une id "parallax"

<ul id="parallax">
    <li><img src="images0.png" alt=""/></li>
    <li><img src="images1.png" alt=""/></li>
    <li>...</li>
 </ul>

Alors il faut savoir que c'est très souple, vous pouvez par exemple remplacer la liste par des div ou carrément juste mettre une série d'images sans autres balises ! La seule condition c'est qu'il faut que l'ensemble soit englobé dans un élément (ul, div, ...) avec id="parallax"

Ensuite vous intégrez jQuery (si ce n'est déjà fait), vous uploadez le plugin et vous ajoutez le code d'initialisation.

Code à placer entre les balises HTML <head> et </head>

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<style type="text/css" media="screen">
       #parallax{position: relative; overflow: hidden; width: Npx; height: Npx;}
</style>
<script type="text/javascript">
$(document).ready(function () {  
       $('#parallax').jparallax();
});  
</script>

Voilà, il ne faut pas oublier de donner des dimensions (Npx) a votre élément #parallax dans le bout de CSS ci-dessus ! De nombreuses options sont disponible (vitesse, durée, positionnement, ...), à voir sur le site de l'auteur.

Et voici les choses à ne pas oublier:

  • Utilisez des images au format PNG avec transparence (logique puisque superposées)
  • Utilisez un hack PNG pour la transparence sous IE6-
  • Une image en arrière plan doit forcement être plus grande (surface) que celle qui se trouve devant elle ! Logique puisqu'elle de déplacera sur une plus grande distance. Donc prévoyez des image plus grande que votre conteneur !

Conclusions

Voilà un effet qui va beaucoup plaire aux graphistes, surtout ceux qui font une allergie à flash 😉 Par contre faites attention à l'abus car ça fait grimper sensiblement la consommation de votre processeur.

-----

Articles relatifs

  • stefpopo

    Dis donc, il est génial cet effet … ça me donne plein d’idées de réalisations ça ! Merci pour l’info.

  • x@v

    Ont peux plus télécharger le plug in ?

  • Sapher

    c’est super ce truc, bordel j’adore jquery et tout ce qui vas avec.
    Imaginer le temps que sa aurait pris si on avait pas c’est truc déjà fait.

  • Bonjour,

    Ce plugin est génial, mais chez moi, il ne fonctionne que verticalement, alors que j’ai bien mis xparallax: true, yparallax: true dans les options.
    Que faire?

  • Pat

    Salut.

    J’ai le meme probleme, ca ne fonctionne que verticalement chez moi…
    dommage c top !

  • lostinlamancha

    moi j’ai beau chercher d’où vient le probleme, les images n’apparaissent pas. je ne trouve pas pourquoi. (les chemins des images et des js c’est bon)

  • pooley

    « Une image en arrière plan doit forcement être plus grande (surface) que celle qui se trouve devant elle ! Logique puisqu’elle de déplacera sur une plus grande distance. Donc prévoyez des image plus grande que votre conteneur ! »

    ça ne serait pas plutôt l’inverse ?

    => Une image AU 1ER PLAN doit forcement être plus grande (surface) que celle qui se trouve DERRIERE elle …

  • j’adore cet effet. Mais effectivement, ça ne marche qu’en vertical!?