La version 4.3 de Divi a apporté une fonctionnalité intéressante en terme de webdesign : les effets au scroll.
En effet, il est désormais possible d’assigner aux éléments de notre choix, un certain nombre de transformations qui s’appliquent lors du défilement de la page.
Cette nouvelle option permet donc de dynamiser nos sites Divi en minimisant l’ajout de ressources externes.
Voyons comment prendre en main cette fonctionnalité prometteuse.

En quoi consistent les effets au scroll ?

Ces transformations entrent dans la famille des effets de parallaxe.
Vous connaissez déjà l’option parallaxe présente pour les images de fond dans le Divi Builder.
Et si vous êtes un·e lecteur·rice assidu·e de Divi Community, alors vous avez certainement lu mon article Ajoutez des effets de parallaxe avancés à Divi. 😉
Dans ce tuto, j’expliquais comment, grâce à un plugin jQuery, ajouter des effets de translation horizontale et verticale à n’importe quel élément du Divi Builder.

Et bien vous allez voir que ces nouveaux effets au scroll implémentés au Divi Builder vont permettre d’obtenir le même rendu… et bien plus encore !
Le tout sans avoir à mettre les mains dans le code en ajoutant des scripts complémentaires.

Pour vous donner un aperçu des possibilités offertes par les effets au scroll de Divi, je vous ai concocté une page de démo avec un exemple pour chaque effet.

Les 6 effets de transformation disponibles

6 effets de transformation sont donc appliquables à n’importe quel module, ligne ou section.
Soit à l’unité, soit en les combinant entre eux pour obtenir des effets complexes.

Pour activer l’un ou l’autre de ces effets, il vous suffit de cliquer sur le bouton Enable [nom de l’effet] et les options de paramétrage disponibles s’afficheront.

1. Le mouvement vertical

Paramétrez le déplacement de votre élément sur l’axe Y afin qu’il effectue une translation verticale.
Ajustez la valeur de z-index de l’élément qui doit passer au-dessus du ou des autres.

2. Le mouvement horizontal

Paramétrez le déplacement de votre élément sur l’axe X afin qu’il effectue une translation horizontale.

Selon vos réglages, il est possible que lorsque votre élément “sort de la page”, il provoque un redimensionnement de la largeur de votre site. Ceci ayant pour conséquence d’ajouter un barre de défilement horizontale.

Pour éviter ça, utilisez la règle CSS suivante :

3. Le fondu

Paramétrez l’opacité de votre élément afin de le faire passer d’un état visible à invisible (ou inversement).

4. L’échelle

Paramétrez la taille de votre élément afin de modifier ses dimensions.
Je vous conseille d’utiliser cet effet en complément des options de positionnement du Divi Builder, situés pour chaque module dans Avancé -> Poste. Vous pourrez ainsi placer comme bon vous semble vos différents éléments et obtenir ainsi un rendu intéressant.

5. La rotation

Paramétrez l’orientation de votre élément afin de modifier son degré de rotation.

6. Le flou

Paramétrez la netteté de votre élément.
Cette option fonctionne généralement bien avec l’option de dimensionnement, ce qui permet de simuler un effet de profondeur de champ, comme en photographie.

Les options des effets au scroll

Une fois un effet activé, les paramètres ci-dessus s’affichent. Voyons en détails à quoi ils correspondent.

1. Viewport Bottom : définit le point de départ de l’animation par rapport au bas de l’écran
   Par défaut, sa valeur est à 0, ce qui correspond à l’extrémité inférieure de l’écran.
   Si vous augmentez cette valeur, l’animation débutera plus tard.
2. Le point central : ce point définit le milieu de l’animation.
   Par défaut, sa valeur est à 50%. Ceci signifie que c’est le mileu absolu situé entre l’élément Viewport Bottom et l’élément Viewport Top.
   Si vous réduisez cette valeur, vous déplacez vers le bas le millieu de l’animation.
   Si vous augmentez cette valeur, vous déplacez vers le haut le millieu de l’animation.
3. Viewport Top : définit le point d’arrivée de l’animation par rapport au haut de l’écran.
   Par défaut, sa valeur est à 100%, ce qui correspond à l’extrémité supérieure de l’écran.
   Si vous réduisez cette valeur, l’animation se terminera plus tôt.
4. Starting Offset : il s’agit de la valeur de départ de l’élément, au début de l’animation.
5. Mid Offset : il s’agit de la valeur attribuée à l’élément au milieu de l’animation.
6. Ending Offset : il s’agit de la valeur finale de l’élément, à la fin de l’animation.

Particularité du point central

Le point central peut être dédoublé en cliquant sur son extrémité gauche ou droite.
Ceci à pour but de geler l’effet sur sa valeur définie, et ce durant le laps de temps souhaité.

Bien comprendre le sens de l’animation

Afin d’imager les options des effets au scroll de Divi, je vous ai préparé un schéma symbolisant une fenêtre de navigateur Internet.
J’ai représenté les divers points clé de l’animation qui sont paramétrables.
Il faut surtout retenir que l’animation débute en bas de l’écran, là où l’élément apparait lorsque l’utilisateur fait défiler la page.

Le mot de la fin

Cette nouvelle fonctionnalité d’effets au scroll ouvre réellement le champ des possibles en matière de webdesign.
Elle permet de dynamiser encore plus nos sites Divi, très facilement, et qui plus est avec un rendu en live grâce au Divi Visual Builder.

Gardez à l’esprit que ce type d’effets fonctionne bien en les mélangeant et notamment en utilisant des éléments détourés.
Comme d’habitude, je vous conseille de ne pas surcharger vos sites avec des tonnes d’effets, sous peine d’alourdir vos pages et de gâcher l’expérience utilisateur.
Enfin, il est également préférable de désactiver ces effets au scroll sur les appareils mobiles. Ceci vous évitera de perdre du temps à ajuster les paramètres pour les diverses largeurs d’écrans et permettra une navigation plus aisée à vos visiteurs sur mobiles.

Pour conclure, voici quelques exemples de sites pour vous aider à trouver l’inspiration en matière d’effets au scroll.

Partager