Comment ajouter des animations aux sections/lignes

Il était une fois sur Internet, ajouter une animation à votre site était une tâche lourde et quelque peu spécialisée. Divi, cependant, possède de puissants outils d'animation et des effets de défilement que vous pouvez mettre en œuvre sans avoir besoin de beaucoup d'expertise technique. N'importe qui peut ajouter ces effets à leurs sites avec un minimum d'effort. Bien que les processus de ce tutoriel puissent être appliqués à n'importe quel élément de Divi, nous allons nous concentrer aujourd'hui sur les sections et les lignes pour obtenir des effets spécifiques en les utilisant. Approfondissons les animations !

Aperçu

Bureau

Mobile

Charger le Divi Builder dans une page ou une publication

La première chose que vous devrez faire est d'entrer dans le Divi Builder. Que vous choisissiez l'un de nos packs de mise en page (nous utiliserons le pack de mise en page du club de tennis pour cet article) ou une conception de votre choix, toutes les étapes se déroulent dans les paramètres Section et Ligne .

Avec cette conception, nous animerons 1 section et 3 lignes pour obtenir un effet de chargement séquentiel.

Choisissez une mise en page prédéfinie

Pour appliquer l'un de nos packs de mise en page conçus par des professionnels, entrez dans Divi Builder et sélectionnez Utiliser une mise en page prédéfinie . Cela fera apparaître la liste de tous les cadeaux que nous offrons.

Choisissez une mise en page

Ensuite, choisissez simplement le pack de mise en page que vous souhaitez utiliser. Vous pouvez trier par catégorie ou rechercher des mots-clés pour voir ce que nous avons créé pour vous.

Localisez la ou les sections et les lignes à animer

Lorsque la mise en page a importé tous les éléments et que la page est chargée, vous souhaiterez rechercher la section et la ou les lignes auxquelles vous souhaitez ajouter des animations. N'oubliez pas que les sections sont codées par couleur en bleu dans Divi Builder et les lignes sont en vert .

Une fois cela défini, passons à l'ajout de ces animations !

Comment ajouter une animation aux sections et aux lignes - Option 1

Ajouter une animation à une section Divi est très simple. Vous devez d'abord entrer les paramètres de la section . Ensuite, accédez à l'onglet Conception et faites défiler jusqu'à ce que vous voyiez les options d' animation .

Sous les options d' animation , vous ajusterez jusqu'à 8 options différentes pour l'animation que vous avez choisie.

1. Les styles d'animation vous permettent de choisir l'apparence de l'animation. Si la section roule d'un bout à l'autre ou rebondit sur le côté de la page comme une balle. Les plus courants sont Fade et Slide .
2. Direction – Vous définirez la direction vers laquelle l'élément se déplace. Une valeur vers le haut signifie que la section commencera en bas et se déplacera vers le haut. Up n'est pas le point d'origine.
3. Durée - Combien de temps dure l'animation du début à la fin. Une valeur inférieure l'accélérera et une valeur supérieure le ralentira.
4. Retard – Cette option empêche l'animation de se déclencher dès que possible et peut aider à attirer l'attention sur elle plus que si elle se déclenchait immédiatement.
5. Intensité – Plus la valeur est basse, plus l'animation est fluide, tandis que les valeurs plus élevées sont plus vives et plus agressives.
6. Opacité de départ – Une valeur de 0 fera que l'animation commencera de manière invisible et deviendra nette sur la durée. 100 signifie que l'élément est entièrement visible avant même le début de l'animation.
7. Courbe de vitesse - Cela vous permettra d'ajuster la fluidité du début et de la fin de l'animation.
8. Répéter – Est-ce que votre animation est un effet ponctuel ou est-ce quelque chose que vous voulez répéter encore et encore ? Si une animation est définie sur Once , la page doit se recharger pour la relancer.

Comment ajouter une animation aux sections et aux lignes - Option 2

Divi dispose également d'une fonctionnalité appelée Scroll Effects . Ce sont des animations qui se déclenchent chaque fois que l'utilisateur fait défiler sa fenêtre jusqu'à l'élément. Les effets de défilement peuvent être définis sur n'importe quel élément et peuvent être combinés avec les options d' animation mentionnées ci-dessus.

Comment activer les effets de défilement

Encore une fois, n'importe quel élément de Divi peut être configuré pour activer les effets de défilement, mais nous traitons aujourd'hui des sections et des lignes. Entrez donc les paramètres de votre section , accédez à l'onglet Avancé et recherchez l'en-tête Effets de défilement .

Choisissez les effets et les déclencheurs

Dans les options des effets de défilement , vous trouverez divers onglets pour différents types d'animations que vous pouvez déclencher lors du défilement.

