Parallaxe

Une parallaxe consiste à créer un effet de profondeur en déplaçant des éléments à des vitesses différentes. Ainsi, les éléments se déplaçant plus rapidement sont perçus comme étant plus près, alors que ceux se déplaçant plus lentement sont perçus comme étant plus loin.

Walt Disney fut l'un des pionniers à ce niveau grâce à son invention le MultiPlane. Cette technologie permet de déplacer à des vitesses différentes plusieurs éléments d'un dessin animé recréant ainsi l'aspect de profondeur perçu dans la vie réelle.

Le même principe est applicable en CSS.

Exemples de sites

• The Story of the Goonies (axe des Z)

• CANN (axe des Y)

• Longshot (axe des X)

• Firewatch

• Marcin Dmoch

• Etc.

Perspective & axe des Z

Pour créer un effet similaire en CSS, il est nécessaire de configurer une perspective. Cette perspective est l'équivalent de spécifier à quelle distance en pixels se trouve le point de vue de l'utilisateur de ce qui est affiché.

Par exemple:

.parallax {
  perspective: 100px;
}

Ce code indique que le point de vue de l'utilisateur se trouve à une distance équivalente à 100px de ce qui est affiché dans .parallax.

Une fois cette perspective configurée, le positionnement des éléments sur l'axe des Z peut être utilisé afin de rapprocher ou d'éloigner un élément de l'utilisateur.

.back {
  transform: translateZ(-100px);
}

.front {
  transform: translateZ(0);
}

Par exemple:

CodePen | smnarnold 👀

Correction de la profondeur

Les éléments plus éloignés paraissent logiquement plus petits. Cependant, cette particularité est nuisible dans le cadre d'une parallaxe. Pour y remédier, il est nécessaire d'agrandir les éléments proportionnellement à l'aide d'un scale() afin de leur redonner leur taille d'origine.

Pour calculer le scale() adéquat, il faut utiliser la formule suivante:

translateZ * -1 / perspective + 1

Par exemple, pour l'élément .back avec un translateZ de -100px:

-100 * -1 / 100 + 1; // 2

.back {
  transform: translateZ(-100px) scale(2);
}

Ainsi l'élément retrouvera sa taille de base.

Vitesse de défilement

Plus un élément est loin du point de départ sur l'axe des Z (0), plus celui-ci se déplacera lentement.