Un scrolling parallax, c’est quoi ?
Dans un précédent article, je fais une démonstration de scrolling parallax réalisé en html5 et javascript.
Prérequis
Avoir lu l’article consacré au scrolling Coder un scrolling horizontal en javascript.
C’est quoi ?
Le scrolling parallax est un effet qui est beaucoup utilisé dans les jeux d’arcade des années 80/90. Il consiste à donner un effet de profondeur grâce à la superposition de plusieurs plans. Ils font partie de l’arrière plan et défilent (ou scrollent) à des vitesses différentes.
Cet effet consiste à simuler un mouvement identique à celui que vous constatez à bord d’un véhicule en regardant par les fenêtres latérales. Les éléments les plus près de vous défilent plus rapidement que ceux en arrière plan.
Pour mieux comprendre, voici une illustration en vidéo.
Format des images à scroller et le principe du scrolling
La superposition des images pose le problème de la transparence. Si vous ne choisissez pas le format d’image approprié, une image affichée sur une autre risque de la recouvrir complètement. Du coup, impossible de voir le plan du dessous et donc pas d’effet parallax possible.
Il faut donc choisir un format d’image qui gère la transparence, c’est à dire le format png.
Les images et le scrolling parallax expliqué
Créons un scrolling parallax avec 4 plans superposés avec :
La partie blanche de chaque image est transparente. Si on superpose le plan 1 sur le plan 4, le fond bleu avec la lune apparaît, comme ceci.
Si entre ces deux plans, on insère le plan 3, on obtient ceci.
Nos 4 plans se superposent. Il suffit de les faire défiler à 4 vitesses différentes. Le premier plan défile plus rapidement que le deuxième et ainsi de suite. Ce qui donne à l’affichage.
Scrolling horizontal avec déplacement de la gauche vers la droite
Maintenant vous savez quelle est la technique du scrolling parallax html5. Passons à sa mise en œuvre. C’est l’objet d’un autre article et c’est ici.