• Position collante - Si la section ou la ligne colle ou non à l'écran de l'utilisateur lorsqu'il défile.
• Effets de transformation - Il s'agit des effets d'animation réels : mouvement horizontal et vertical, fondu d'entrée/sortie, mise à l'échelle de la taille, rotation et flou.
• Définir [Fonctionnalité] - Vous pourrez définir où l'effet est le plus visible à l'écran et quand/où il se produit
• Déclencheur d'effet de mouvement – Vous déterminerez si l'animation commence lorsque le haut de l'élément entre dans la fenêtre, le centre de l'élément ou le bas.

La principale différence entre ces options et l'utilisation des options d' animation de la section précédente réside dans le fait de savoir si vous souhaitez que l'animation soit automatisée ou si vous souhaitez qu'elle se déclenche à chaque fois que l'utilisateur effectue une action. Vous pouvez combiner des animations à l'aide des options Effets de défilement et Animation, que nous utiliserons pour l'effet du didacticiel principal.

Combinaison d'animations pour les sections et les lignes

Vous pouvez créer des effets époustouflants pour vos sites en combinant diverses animations à déclencher à différents moments. En utilisant l'option Retard d'animation , votre site peut animer une série de sections, de lignes et d'éléments en séquence pour obtenir des visuels impressionnants.

Pour commencer, nous allons définir le Style d'animation dans les paramètres de la section sur Glisser avec la Direction de l' animation définie sur Haut .

Nous garderons le reste des options à leurs valeurs par défaut. Surtout le délai d'animation . Nous voulons que la section se déclenche lorsqu'elle est en vue.

Paramètres d'animation pour la ligne 1

Ensuite, nous allons ajuster la première ligne de la section. Nous entrons dans les paramètres de ligne , accédez aux options d' animation sous l'onglet Conception et sélectionnez à nouveau Diapositive . Cette fois, nous voulons changer la direction vers le bas et le délai d'animation sur 5 00 ms . 1000ms est égal à 1 seconde, rappelez-vous.

Puisque nous avons laissé le timing de la section à 0 ms pour se déclencher immédiatement, nous voulons que la ligne soit légèrement décalée, permettant à l'animation initiale de se terminer en grande partie avant que celle-ci ne commence.

Paramètres d'animation pour la ligne 2

Ensuite, nous allons entrer dans les paramètres de la deuxième ligne de la page et accéder aux options d' animation . Encore une fois, nous sélectionnerons Slide pour le style d'animation , et cette ligne glissera vers la droite .

De plus, nous allons définir le délai d'animation à 1000 ms , ce qui signifie que celui-ci se déclenchera dès la fin de la première animation.

Paramètres d'animation pour la ligne 3

Pour la troisième rangée que nous animons, nous allons utiliser les effets de défilement pour atteindre nos objectifs. Parce que notre troisième rangée commence juste au-dessus du pli, la plupart des animations seraient invisibles si nous utilisions simplement un délai comme nous l'avons fait avec les autres éléments. Nous allons donc faire en sorte que ce ne soit pas le cas.

Options d'animation

Tout d'abord, nous allons répéter les processus ci-dessus. Ce n'est qu'avec cette ligne que nous définissons le style d'animation sur Fondu. Ensuite, nous définirons la Durée à 500ms pour que cette ligne apparaisse plus rapidement lors de son animation. Nous retardera par 1500ms pour assurer les autres animations sont terminées complètement avant cela commence.

Enfin, assurez-vous de vérifier que l' opacité de démarrage est définie sur 0% . Nous voulons que cette ligne soit invisible jusqu'à ce qu'elle soit prête à être vue.

Paramètres des effets de défilement

C'est là que les choses deviennent amusantes parce que nous pouvons combiner les effets. Cliquez sur l'onglet Avancé pour la ligne et recherchez Effets de défilement . Recherchez l'onglet Mouvement horizontal et assurez-vous de l'activer. Réglez ensuite le déclencheur d' effet de mouvement sur Milieu de l'élément . Nous utilisons le milieu plutôt que le haut pour nous assurer que l'effet ne commence pas à prendre effet tant que l'utilisateur ne fait pas défiler, juste au cas où la fenêtre de l'utilisateur afficherait le haut de la ligne.

Avec cet ensemble, la rangée attendra que tout le reste ait fini de s'animer pour apparaître, puis lorsque l'utilisateur fera défiler vers elle, la rangée entière semblera glisser depuis le côté de l'écran.

Résultats finaux

Lorsque vous aurez terminé tout cela, vos résultats devraient être similaires à celui-ci.

Bureau

Mobile

Conclusion

L'ajout d'effets d'animation est un moyen infaillible de rendre votre site plus dynamique, plus intéressant et plus attrayant visuellement. En utilisant les outils d'animation et d'effets de défilement intégrés de Divi, vous pouvez créer des combinaisons étonnantes qui épateront tout visiteur qui passera par là.

Qu'avez-vous utilisé les effets d'animation Divi pour créer à partir de vos sections et lignes ? Voyons-les dans les commentaires !

Article présenté en image par Vectorchok / shutterstock.com