Comment animer des lettres pour des conceptions de texte uniques dans Divi

L'animation est devenue une partie courante de l'expérience utilisateur pour les sites Web modernes. Outre le fait qu'il a l'air cool, il peut également ajouter un élément interactif subtil qui engage l'utilisateur en donnant vie au contenu. Les effets d'animation intégrés de Divi vous permettent d'animer à peu près n'importe quel élément d'une page avec différents styles d'animation.

Dans ce tutoriel, je vais vous montrer comment animer des lettres pour certains designs de texte uniques dans Divi. En mettant des lettres individuelles dans un module de texte, vous pouvez cibler l'animation de chaque lettre avec des styles d'animation, une durée et des délais différents qui feront ressortir le contenu de manière créative. Cette technique est purement à des fins de conception car les lettres qui composent le contenu ne seront pas très conviviales pour le référencement. Cependant, les lettres animées vous permettent de partager votre histoire avec les utilisateurs de manière étonnante.

Commençons.

Aperçu

Téléchargez GRATUITEMENT la mise en page des exemples de conception d'animation de lettres

Pour mettre la main sur les dessins d'animation de lettres 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 ?

Commencer

Pour ce tutoriel, il vous suffit de Divi. Nous construirons les conceptions à partir de zéro en utilisant le constructeur Divi sur le front-end. Pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez un clic pour utiliser le Divi Builder. Ensuite, choisissez l'option « construire à partir de zéro » et cliquez pour créer sur le front-end.

Vous êtes maintenant prêt à concevoir !

Construire la mise en page pour animer des lettres

Ajout de la section, de la ligne et de la colonne

Allez-y et créez une nouvelle section régulière avec une ligne à une colonne.

Avant de commencer à ajouter nos modules de texte (qui contiendront des lettres blanches), ajoutons une image de fond sombre à la section. Ouvrez les paramètres de la section et ajoutez une image d'arrière-plan. J'utilise une image d'arrière-plan abstraite de la mise en page prédéfinie de la page de destination de la société d'investissement.

Création de blocs de lettres individuels avec des modules de texte

Avant de pouvoir commencer à ajouter une animation aux lettres, nous devons d'abord créer un module de texte séparé pour chaque lettre que nous voulons ajouter. Pour cet exemple, nous allons créer le texte « Divi Design ». Étant donné que cette phrase de texte comprend 11 espaces de caractères (y compris l'espace entre les lettres, nous devrons ajouter 11 modules de texte différents.

Allez-y et ajoutez un module de texte à la colonne.

Dans la zone de contenu, ajoutez la première lettre de votre texte qui dans ce cas est la lettre "d".

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

• Police du texte : Rubik
• Style de police de texte : TT
• Texte Couleur du texte : #ffffff
• Taille du texte : 80px (ordinateur de bureau), 50px (tablette), 30px (téléphone)
• Hauteur de la ligne de texte : 1,6 em
• Orientation du texte : centre

Ajoutez ensuite une animation au module de texte comme suit :

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Durée de l'animation : 600 ms
• Délai d'animation : 100 ms
• Opacité de démarrage de l'animation : 100 %

Dupliquez le module de texte et mettez à jour le contenu avec la lettre "i". Augmentez ensuite le délai d'animation de 100 ms comme suit :

• Délai d'animation : 200 ms

Dupliquez le module de texte et mettez à jour le contenu avec la lettre « v ». Augmentez ensuite le délai d'animation à 300 ms.

• Délai d'animation : 300 ms

Dupliquez le module de texte et mettez à jour le contenu avec la lettre "i". Augmentez ensuite le délai d'animation à 400 ms.

• Délai d'animation : 400 ms

Pour ce prochain module de texte, nous voulons ajouter un espace vide. Dupliquez le module de texte et ajoutez le code html suivant dans la zone de contenu :

 

Pas besoin de mettre à jour le délai d'animation pour celui-ci.

Dupliquez ensuite le module de texte et mettez à jour le contenu avec la lettre « d ». C'est la première lettre du mot "design". Augmentez ensuite le délai d'animation à 500 ms.

• Délai d'animation : 500 ms

Continuez le processus de duplication du module de texte et d'augmentation du délai d'animation de 100 ms pour chacune des lettres restantes qui épellent le mot « conception ».

• Lettre « e » : délai d'animation 600ms
• Lettre « s » : délai d'animation 700ms
• Lettre « i » : délai d'animation 800 ms
• Lettre "g": délai d'animation 900ms
• Lettre « n » : délai d'animation 1000ms

Voici à quoi ressemble le design jusqu'à présent.

Ajout d'une propriété Flex pour aligner les modules horizontalement

Pas tout à fait le résultat que nous recherchons encore. Mais tout ce que nous devons faire comme par magie pour rassembler le design est d'ajouter un petit extrait de css à la colonne de ligne. Pour ce faire, ouvrez les paramètres de ligne et ajoutez le CSS personnalisé suivant à l'élément principal de la colonne.

display: flex;

La propriété display: flex aligne tous les modules horizontalement dans un tableau flexible qui s'adaptera parfaitement aux différentes largeurs de navigateur. Et puisque les modules sont dans une rangée sur une colonne, la conception ne se cassera pas sur les tablettes ou les appareils mobiles.

Nous devons également ajouter une largeur de gouttière personnalisée pour supprimer la marge inférieure sous les lettres et ajouter un rembourrage supérieur et inférieur à la rangée afin que les lettres aient de la place pour s'animer.

• Largeur de gouttière : 1
• Rembourrage personnalisé : haut 5vw, bas 5vw

