Parallaxe - Jupiter

Pour cet exercice, vous devrez reconstituer un effet parallaxe dans l’espace de sorte que les éléments derrière la planète Jupiter se déplacement moins rapidement que celle-ci, mais que ceux devant se déplacent plus rapidement.

Aperçu du résultat 👇

Matériel

Pen de départ 

Médias 🖼️

bg
https://ex.smnarnold.com/perspective/jupiter/bg.svg
Arrière-plan
https://ex.smnarnold.com/perspective/jupiter/arriere-plan.svg
Jupiter
https://ex.smnarnold.com/perspective/jupiter/jupiter.svg
Avant-plan
https://ex.smnarnold.com/perspective/jupiter/avant-plan.svg

Requis

  1. Ajoutez l'image bg en arrière-plan à la page.

  2. Faites en sorte que l'élément .parallax est une hauteur équivalente à celle d'une page entière, qu'il accepte le défilement vertical uniquement ↕️ et qu'il est une perspective équivalente à 100px.

  3. Faites en sorte que chaque calque (layer) prenne toute la largeur de la page, est une hauteur équivalente à trois hauteurs de page (afin de forcer le défilement). Qu'ils se superposent un par-dessus l'autre et que leurs images d'arrière-plan soient centrées, affichées en entier (non rognées) et qu'elles ne se répètent pas.

  4. Attribuez les images d'arrière-plan: Arrière-plan, Jupiter et Avant-plan aux calques qui vous semblent les plus judicieux et ajustez leur distance sur l'axe des Z afin que certains éléments paraissent plus loin. N'oubliez pas d'ajuster leur dimension (scale) afin que malgré la distance les éléments gardent leur taille d'origine.

    Faites défiler votre page afin de voir l'effet de profondeur et de déterminer si des ajustements sont nécessaires.

  5. Afficher le titre "Jupiter" en blanc, majuscule, avec une taille de 60px et la police Georgia en plein centre de l'écran de sorte que ce titre reste immobile au défilement de la page.

Notes de cours 📚