Comment ajouter des animations de texte avancées dans Divi avec Letterize.js et Anime.js

Les animations intégrées de Divi offrent des tonnes de possibilités pour ajouter cet avantage supplémentaire à votre site Web. Ces animations, cependant, vous permettent d'ajouter une animation à un conteneur à la fois. Bien que dans la plupart des cas, cela soit généralement plus que suffisant, il existe des projets pour lesquels vous voudrez faire un effort supplémentaire. Vous pourriez par exemple souhaiter ajouter des animations de texte avancées. Dans ce tutoriel, nous allons vous montrer exactement comment faire cela. Ce tutoriel est un excellent tremplin si vous souhaitez apprendre à combiner Divi, en tant que framework, avec des bibliothèques Javascript externes. Nous allons créer l'intégralité de notre conception à l'aide des éléments et options intégrés de Divi, puis cibler notre module de texte avec les bibliothèques letterize.js et anime.js pour créer des animations de texte avancées. Une fois que vous aurez compris l'approche, vous serez capable de créer n'importe quel type d'animation de texte avancée que vous pouvez imaginer !

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page avancée des animations de texte

Pour mettre la main sur la mise en page d'animation de texte avancée gratuite, vous devrez d'abord la 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 !

1. Créer une conception de section de héros

Ajouter une nouvelle section

Espacement

Commencez par créer une nouvelle page ou en ouvrir une existante. Dans votre page, ajoutez une nouvelle section. Ouvrez les paramètres de la section et modifiez le rembourrage supérieur et inférieur sur différentes tailles d'écran.

