Hey, mec! Tu veux du parallax ?!

Beeuuh, c'est quoi le parallax ?

Tais-toi, scrolle la page et regarde-ça, mec !

Ah, d'accord, le parallax, c'est le truc qui fait mal aux yeux
et qui donne envie de vomir...

Background

L'image de fond de chaque bloc avec classe "parallax" et data-bg="1" se déplace en fonction du scroll.
les images de background doivent évidemment être plus grandes que les conteneurs parallax, sinon "ça marche moins bien" (à lire avec la voix de Bourvil).
L'attribut "data-sens" détermine le sens de déplacement :
    data-sens="1" => de 0 à 100%.
    data-sens="-1" => de 100 à 0%
L'attribut "data-axe" détermine le mouvement :
    data-axe="horiz" => de gauche à droite.
    data-axe="vertic" => de haut en bas.
    data-axe="both" => les deux.
L'attribut "data-depth" applique un ratio au pourcentage :
    data-depth="1" => de 0 à 100%.
    data-depth="0.5" => de 0 à 50%.
    data-depth="2" => de 0 à 200%.
etssétéri, etssétéra
    <div class="parallax" data-bg="1" data-sens="1" data-axe="horiz">

Eléments contenu dans le bloc "parallax"

Chaque élément avec classe "parallax-item" se déplace en fonction du scroll.
L'attribut "data-pox" détermine les valeurs horizontales de départ et de fin :
    data-pox="100#300" => de 100 à 300px.
L'attribut "data-poy" détermine les valeurs verticales de départ et de fin :
    data-poy="100#300" => de 100 à 300px.
L'attribut "data-alpha" détermine les valeurs de transparence de départ et de fin :
    data-alpha="20#80" => de 20 à 80%.
L'attribut "data-depth" applique un ratio au pourcentage :
    data-depth="1" => de 0 à 100%.
    data-depth="0.5" => de 0 à 50%.
    data-depth="2" => de 0 à 200%.
Pas très utile vu qu'on détermine précisément les valeurs pour chaque élément mais bon, on sait jamais...

Les attributs data-width et data-height déterminent largeur et hauteur :
    data-width="100#300" => de 100 à 300px.
    data-height="100#300" => de 100 à 300px.
<div class="parallax-item" data-pox="100#300" data-poy="-10#600" data-alpha="80#20" data-depth="0.5" data-width="20#500" data-height="20#500">

CSS3

Avec une petit surcouche de CSS3, en appliquant une classe spécifique au éléments à animer, le mouvement continue un peu après le scroll et on peut y appliquer une fonction de ease : Dans cet exemple :
.bouge{
    transition: all 0.6s ease-out;
}
Le mouvement continue 0.6s après le scroll.
La fonction est un ease-out, c'est à dire qu'il ralentit sur la fin.

.bouge2{
    transition: all 0.8s ease-out;
}
Le mouvement continue 0.8s après le scroll.
La fonction est un ease-out, c'est à dire qu'il ralentit sur la fin.

.bouge3{
    transition: all 0.8s cubic-bezier(.5,1.9,.5,1);
}
Le mouvement continue 0.6s après le scroll.
La fonction est une courbe de Bezier spécifique qui applique un léger rebond sur la fin.
Pour trouver sa courbe : cubic-bezier.com.

<div class="parallax bouge" data-bg="1" data-sens="1" data-axe="horiz">
<div class="parallax-item bouge2" data-pox="100#300" data-poy="-10#600" data-alpha="80#20">

Mise en place

Une structure HTML qui va bien, c'est à dire au moins un bloc avec la classe "parallax" contenant des blocs avec la classe "parallax-item".
Un appel vers jQuery : <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
Un appel vers le petchit plugin jQuery : <script type="text/javascript" src="js/jquery.parallax.js"></script>
Suivis de la déclaration :
<script type="text/javascript">
  $(document).ready(function () {
    $('.parallax').parallax();
  });
</script>

Merci qui ?

Merci moi.

Bon, c'est encore perfectible (par exemple en ajoutant aussi un principe de zoom - c'est fait, bon c'est pas vraiment un zoom mais ça peut tès bien le remplacer ! - mais aussi en optimisant le code, voire en le transformant en plugin jQuery - c'est fait aussi) mais c'est déjà pas si mal.

jQuery, le petit fichier *.js du plugin jQuery
Choppe les JS, clique-droit "view-source" pour voir à quoi ressemble le code de cette petite page et fais-toi plaiz.
Ou pas.