Réaliser un effet Parallaxe

Le défilement parallaxe était une tendance majeure du web design il y a quelques années et il est toujours très utile pour apporter du dynamisme à vos présentations, landing pages, jeux ou applications mobiles. C'est une technique où les images d'arrière-plan se déplacent plus lentement que les images de premier plan.

Dans cette vidéo, vous apprendrez comment :

Durée : 6:28 minutes

⚡️ TEMPLATE DISPONIBLE : Défilement horizontal Parallaxe
Ajoutez ce template à votre compte en quelques clics. Modifiez-le et personnalisez-le librement.

[TRANSCRIPT]

Bonjour,
L'effet Parallaxe était une tendance majeure du web design il y a quelques années et il est toujours très utile pour apporter du dynamisme à vos présentations, landing pages, jeux ou applications mobiles. C'est une technique dans laquelle les images d'arrière-plan bougent plus lentement que les images de premier plan
Dans cette vidéo, nous allons découvrir comment créer une animation Parallaxe en quelques clics et sans aucune ligne de code.
Pour créer un effet Parallaxe dans PandaSuite, vous devez synchroniser ensemble au moins 2 composants zone de défilement. Un pour les images de fond et un pour le premier plan.
Vous pouvez créer un défilement qui est horizontal ou vertical.
Regardons comment réaliser cette animation de vélo.
A la fin de la vidéo, je vais vous montrer comment utiliser l'accéléromètre pour cet effet de sorte que le défilement se fasse en inclinant un appareil mobile iOS ou Android.
Commençons par choisir une couleur de fond pour le ciel bleu.
Ajoutons une première zone de défilement et et mettons-la plein écran en utilisant la fonction Etirer dans les propriétés. Renommez-la : Background. Cliquez sur la flèche pour entrer à l'intérieur et modifier son contenu. 
Insérons l'image du bâtiment. Ajustez la hauteur pour que l'image soit en plein écran. Cette image est plus large que la largeur de l'écran. Ajustons la largeur de la zone de défilement pour qu'elle l'affiche entièrement.
Désélectionnez l'image pour sélectionner le composant zone de défilement. Dans les propriétés, cliquez sur Horizontal et pour la largeur, cliquez sur le bouton Ajuster. La largeur est automatiquement calculée en fonction de son contenu, c'est-à-dire en fonction de la largeur de l'image du bâtiment. La largeur de ce défilement est maintenant de 2788px. Gardons le défilement utilisateur mais cachons la barre de défilement et supprimons l'effet de rebond.
Vous pouvez visualiser ce défilement depuis le studio et depuis l'aperçu.
Maintenant, ajoutons les nuages. Quittez la première zone de défilement et revenez au niveau de l'écran.
Ajoutons une autre zone de défilement et positionnons-la en haut de l'écran. Etirez-la à la largeur de l'écran. mais pas besoin de le faire en plein écran : les nuages ne seront affichés qu'au-dessus des bâtiments.
Dans les propriétés, nous allons garder les mêmes propriétés que l'autre composant. Attention à la largeur : les 2 zones de défilement doivent avoir des tailles différentes, c'est ce qui va créer l'effet Parallaxe. La zone la plus large sera celle qui défilera le plus rapidement. C'est pourquoi je vais choisir une largeur plus petite pour que les nuages bougent plus lentement que le bâtiment.
Ajoutons les images des nuages à l'intérieur, Mettez-en plusieurs pour obtenir un effet continu et la barre de défilement permet de se déplacer dans la zone.
Lors de la prévisualisation de l'animation, nous pouvons voir que les zones de défilement sont indépendantes et les nuages sont placés au-dessus des bâtiments. C'est parce qu'ils ont été créés après. Positionnons-les derrière le bâtiment en les plaçant sous le composant background dans la liste des objets.
Maintenant les nuages sont derrière les bâtiments mais nous ne pouvons plus les faire défiler car l'autre zone de défilement prend le contrôle.
Nous devons les synchroniser ensemble.
La synchronisation est un concept global dans PandaSuite Studio : vous pouvez synchroniser tous les composants ensemble et choisissez les propriétés que vous voulez synchroniser : position, temps, orientation... en fonction du composant !
Ici, nous allons synchroniser la position des zones de défilement ensemble. Ajoutez un composant synchronisation et dans les propriétés, sélectionnez les deux zones de défilement. Assurez-vous que les propriétés sont correctement définies.
Maintenant l'effet Parallaxe est là.
Pour améliorer cet effet, nous allons insérer un vélo qui restera statique. Il suffit d'ajouter l'image dans l'écran, pas besoin de la placer dans une zone de défilement.
Vous pouvez ajouter d'autres éléments de défilement à cet effet Parallaxe. Ajoutons des oiseaux qui vont se déplacer de haut en bas. Créez une autre zone de défilement qui est verticale, placez les oiseaux à l'intérieur et ajoutez-les au groupe de synchronisation existant.
Si vous créez pour un appareil iOS ou Android, il est possible d'utiliser l'accéléromètre pour contrôler cette animation. Tout en inclinant l'appareil, l'animation défilera. Pour cela, il suffit d'ajouter un capteur de mouvement. Ce capteur détecte le mouvement et l'orientation des appareils mobiles. Vous pouvez créer n'importe quelle animation liée au mouvement d'un appareil.
Dans les propriétés, choisissez Inclinaison, activez Accéléromètre si vous voulez, ne gardez que l'axe horizontal et l'amplitude du mouvement par défaut. Puis ajoutez-le au groupe Synchronisation.
Voilà, c'est fait ! Vous êtes maintenant un Pro de l'effet Parallaxe et prêt à impressionner vos utilisateurs. Si vous avez aimé cette vidéo, cliquez sur le bouton "J'aime" et abonnez-vous à notre chaîne YouTube !
Cela a-t-il répondu à votre question ? Merci pour les commentaires Il y a eu un problème pour soumettre vos commentaires. Veuillez réessayer plus tard.