Animation de défilement de parallaxe sur Oxygen Builder
Publié: 2022-07-30Dans ce didacticiel, nous allons créer une scène de parallaxe multicouche unique dans Oxygen Builder. C'est quelque chose qui impressionnera les clients et les visiteurs du site Web, et ce n'est pas trop difficile à mettre en œuvre.
Tout d'abord, nous devons réellement créer les ressources d'image. Il existe plusieurs façons de procéder, et quelle que soit la façon dont vous choisissez de générer cette scène, assurez-vous qu'il existe plusieurs sections pleine largeur que vous pouvez exporter. Chaque section doit représenter une profondeur spécifique sur l'image. Par exemple, il pourrait y avoir un premier plan d'arbres, puis une colline, puis une autre colline plus loin, et enfin un soleil.
Pour les besoins de ce didacticiel, j'ai décidé d'utiliser une scène de coucher de soleil préexistante que j'ai obtenue de la communauté Figma. Cependant, vous pouvez créer le vôtre dans Figma ou utiliser un autre programme comme Photoshop.
Nous avons publié un article sur la création d'une animation de défilement de parallaxe similaire sur Elementor il y a plusieurs années, et décrit une technique Photoshop où vous pouvez prendre une image réelle et la séparer et l'exporter facilement pour cet effet. Lisez-le ici :
Je suggérerais d'utiliser Figma car c'est gratuit, facile et permet également une exportation rapide des groupes et des calques.
Voici une démo où nous créons un composant de colline en quelques secondes à l'aide de l'outil plume.
Combinez plusieurs d'entre eux, créez un groupe et exportez facilement, comme nous le verrons maintenant.
Une fois que vous avez créé votre scène avec plusieurs groupes et différentes profondeurs de l'image, exportez chaque groupe individuellement. Dans Figma, c'est très facile. Faites simplement un clic droit sur le groupe, sélectionnez copier/coller en tant que, puis copiez en tant que PNG.
Je le fais pour chaque groupe d'éléments.
J'ai ensuite collé ces PNG directement dans un éditeur Gutenberg, qui les a automatiquement téléchargés dans la médiathèque.
De plus, j'ai installé un plugin d'optimisation d'image (ShortPixel), qui a automatiquement redimensionné et minimisé les images afin qu'elles se chargent rapidement sur le front-end. Ceci est important si vous allez copier et coller les PNG directement à partir de la figure car il ne fait aucune optimisation par lui-même - les tailles de fichiers sont énormes.
Pour le fond, j'ai rempli la scène avec un dégradé linéaire. Figma a une fonctionnalité intéressante où nous pouvons exporter du CSS. Faites simplement un clic droit, copiez le css et ne retirez que l'arrière-plan du cadre principal.
Voici ce avec quoi nous nous retrouvons.
Maintenant, nous créons une section qui contiendra toutes les couches de notre scène de parallaxe. Cette section n'a pas de rembourrage et est définie sur toute la largeur pour rendre la section immersive.
Je peux ensuite prendre cet arrière-plan à dégradé linéaire que nous avons exporté et l'ajouter au CSS personnalisé de notre section.
Maintenant, définissez la section pour qu'elle ait position:relative , et pas de rembourrage. Rendez-le pleine largeur et height:100vh , et masquez le débordement, de sorte que la scène soit contenue.
Vous pouvez placer chaque calque dans la scène de deux manières principales : en tant qu'images d'arrière-plan ou éléments <img>.
J'utilise des divs et des images d'arrière-plan car c'est plus rapide. Notre section contient 1 div pour chaque groupe d'articles. La div est positionnée de manière absolue avec le haut, le bas, la gauche et la droite réglés sur 0. Cela lui permet de remplir l'intégralité de la section, tout en lui permettant d'être déplacée via translate pour notre effet de parallaxe.
Le premier plan, l'arrière-plan et tout le reste sont ajoutés à la scène à l'aide de l'image d'arrière-plan CSS.
- background-position est généralement défini sur 100%, ce qui pousse tout vers le bas de la scène, en l'alignant vers le bas. Si nécessaire, nous pouvons facilement modifier le positionnement à l'aide de cette propriété.
- l'image d'arrière-plan est définie pour contenir, ce qui signifie qu'elle sera pleine largeur dans sa div.
- La répétition est définie sur aucune
- Ajoutez également une classe comme
.plax_hill-1pour faciliter l'identification lors de l'application de l'effet respectif
Ceci est fait pour chaque groupe que nous avons exporté, et ils sont positionnés pour se superposer en utilisant z-index.
Nous pouvons toujours être raisonnablement réactifs en changeant l'image d'arrière-plan sur différents points d'arrêt pour s'adapter au changement de l'écran de l'orientation paysage à l'orientation portrait (je ne le fais pas dans ce didacticiel, mais si cet effet devait passer en production, ce serait essentiellement un différent scène pour chaque point d'arrêt car nous remplacerions chaque section pour occuper plus d'espace à mesure que le rapport d'aspect devenait plus long).
*Avec la méthode de l'image, utilisez SRCSET.
Cours Oxygen Builder - Bientôt disponible !
Le cours Oxygen Builder Mastery vous amènera du débutant au professionnel - modules ACF, MetaBox et WooCommerce inclus.
Pour l'image du soleil, j'ai dû positionner le haut de l'arrière-plan à 50 %, ce qui l'a placé au centre de la div au lieu de le pousser jusqu'à l'aligner vers le bas :
Maintenant, toute la scène que nous avons créée sur Figma, exportée au format PNG, téléchargée sur WordPress et construite sur Oxygen est terminée. Il semble presque identique à notre conception et réagit aux changements de taille de l'écran. Il n'y a pas encore de parallaxe, que nous allons maintenant ajouter.
Nous pouvons utiliser la bibliothèque de parallaxe de notre choix - elles font toutes la même chose. Pour ce tutoriel, j'utilise un plus récent appelé lax.js.
Cependant, consultez Rellax.js et Paroller.js, qui ont tous deux des tutoriels publiés spécifiquement pour Oxygen Builder sur ce blog.
Pour Rellax :
Pour Paroller :
Lax peut faire de la parallaxe, mais il peut aussi faire une tonne d'autres choses, ce qui en fait une bibliothèque d'animation d'interaction incroyablement puissante. Je voulais le souligner ici et donner un exemple de base pour vous montrer ce qu'il peut faire.
Essentiellement, vous avez un pilote, puis vous avez l'effet. L'effet est appliqué en fonction du pilote. Dans cet exemple, notre pilote est le défilement vertical et sa position. Les effets peuvent être tout ce que CSS a à offrir. Pour la parallaxe, nous utiliserons transformY. Cependant, nous pouvons également modifier l'opacité, l'échelle, les couleurs et bien plus encore !
En savoir plus sur lax.js ici : https://github.com/alexfoxy/lax.js
Tout d'abord, nous incluons en ajoutant le script d'un CDN dans notre fichier wp_head. J'ai utilisé WPCodeBox pour cela:
Ensuite, dans un fichier JS ajouté au pied de page, nous initialisons l'effet, ajoutons un pilote qui regarde la position de défilement de l'écran, puis ajoutons divers effets à chaque élément. Pour toutes les sections autres que le soleil, nous avions l'habitude de traduire pourquoi manipuler la position de la div en fonction de la position de défilement vertical.
Pour le soleil, nous utilisons toujours la position de défilement vertical comme déclencheur/pilote, mais au lieu de manipuler la position, nous avons modifié l'échelle du défilement.
Sur la base du positionnement général des sections après l'application de l'effet, j'ai dû revenir en arrière et modifier le positionnement de l'arrière-plan des éléments pour m'assurer que tout avait l'air correct. Vous pouvez également essayer de compenser en utilisant des marges ou des transformations. Tant que tout est relatif à la même échelle, en l'occurrence la hauteur de l'écran, il doit rester réactif.
Et enfin, nous arrivons au résultat final d'une parallaxe en couches vue qui change lorsque vous faites défiler. C'est vraiment unique, et vous pouvez créer de nombreux looks différents qui épateront les clients et les visiteurs.
Cours Oxygen Builder - Bientôt disponible !
Le cours Oxygen Builder Mastery vous amènera du débutant au professionnel - modules ACF, MetaBox et WooCommerce inclus.