Dans ce tutoriel, nous allons voir ensemble étapes par étapes pour concevoir et mettre en œuvre des effets de défilement (scroll effects) à l’aide de Divi et de son constructeur de page intégré Divi Builder.
Qu’est-ce que les Effets de Défilement ?
Les Effets de Défilement sont des animations personnalisables qui réagissent aux actions de vos lecteurs lorsqu’ils font défiler la page vers le haut ou le bas. Contrairement aux animations traditionnelles, les effets de défilement sont directement liés au comportement de défilement de vos visiteurs. La vitesse et la direction de l’animation dépendent de la rapidité et de la direction dans lesquelles le visiteur fait défiler la page. La chronologie de l’animation est déterminée par la position de l’élément dans le champ de vision du navigateur.
N’importe quel élément peut être animé en utilisant une combinaison d’effets de mise à l’échelle, de rotation, de mouvement horizontal et vertical, d’opacité et de flou. Vous contrôlez l’intensité de chaque effet à différents moments de l’animation, et Divi se charge du reste, créant de belles transitions lorsque ces éléments apparaissent et se déplacent dans le champ de vision de vos lecteurs.
Où trouver les effets de défilements (Scroll effects) dans Divi ?
Les Effets de Défilement sont disponibles dans toutes les sections, rangées, colonnes et modules. Il suffit de passer la souris sur l’élément sur lequel vous travaillez, de cliquer sur l’icône en forme d’engrenage pour afficher les paramètres, puis aller dans l’onglet avancé Avancé et sélectionner Effets de Défilement.
Les différents paramètres des effets de défilements
Position collante (Sticky Position)
Ne colle pas
En choisissant cette option, l’élément continuera à se déplacer normalement avec le reste du contenu de la page, sans s’attacher à un bord supérieur ou inférieur de la fenêtre du navigateur.
Cela garantit que l’élément suit le flux naturel du défilement, sans rester bloqué à un endroit spécifique à l’écran.
Rester en Haut
Lorsque vous sélectionnez cette option, l’élément choisi « collera » au haut de l’écran, restant visible et en position fixe, même lorsque l’utilisateur fait défiler la page vers le bas.
Cela est particulièrement utile pour des éléments tels que les menus de navigation, les en-têtes ou toute information que vous souhaitez garder constamment accessible aux visiteurs, indépendamment de leur position sur la page.
Coller au fond
L’option « Coller au fond » dans les paramètres des Effets de Défilement permet de fixer un élément à la partie inférieure de la fenêtre du navigateur. En choisissant cette option, l’élément spécifié « collera » au bas de l’écran, demeurant ainsi visible et en position fixe même quand l’utilisateur fait défiler la page vers le haut.
Cela est particulièrement utile pour des éléments que vous souhaitez garder en vue en permanence, comme des barres d’informations, des messages d’alerte, ou des boutons d’action, assurant ainsi qu’ils soient toujours accessibles aux visiteurs, quel que soit leur défilement sur la page.
Tenez-vous en Haut et en Bas
Cette option permet à un élément de rester fixe à la fois en haut et en bas de la fenêtre du navigateur lors du défilement de la page. Cela signifie que lorsque l’utilisateur fait défiler la page, l’élément sélectionné peut d’abord rester collé en haut de l’écran. Puis, à mesure que l’utilisateur continue de défiler et atteint un certain point, l’élément peut se déplacer vers le bas de l’écran et y rester fixe.
Cette option est utile pour créer des effets de défilement dynamiques où l’élément garde une visibilité constante tout en changeant sa position de manière interactive en fonction du comportement de défilement de l’utilisateur. Cela peut être particulièrement efficace pour des éléments clés tels que des bannières promotionnelles, des alertes importantes ou des boutons d’action qui doivent rester visibles tout au long de la navigation de l’utilisateur sur la page.
Les options supplémentaires pour les positions
En sélectionnant les options de position vous avez accès a d’autre paramétrage :
Décalage Supérieur Collant
L’option « Décalage Supérieur Collant » dans le cadre d’une position collante fait référence à la capacité de définir une marge spécifique entre le haut de la fenêtre du navigateur et l’élément que vous voulez rendre collant. Lorsque vous utilisez une position collante pour un élément (comme le « Coller en Haut »), ce décalage détermine la distance à laquelle l’élément restera fixe par rapport au bord supérieur de l’écran pendant le défilement.
Par exemple, si vous réglez un décalage supérieur collant de 20 pixels, l’élément en question ne collera pas directement au bord supérieur de l’écran, mais maintiendra une distance de 20 pixels par rapport à ce bord. Cela est utile pour éviter que l’élément collant ne recouvre d’autres éléments importants de l’en-tête, comme une barre de navigation ou le logo du site, ou simplement pour respecter un design spécifique qui nécessite un certain espace autour des éléments collants.
Limite Collante Inférieure
L’option « Limite Collante Inférieure », présente dans les paramètres de position collante, est conçue pour établir une borne inférieure jusqu’à laquelle un élément peut conserver sa propriété collante lors du défilement d’une page web. Cette fonctionnalité s’avère extrêmement utile pour maintenir la visibilité d’un élément lors du défilement vers le bas, mais uniquement jusqu’à un point spécifique.
Prenons un exemple : si vous définissez une limite collante inférieure pour un élément positionné en haut de la page, cet élément restera fixé en haut de l’écran jusqu’à ce que la limite prédéfinie soit atteinte. Une fois cette limite franchie, l’élément cesse de se comporter comme un élément collant et rejoint le défilement normal de la page. Cette approche est particulièrement pratique pour éviter que l’élément collant ne recouvre ou n’interfère avec d’autres sections de contenu essentielles situées plus bas sur la page.
En guise d’illustration, considérons un menu de navigation que vous souhaitez garder visible jusqu’à ce que l’utilisateur parvienne à une section spécifique du pied de page. Au-delà de ce point, la présence continue du menu collant pourrait s’avérer visuellement gênante ou perturbatrice. Ainsi, en ajustant la limite collante inférieure, vous pouvez optimiser la disposition des éléments collants et leur interaction avec les autres composants de la page.
Décalage des éléments collants environnants
Le « Décalage des éléments collants environnants » est une fonctionnalité de conception web qui permet de gérer l’interaction et l’espacement entre plusieurs éléments collants sur une page. Lorsque vous avez plusieurs éléments avec une position collante (comme des barres latérales, des en-têtes, ou des bannières qui restent en place lors du défilement), ce décalage sert à définir la distance ou l’espace entre ces éléments collants.
L’idée est de s’assurer que les éléments collants ne se superposent pas ou ne créent pas de conflits visuels en se chevauchant lors du défilement. Par exemple, si vous avez une barre de navigation collante en haut et une bannière publicitaire collante en bas, un décalage approprié entre elles garantira qu’elles restent visibles et fonctionnelles sans empiéter l’une sur l’autre.
Ce décalage peut être ajusté en fonction de la conception globale de la page et des besoins spécifiques en termes d’expérience utilisateur. En gérant efficacement ces décalages, vous pouvez créer une interface utilisateur cohérente et facile à naviguer, où les éléments clés restent accessibles sans gêner la visualisation d’autres contenus importants.
Style de transition par défaut et collants
Le « Style de transition par défaut pour les éléments collants » fait référence à la manière dont les éléments collants (comme les menus, les en-têtes ou les annonces) apparaissent et disparaissent lorsqu’ils deviennent collants ou cessent de l’être pendant le défilement d’une page web. Cette transition est essentielle pour assurer une expérience utilisateur fluide et agréable.
Les différents effets de défilements (Scroll effects)
C’est ici que vous pouvez choisir parmi les 6 animations d’effet de défilement. La transition de l’animation est basée sur le comportement de défilement de l’utilisateur. Une fois que l’élément entre dans le champ de vision du navigateur, l’animation commence, et une fois qu’il quitte ce champ de vision, l’animation se termine.
Mouvement Vertical
L’effet de mouvement vertical permet à tout élément de se déplacer verticalement sur la page, en fonction de la vitesse et de la direction du défilement du visiteur. Le résultat est un effet de parallaxe ! Désormais, n’importe quel élément peut être utilisé pour créer des effets de parallaxe avec Divi. Vous pouvez même combiner le mouvement vertical avec des images d’arrière-plan en parallaxe pour réaliser des designs vraiment impressionnants.
Dans le cadre des effets de mouvement vertical des « scroll effects » dans Divi, il y a trois paramètres clés à comprendre : le Décalage de Départ, le Décalage Moyen, et le Décalage de Fin.
Vidéo source : elegantthemes.com
- Décalage de Départ : Ce paramètre détermine la position initiale de l’élément avant le début du défilement dans la fenêtre du navigateur. En ajustant ce décalage, vous définissez où l’élément commencera son mouvement vertical par rapport à sa position normale sur la page.
- Décalage Moyen : Ce paramètre contrôle le comportement de l’élément pendant le défilement. C’est au moment où l’élément est au milieu de l’écran que ce décalage est le plus perceptible. Vous pouvez utiliser ce réglage pour créer un effet de mouvement plus fluide ou plus dramatique, selon l’intensité du décalage appliqué.
- Décalage de Fin : Ce paramètre détermine la position finale de l’élément après qu’il ait quitté la fenêtre du navigateur. En ajustant ce décalage, vous pouvez définir où l’élément s’arrête dans son mouvement vertical par rapport à sa position initiale.
En jouant avec ces trois paramètres, vous pouvez créer des effets de mouvement vertical complexes et dynamiques qui réagissent au défilement de l’utilisateur, offrant ainsi une expérience interactive et visuellement attrayante sur votre site Divi.
Mouvement Horizontal
L’effet de mouvement horizontal est similaire à l’effet de mouvement vertical, à la différence qu’il permet de déplacer les éléments de gauche à droite sur l’écran, en fonction de la direction et de la vitesse de défilement du visiteur. Vous pouvez même combiner les mouvements verticaux et horizontaux, ce qui vous donne un contrôle total sur le déplacement de n’importe quel élément.
Pour le mouvement horizontal dans les effets de défilement (scroll effects) de Divi, les concepts de Décalage de Départ, Décalage Moyen et Décalage de Fin fonctionnent de manière semblable à ceux du mouvement vertical, mais avec une orientation horizontale.
Vidéo source : elegantthemes.com
- Décalage de Départ : Ce paramètre définit la position horizontale initiale de l’élément avant que le défilement ne commence. Cela permet de déterminer à quel point l’élément se déplacera vers la gauche ou la droite par rapport à sa position originale lorsque le visiteur commence à faire défiler la page.
- Décalage Moyen : Ce réglage influence le mouvement de l’élément lorsque celui-ci se trouve au milieu de l’écran. Il détermine l’ampleur et la direction du mouvement horizontal de l’élément pendant que le visiteur fait défiler la page. Ce paramètre est crucial pour ajuster l’effet de mouvement et créer une interaction dynamique avec l’utilisateur.
- Décalage de Fin : Ce paramètre établit la position horizontale finale de l’élément après qu’il ait passé la fenêtre de visualisation. Cela signifie que vous pouvez contrôler l’endroit où l’élément s’arrête dans son déplacement horizontal une fois que le visiteur a fini de faire défiler la section concernée.
L'effet de fondu (Fading In and Out)
L’effet de fondu permet de faire apparaître (fade in) et disparaître (fade out) les éléments en fonction de la vitesse et de la direction du défilement du visiteur. Vous avez la possibilité de faire apparaître progressivement les éléments, de les faire disparaître, ou les deux. La combinaison de l’effet de fondu, de flou (blur) et de mise à l’échelle (scale) peut créer des animations sophistiquées qui ajoutent un facteur « wow » supplémentaire à vos conceptions.
Pour l’effet de fondu (fade effect) dans les scroll effects de Divi, les paramètres tels que l’Opacité de Départ, l’Opacité Moyenne et l’Opacité de Finale jouent un rôle crucial dans la personnalisation de l’animation.
Vidéo source : elegantthemes.com
- Opacité de Départ : Ce paramètre définit le niveau d’opacité de l’élément avant que le visiteur ne commence à faire défiler la page. Une opacité de départ faible signifie que l’élément sera presque transparent au début, et deviendra plus visible à mesure que le visiteur fait défiler la page.
- Opacité Moyenne : Ce réglage contrôle le niveau d’opacité de l’élément lorsqu’il se trouve au milieu de l’écran, pendant le défilement. C’est à ce moment que l’élément peut être le plus ou le moins visible, selon les réglages. L’ajustement de l’opacité moyenne peut créer un effet de transition douce pour l’élément à mesure qu’il se déplace dans le champ de vision du visiteur.
- Opacité de Finale : Ce paramètre détermine le niveau d’opacité de l’élément après qu’il ait quitté la fenêtre de visualisation. Un réglage d’opacité de fin faible fera en sorte que l’élément devienne progressivement transparent et disparaisse à la fin du défilement.
En ajustant ces niveaux d’opacité, vous pouvez créer des effets de fondu en entrée et en sortie qui rendent les transitions des éléments fluides et élégantes.
Agrandir ou réduire - Scaling Up and Down (mise à l’échelle)
L’effet d’échelle permet d’augmenter ou de diminuer la taille de n’importe quel élément en fonction de la vitesse et de la direction du défilement de la page (scroll). Si vous souhaitez attirer l’attention sur un élément particulier, comme un appel à l’action, vous pouvez configurer l’effet d’échelle pour augmenter la taille de l’élément à mesure qu’il se rapproche du centre du champ de vision (viewport). Bien sûr, il existe de nombreuses autres possibilités également !
Pour l’effet de mise à l’échelle (scale effect) dans les effets de défilement de Divi, les paramètres tels que l’Échelle de Départ, l’Échelle de Milieu de Gamme et l’Échelle Finale permettent de contrôler comment les éléments changent de taille pendant le défilement.
Vidéo source : elegantthemes.com
- Échelle de Départ : Ce paramètre détermine la taille initiale de l’élément avant que le défilement ne commence. Un réglage d’échelle de départ inférieur à 1 rendra l’élément plus petit que sa taille normale au début, tandis qu’un réglage supérieur à 1 l’agrandira dès le départ.
- Échelle de Milieu de Gamme : Ce réglage influence la taille de l’élément lorsqu’il se trouve au centre de l’écran, pendant le défilement. En ajustant l’échelle de milieu de gamme, vous pouvez faire en sorte que l’élément atteigne sa taille maximale ou minimale lorsqu’il est au milieu de la fenêtre de visualisation, créant ainsi un point focal dynamique.
- Échelle Finale : Ce paramètre définit la taille finale de l’élément après qu’il ait quitté la fenêtre de visualisation. Vous pouvez choisir de faire revenir l’élément à sa taille originale ou de le laisser agrandi ou réduit en fin de défilement.
En manipulant ces paramètres d’échelle, vous pouvez créer des animations captivantes qui modifient la taille des éléments de manière dynamique en réponse au défilement du visiteur, ajoutant un effet visuel intéressant et interactif à votre site internet.
Rotation (tournant)
Rotation L’effet de rotation permet de faire tourner un élément dans l’une ou l’autre direction en fonction de la vitesse et de la direction du défilement du visiteur. Une rotation subtile peut vraiment donner vie à des scènes. Un peu de rotation, combinée à un mouvement horizontal, peut donner d’excellents résultats ! Ou bien, vous pouvez laisser les éléments tourner indéfiniment.
Pour l’effet de rotation dans les effets de défilement de Divi, les paramètres tels que la Rotation de Départ, la Rotation Moyenne et la Fin de Rotation sont clés pour déterminer comment un élément va tourner pendant le défilement.
- Rotation de Départ : Ce paramètre définit l’angle initial de rotation de l’élément avant que le défilement ne commence. Par exemple, un angle de 0 degré signifie que l’élément commence sans rotation, tandis qu’un angle différent de 0 détermine l’orientation initiale de l’élément avant que l’utilisateur ne commence à faire défiler la page.
- Rotation Moyenne : Ce réglage contrôle l’angle de rotation de l’élément lorsqu’il se trouve au milieu de l’écran pendant le défilement. Vous pouvez ajuster ce paramètre pour déterminer à quel point et dans quelle direction l’élément doit tourner lorsqu’il est au centre de la fenêtre de visualisation.
- Fin de Rotation : Ce paramètre définit l’angle final de rotation de l’élément après qu’il ait quitté la fenêtre de visualisation. Il détermine comment l’élément s’aligne ou continue de tourner une fois que le défilement est terminé.
En jouant avec ces réglages de rotation, vous pouvez créer des animations dynamiques qui ajoutent un mouvement de rotation captivant aux éléments de votre page.
Effet de flou (résumé)
L’effet de flou permet de faire entrer et sortir les éléments du champ de netteté en fonction de la vitesse et de la direction du défilement de la page. Étant donné que Divi vous permet de contrôler les valeurs de flou au départ, au milieu et à la fin, vous pouvez rendre les éléments nettement visibles juste au moment où ils se trouvent devant les yeux de vos lecteurs. C’est un excellent moyen d’attirer l’attention sur des informations importantes.
Vidéo source : elegantthemes.com
Pour l’effet de flou dans les effets de défilement de Divi, les paramètres tels que le Flou de Départ, le Flou Moyen et la Fin de Flou sont essentiels pour créer une transition fluide de netteté et de flou.
- Flou de Départ : Ce paramètre détermine le niveau de flou initial de l’élément avant que le défilement ne commence. Un niveau élevé de flou de départ signifie que l’élément commencera avec une apparence plus floue, devenant progressivement plus net à mesure que le visiteur fait défiler la page.
- Flou Moyen : Ce réglage contrôle le niveau de flou de l’élément lorsqu’il se trouve au milieu de l’écran pendant le défilement. C’est à ce point que vous pouvez régler l’intensité du flou pour créer un effet de mise au point, rendant l’élément plus ou moins net selon votre conception.
- Fin de Flou : Ce paramètre définit le niveau de flou final de l’élément après qu’il ait quitté la fenêtre de visualisation. Vous pouvez choisir de rétablir l’élément à son état initial de flou ou de le rendre complètement net en fin de défilement.
Les déclencheurs d'effet de mouvement
Ces déclencheurs déterminent à quel moment de leur passage dans la fenêtre de visualisation (viewport) les éléments commencent et terminent leurs animations. Les trois principaux déclencheurs sont le Haut de l’Élément, le Milieu de l’Élément et le Bas de l’Élément.
- Haut de l’Élément : Ce déclencheur active l’animation lorsque le haut de l’élément atteint un certain point dans la fenêtre de visualisation. Par exemple, vous pouvez régler une animation pour qu’elle commence dès que le haut de l’élément apparaît à l’écran ou lorsqu’il atteint le haut de la fenêtre de visualisation. Ce déclencheur est utile pour les animations qui doivent commencer dès l’entrée de l’élément dans le champ visuel de l’utilisateur.
- Milieu de l’Élément : Avec ce déclencheur, l’animation est activée lorsque le milieu de l’élément atteint un point spécifique de la fenêtre de visualisation. C’est idéal pour les animations qui doivent être centrées ou pour les éléments que vous souhaitez mettre en évidence lorsque l’utilisateur les voit en plein centre de l’écran.
- Bas de l’Élément : Ce déclencheur lance l’animation lorsque le bas de l’élément arrive à un certain point dans la fenêtre de visualisation. C’est utile pour les animations qui doivent se terminer ou commencer à un moment précis, par exemple, juste avant que l’élément ne quitte l’écran.
Conseils et Bonnes Pratiques
L’utilisation des effets de défilement dans Divi est à la fois un art et une science. Voici des conseils d’experts et des bonnes pratiques pour vous assurer que vos effets de défilement ne sont pas seulement attrayants, mais aussi fonctionnels et efficaces.
- Moins, C’est Plus
- Évitez la Surcharge : Trop d’animations peuvent distraire et confondre. Utilisez les effets de défilement avec modération pour accentuer des éléments clés de votre site.
Équilibre Visuel : Assurez-vous que les animations complètent le contenu plutôt que de le dominer.
- Évitez la Surcharge : Trop d’animations peuvent distraire et confondre. Utilisez les effets de défilement avec modération pour accentuer des éléments clés de votre site.
- Cohérence dans le Design
- Uniformité : Gardez une cohérence dans l’utilisation des effets. Si vous utilisez un effet de fondu pour une section, envisagez de le maintenir pour les sections similaires.
- Thème Global : Vos effets doivent s’aligner avec le thème et le style global de votre site pour créer une expérience utilisateur harmonieuse.
- Optimisation de la Performance
- Vitesse de Chargement : Les animations complexes peuvent affecter les temps de chargement. Optimisez les images et les scripts pour maintenir une performance rapide.
- Testez sur Différents Appareils : Assurez-vous que vos effets s’affichent correctement sur divers appareils et navigateurs.
- Accessibilité
- Lisibilité : Les effets ne doivent pas entraver la lisibilité du texte. Assurez-vous que le contenu reste facile à lire.
- Compatibilité avec les Lecteurs d’Écran : Testez votre site avec des outils d’accessibilité pour vous assurer que les effets de défilement n’affectent pas l’expérience des utilisateurs ayant des besoins spécifiques.
- Interaction Utilisateur
- Réaction au Scroll : Utilisez les effets pour réagir de manière intuitive aux actions des utilisateurs, comme le défilement ou le survol.
- Guide Visuel : Utilisez les animations pour guider l’attention des utilisateurs vers des éléments importants.
- Test et Feedback
- Collectez des Retours : Demandez des feedbacks aux utilisateurs pour comprendre comment les effets de défilement affectent leur expérience.
- Amélioration Continue : N’ayez pas peur de modifier et d’ajuster les effets en fonction des retours et des tendances du design web.
En appliquant ces conseils, vous assurez que vos effets de défilement Divi ne sont pas seulement esthétiquement plaisants, mais aussi fonctionnels et agréables pour vos visiteurs. N’oubliez pas que le meilleur design web est celui qui allie beauté et fonctionnalité.