Principe de scrolling parallax

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 :

Au 1er plan Au 2eme plan Au 3eme plan Au 4eme plan

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.

OFFERT

OFFERT

Comment créer votre

1er jeu vidéo d'arcade

rapidement et facilement ?

MERCI. Vous allez recevoir le lien de téléchargement dans quelques minutes.