Comment empiler et animer du texte à l'aide des effets de défilement Divi

L'utilisation des effets de défilement de Divi pour empiler et animer le texte sur le défilement est une technique de conception unique qui peut être utilisée pour donner vie à vos en-têtes de page. L'astuce consiste à utiliser les options de position de Divi pour empiler les lettres de manière à ce qu'elles reposent directement les unes sur les autres. Ensuite, vous pouvez déplacer les lettres horizontalement et verticalement en utilisant les effets de défilement.

Vérifiez-le!

Aperçu

Voici un bref aperçu de l'animation de texte que nous allons construire dans ce tutoriel.

Abonnez-vous à notre chaîne Youtube

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment empiler et animer du texte dans Divi

Configuration de la section et de la rangée

Tout d'abord, créez une ligne à une colonne dans la section régulière.

Paramètres de section

Avant d'ajouter des modules, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : rgba(201,245,255,0.35)
• Rembourrage: haut 14vw, bas 14vw

Paramètres de ligne

Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur maximale : 60 %
• Alignement des lignes : Centre
• Hauteur: 20vw

Nous définissons la hauteur sur une valeur spécifiée car nous allons positionner les modules de texte à l'intérieur de la ligne de manière absolue.

Ajout des modules de texte empilés qui s'animent lors de la promenade

Maintenant que la section et la ligne sont configurées, nous pouvons commencer à ajouter les modules de texte qui constitueront notre conception de titre. Le premier module de texte comprendra le texte de l'en-tête principal. Les trois modules de texte suivants contiendront une seule lettre qui sera utilisée pour s'empiler au-dessus du premier lettrage de l'en-tête, puis s'animer au défilement.

Commençons par ajouter le module de texte avec le titre principal.

Ajouter un module de texte n° 1

Ajoutez un nouveau module de texte à la ligne.

Mettez ensuite à jour le module de texte avec le contenu suivant.

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• Police du texte : délié élastique
• Poids de la police de texte : gras
• Taille du texte du texte : 4vw
• Hauteur de la ligne de texte : 1,5 em
• Police du titre 2 : Bungee Shade
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Couleur du texte :
• Titre 2 Taille du texte : 12vw
• Largeur : 100 %

• Position : Absolu

Ajouter un module de texte n° 2

Le prochain module de texte sera utilisé comme première lettre pour chevaucher la première lettre du titre. Pour démarrer la conception du module de texte, dupliquez le premier module de texte.

Mettez ensuite à jour le contenu du module de texte en double avec la première lettre du texte d'en-tête (« D »).

Mettez ensuite à jour les paramètres de conception comme suit :

• Police du texte : Bungee Shade
• Poids de la police de texte : gras
• Couleur du texte du texte : rgba(83 144 193 0,3)
• Taille du texte : 12vw
• Hauteur de la ligne de texte : 1 em

Effets de défilement

Le module de texte avec la lettre « D » est maintenant empilé directement au-dessus de la lettre « D » dans le premier module de texte. Nous allons déplacer légèrement la lettre lors du défilement en utilisant une combinaison de mouvements verticaux et horizontaux.

Mouvement vertical

Sous l'onglet Avancé, sélectionnez l'onglet Mouvement vertical et mettez à jour les éléments suivants :

• Activer le mouvement vertical : OUI
• Décalage de départ : 0 (à 20 %)
• Décalage moyen : -0,5 (entre 40 % et 60 %)
• Décalage de fin : 0 (à 80 %)

Si vous débutez dans les options d'effet de défilement dans Divi, les valeurs de pourcentage supérieures indiquent les points de localisation dans la fenêtre du navigateur. Chaque valeur de pourcentage correspond aux décalages ci-dessous (début, milieu et fin). Ainsi, au fur et à mesure que l'utilisateur fait défiler, la lettre « D » commencera à s'animer (à partir d'un décalage de départ « 0 ») lorsqu'elle atteint 20 % du bas de la fenêtre. Il continuera à s'animer (vers le haut) jusqu'à ce qu'il atteigne 40 % du bas de la fenêtre, puis restera au décalage « -0,5 » jusqu'à ce qu'il atteigne 60 % du bas de la fenêtre. Une fois qu'il atteint le point de 60 %, il commencera à s'animer jusqu'au décalage « 0 » d'origine et cessera de s'animer lorsqu'il atteint 80 % du bas de la fenêtre.

Mouvement horizontal

Pour donner au module de texte un mouvement horizontal, sélectionnez l'onglet de mouvement horizontal et mettez à jour ce qui suit (les valeurs seront les mêmes que le mouvement vertical) :

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 20 %)
• Décalage moyen : -0,5 (entre 40 % et 60 %)
• Décalage de fin : 0 (à 80 %)

Ajouter un module de texte n° 3

Créez le troisième module de texte (ou la lettre « D ») en dupliquant le module de texte précédent.

Mettre à jour les effets de défilement

Mettez ensuite à jour les effets de défilement suivants.

Mouvement vertical

• Décalage moyen : -1

Mouvement horizontal

• Décalage moyen : 1

Mettre à jour la couleur du texte

Mettez à jour la couleur du texte comme suit :

• Couleur du texte du texte : rgba(83 144 193 0,5)

Ajouter un module de texte n° 4

Les choses peuvent devenir plus difficiles à sélectionner à ce stade de la vue du bureau. Déployez le mode d'affichage filaire et dupliquez le module de texte précédent pour créer notre lettre finale.

Mettre à jour la couleur du texte

Mettez à jour la couleur du texte comme suit :

• Texte Couleur du texte : #5390c1

Mettre à jour les effets de défilement

Passez ensuite à l'onglet avancé et ajustez les effets de défilement comme suit :

Mouvement vertical

• Décalage moyen : -1,5

Mouvement horizontal

• Décalage moyen : 1,5

Ajouter une marge à la section pour le test

Pour tester la conception sur une page en direct, vous aurez besoin d'un peu d'espace pour faire défiler. Nous pouvons le faire facilement en ajoutant des marges supérieure et inférieure à la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Marge : 40vw haut, 40vw bas

Résultat final

Maintenant, nous pouvons enfin vérifier le résultat final sur une page en direct.

Le voici sur mobile.

N'hésitez pas à expérimenter différentes polices à l'aide de la fonction de recherche et de remplacement de Divi.

Dernières pensées

Cet article devrait faire fonctionner votre créativité pour de nouvelles façons d'animer le texte en défilement. Cela fonctionnera bien pour les en-têtes de section puisque l'utilisateur devra faire défiler la section (de haut en bas) et profiter de toute la durée de l'effet de défilement.

Et, à bien y penser, ce même concept fonctionnerait également pour les images et les icônes.

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!