• Rembourrage supérieur : 180 pixels (ordinateur de bureau), 100 pixels (tablette), 50 pixels (téléphone)
• Rembourrage inférieur : 180 pixels (ordinateur de bureau), 100 pixels (tablette), 50 pixels (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Espacement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et supprimez tout le rembourrage inférieur par défaut.

• Rembourrage inférieur : 0px

Ajouter le module de texte n°1 à la colonne

Ajouter une copie H1

Le seul module dont nous avons besoin dans cette ligne est un module de texte. Ajoutez du contenu H1 de votre choix.

Paramètres de texte H1

Passez à l'onglet conception du module et modifiez les paramètres du texte H1 comme suit :

• Police de titre : Montserrat
• Couleur du texte de l'en-tête : rgba(232,232,232,0.41)
• Taille du texte de l'en-tête : 80 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)
• Espacement des lettres d'en-tête : -10px (ordinateur de bureau), -4px (tablette), -3px (téléphone)
• Hauteur de la ligne de titre : 0,6 em (ordinateur de bureau), 0,7 em (tablette), 0,8 em (téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne juste en dessous de la précédente en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez la largeur maximale dans les paramètres de dimensionnement.

• Largeur maximale : 1680px

Espacement

Supprimez ensuite toute la marge inférieure et le rembourrage.

• Marge inférieure : 0px
• Rembourrage inférieur : 0px

Ajouter un module d'image à la colonne

Télécharger une illustration

Ensuite, ajoutez un module image et téléchargez l'illustration gratuite que vous pouvez trouver dans le dossier que vous avez pu télécharger au début de cet article.

Dimensionnement

Passez à l'onglet conception du module et forcez la pleine largeur sur l'image.

• Forcer la pleine largeur : Oui

Espacement

Ajoutez ensuite une marge inférieure négative.

• Marge inférieure : -12%

Animation

Et complétez les paramètres du module en ajoutant les paramètres d'animation suivants :

• Style d'animation : Fondu
• Délai d'animation : 3000 ms

Ajouter la ligne n° 3

Structure des colonnes

Passons à la ligne suivante et dernière. Utilisez la structure de colonnes suivante :

Espacement

Passez à l'onglet de conception de la ligne et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 10 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 3%
• Rembourrage droit : 3%

Boîte ombre

Ensuite, activez une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.06)

Animation

Et complétez les paramètres de la ligne en ajoutant l'animation suivante :

• Style d'animation : Fondu
• Délai d'animation : 3000 ms

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Il est temps d'ajouter des modules. Le premier module dont nous avons besoin est un module de texte avec un contenu de description.

Paramètres de texte

Passez à l'onglet conception du module et modifiez les paramètres de texte en conséquence :

• Police du texte : Lato
• Taille du texte : 18px
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 2,7 em

Ajouter un module de bouton à la colonne

Ajouter une copie

Le dernier module dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et modifiez les paramètres des boutons comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #171cff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Montserrat
• Style de police des boutons : majuscules

Espacement

Ensuite, appliquez les valeurs de remplissage suivantes dans les paramètres d'espacement :

• Rembourrage supérieur : 2%
• Rembourrage inférieur : 2%
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Boîte ombre

Complétez les paramètres du module en ajoutant l'ombre de boîte suivante :

• Position verticale de l'ombre de la boîte : 5px
• Force de propagation de l'ombre de la boîte : -2px
• Couleur de l'ombre : #171cff

2. Ajouter une classe CSS au titre

Ouvrez le module de texte n°1 et cliquez sur l'onglet Texte

Maintenant que nous avons tous les éléments de conception en place, il est temps d'ajouter les animations de texte avancées à notre titre. Ouvrez le module de texte contenant la copie H1 et sélectionnez l'onglet texte.

Ajouter un identifiant CSS à la balise H1

À l'intérieur du H1, ajoutez un identifiant CSS personnalisé.

• ID = "titreCopier"

3. Ajouter des bibliothèques de lettrage et d'anime

Ajouter un module de code à la colonne

Pour créer les animations, nous utilisons les bibliothèques letterize.js et anime.js. Pour ajouter ces bibliothèques, insérez un nouveau module de code dans la colonne de votre dernière ligne.

Ajouter les deux bibliothèques

Ensuite, ajoutez deux balises de script différentes contenant les sources suivantes qui renvoient aux bibliothèques :

• src = "https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"
• src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

4. Ajouter un code d'animation

Animation pour la lettre au niveau individuel

Dans la dernière partie de ce tutoriel, nous allons ajouter le code d'animation qui fait partie des bibliothèques letterize.js et anime.js. Pour obtenir l'effet que vous avez pu voir dans l'aperçu de cet article, nous allons appliquer deux types d'animations. La première animation est appliquée à chaque lettre individuellement et consécutivement. Ceci est réalisé avec la bibliothèque letterize.js. Cette bibliothèque, en combinaison avec la première partie du code ci-dessous, place chaque lettre de votre copie dans une plage distincte. Ces intervalles seront ensuite ciblés séparément tout au long du processus d'animation. Assurez-vous de placer le code ci-dessous entre les balises de script.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Chaque fonction d'ajout représente une animation dans une chronologie d'animations. Ces animations s'appliquent à chaque lettre à un niveau individuel. Vous pouvez modifier ces fonctions d'ajout comme vous le souhaitez, en ajouter de nouvelles ou supprimer les fonctions actuelles, assurez-vous simplement que la dernière fonction d'ajout est correctement fermée avec un ';' à la fin (comme vous pouvez le voir dans le code ci-dessus). Vous pouvez ajouter différentes propriétés CSS à l'intérieur de ces fonctions d'ajout. Vous pouvez en savoir plus sur les propriétés et leur utilisation dans les exemples de documentation anime.js. Dans ce didacticiel, nous avons volontairement ajouté plusieurs animations pour montrer comment fonctionne la chronologie, mais vous voudrez probablement utiliser quelque chose de plus subtil ou de plus court pour vos propres projets.

Animation pour la phrase

Une fois que vous avez ajouté la première partie de l'animation, qui cible chaque lettre individuellement, nous allons passer à la deuxième partie de notre animation. Cette partie cible la copie entière dans son ensemble. L'approche d'animation est la même que ci-dessus; nous plaçons le module entier dans une animation chronologique. Chaque fonction d'ajout représente une animation différente à l'intérieur de cette chronologie. Vous pouvez modifier ces fonctions d'ajout, en ajouter de nouvelles ou supprimer celles en cours. Assurez-vous de placer ce nouveau code avant la fin du code du script comme vous pouvez le remarquer dans l'écran d'impression ci-dessous.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Ajouter un CSS personnalisé pour Span

Maintenant, puisque nous avons créé une plage distincte pour chacune de nos lettres, nous devons modifier la propriété d'affichage de chaque plage pour permettre aux lettres d'apparaître les unes à côté des autres. Pour ce faire, nous allons ajouter du code CSS à notre module de code. Assurez-vous de placer le code entre les balises de style.

#headlineCopy span {
display: inline-block;
}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer des animations de texte avancées pour votre titre. Nous avons construit toute la conception dans Divi et combiné le framework avec les bibliothèques letterize.js et anime.js. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.