Voici le résultat final.

Ajouter différents styles d'animation

Avec cette configuration, vous pouvez facilement ajouter de nouveaux styles d'animation pour des effets totalement uniques. Pour ce faire, vous pouvez profiter de la fonction multisélection de Divi pour mettre à jour tous les modules à la fois. Sur le front-end, maintenez la touche Maj enfoncée et cliquez sur le premier et le dernier module de texte. Ouvrez ensuite les paramètres de l'un des modules sélectionnés.

Cela ouvrira le modal des paramètres de l'élément qui vous permettra de mettre à jour les paramètres de tous les modules sélectionnés. Nous ne voulons pas modifier le délai d'animation car nous voulons conserver l'effet en cascade sur chacune des lettres. Cependant, nous pouvons mettre à jour les autres options d'animation de différentes manières pour créer des résultats complètement uniques.

Je suggère de dupliquer la section avant de tester une nouvelle animation afin de pouvoir conserver les exemples précédents.

Voici quelques exemples.

Animation de texte avec zoom arrière

Pour animer des lettres avec un effet de zoom inversé, mettez à jour les paramètres des éléments (les paramètres de tous les modules) avec les éléments suivants :

• Style d'animation : Zoom
• Direction d'animation : Centre
• Intensité de l'animation : 200 %

Voici le résultat final.

Animation de texte Rolling Wave

Pour animer des lettres avec un effet de vague roulante, mettez à jour les paramètres des éléments (les paramètres de tous les modules) avec les éléments suivants :

• Style d'animation : Rotation
• Direction de l'animation : vers le haut
• Intensité de l'animation : 100 %

Voici le résultat final.

Animation de texte Domino

Pour animer du texte avec un effet domino, mettez à jour les paramètres des éléments (les paramètres de tous les modules) avec les éléments suivants :

• Style d'animation : Retourner
• Direction de l'animation : Gauche
• Intensité de l'animation : 100 %

Voici le résultat final.

Animation de texte debout

Pour animer du texte avec un effet domino, mettez à jour les paramètres des éléments (les paramètres de tous les modules) avec les éléments suivants :

• Style d'animation : Plier
• Direction de l'animation : vers le haut
• Intensité de l'animation : 100 %

Ajoutez ensuite une perspective pour créer un élément de conception 3D en ajoutant le css suivant à l'élément de colonne principal sous les paramètres de ligne.

Élément de colonne principal CSS :

perspective: 1000px;

Voici le résultat final.

Animer des lettres à l'aide d'une combinaison de directions d'animation

Si vous voulez être plus créatif, vous pouvez animer des lettres en utilisant une combinaison d'effets d'animation. Pour cet exemple, je vais utiliser une combinaison de directions d'animation et d'intensité pour le style de diapositive. Cela nous donnera une présentation tout à fait unique.

Voici comment procéder.

Tout d'abord, dupliquez l'une des sections que nous avons construites précédemment afin que nous puissions avoir une longueur d'avance sur le processus de conception.

Supprimez ensuite les 4 premiers modules de texte pour que seul le texte « design » soit affiché.

Paramètres de section

Ensuite, puisque nous voulons que certaines des lettres de l'animation commencent en dehors de la fenêtre de section, nous devrons ajouter un petit extrait de css aux paramètres de la section comme suit :

overflow: hidden;

Cela gardera les lettres cachées jusqu'à ce qu'elles entrent dans la section.

Paramètres de ligne

Maintenant, pour nous assurer que nos modules de texte (lettres) restent centrés, nous devons ajouter le css suivant aux paramètres de ligne :

display:flex;
justify-content: center;

Paramètres communs du module de texte

À l'aide de la sélection multiple, mettez à jour les six modules de texte avec les paramètres d'élément suivants :

• Marge personnalisée : 3% à gauche, 3% à droite
• Largeur de la bordure : 1px
• Couleur de la bordure : #ffffff

• Style d'animation : diapositive
• Durée de l'animation : 2000 ms
• Délai d'animation : 100 ms
• Intensité de l'animation : 300 %

Cela prend en charge les paramètres d'animation de base qui seront communs à tous les modules de texte. Maintenant, nous pouvons ajuster les paramètres d'animation pour eux individuellement.

Paramètres individuels du module de texte

À ce stade, nous pouvons nous amuser à peaufiner les paramètres du module de texte individuel pour changer la direction de l'animation pour chacun. Cela nous permettra d'animer des lettres d'une manière tout à fait unique. Pour chaque lettre, mettez à jour la direction et l'intensité de l'animation comme suit :

• Lettre D
  Direction de l'animation : vers le haut
• Lettre E
  Direction de l'animation : vers le bas
• Des lettres
  Direction de l'animation : Gauche
  Intensité de l'animation : 80 %
• Lettre I
  Direction de l'animation : à droite
  Intensité de l'animation : 80 %
• Lettre G
  Direction de l'animation : vers le bas
• Lettre N
  Direction de l'animation : vers le haut

Voici la conception finale.

Et voici à quoi cela ressemble sur mobile.

Dernières pensées

Je pense qu'il est prudent de dire que Divi a beaucoup de façons d'animer des lettres une fois que vous avez la bonne configuration. Et je dois dire qu'il était assez difficile d'arrêter de jouer avec les paramètres d'animation lors de la construction de ces exemples. Il y a tellement de variantes possibles à essayer! Quoi qu'il en soit, j'espère que cela vous donnera un peu d'inspiration pour votre prochain projet. Si quoi que ce soit, vous voudrez peut-être le construire juste pour le plaisir.

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

À votre santé!