La technique du parallaxe a été popularisée par le jeu d’arcade Moon Patrol sorti en 1982. Il s’agit en fait de l’adaptation d’une technique très utilisée pour les dessins animés, qui consiste à faire défiler des celluloïds à des vitesses différentes. Ainsi, un décor utilisant cette technique se voit divisé en plusieurs calques. Le calque le plus éloigné de l’observateur (l’arrière-plan) défile le moins vite. Plus on remonte vers l’avant-plan et plus la vitesse de défilement des calques augmente. Les différents plans jouent également sur la perspective atmosphérique pour accentuer l’impression de profondeur. Les premiers plans voient ainsi leur couleurs davantage désaturées, et les plus au fond ont alors leur couleurs plus désaturées et bleutées en plein jour, ou assombries en pleine nuit.
simuler un effet de parallaxe
- En mode Design, placer une frame nommée “1” et dessiner header groupé.
- Composer les éléments de la homepage (titre, bouton, visuel).
- Dupliquer la frame “1” qui devient la frame “2”, déplacer sur la droite pour voir les deux frames.
- Déplacer le titre et le CTA vers le haut et définir une opacité à 0 % pour ces deux éléments.
- Remonter le groupe des images vers le haut pour l’animation à venir.
- Placer en dessous de la frame “2”, une nouvelle frame desktop (1440 x 1024px) et intégrer les éléments à voir (par exemple un texte). Nommer cette frame “2e section”.
- Placer cette nouvelle frame “2e section” sur la frame “2” (glisser/déposer).
- Attribuer un calque de flou (layer blur) sur les trois images pour donner une sensation de profondeur à votre effet.
- Dupliquer la frame “2” et placer sur la droite, elle devient la frame “3”.
- Sur cette frame “3”, ajuster la taille du bloc qui vient couvrir la précédente frame (frame “2e section”), réduire la taille de 3 images et augmenter le flou. Il s’agit d’affiner l’effet de parallaxe avant l’étape suivante.
- Copier la frame “2e section” et la placer sous la frame “1”.
- Dupliquer la frame “3” pour devenir la frame “4” et placer tout le contenu visible. Disposer le header en premier plan puis changer la couleur des textes noirs en blanc. Veiller à ne pas modifier les noms des calques sinon Figma ne pourra pas assurer l’animation entre les objets.
- Placer une image et dupliquer la frame “4” en frame “5”. Sur la frame “4”, déplacer l’image en dehors du support et réduire la taille et l’opacité. Sur la frame “5”, déplacer le titre et mettre une opacité à 0%, agrandir l’image et appliquer une opacité à 100 %.
- Dupliquer la frame “5” en frame “6”, réduire la taille de l’image et choisir une opacité à 0%.
- Passer en mode Prototype, puis définir le flow (Flow starting point) à partir de la frame “1”.
- Appliquer entre chaque frame les propriétés suivantes :
- Trigger = On drag
- Action = Navigate to
- Destination = choisir le numéro de la frame à pointer
- Animation = smart animate
- Curve = Slow
- Duration = 600ms
- Pour rejouer l’animation dans le sens inverse, appliquer entre chaque frame les propriétés suivantes :
- Trigger = On drag
- Action = Navigate to
- Destination = choisir le numéro de la frame précédente
- Animation = Move in
- Direction = vers le bas
- Curve = Slow
- Duration = 600ms
tutos à suivre…
téléchargez le fichier de la démo