Les animations de texte améliorent l'interactivité d'un site web et rendent l'expérience de l'utilisateur plus attrayante. Ce guide explique comment créer une animation étape par étape, animation de texte ligne par ligne en fondu enchaîné en utilisant Elementor pour apporter des effets dynamiques et visuellement attrayants à votre site web.

Pourquoi utiliser des animations en fondu ?

Les animations en fondu enchaîné rendent votre contenu plus vivant et permettent d'attirer l'attention sur les éléments essentiels. En révélant le texte ligne par ligne, vous évitez de submerger les utilisateurs avec trop d'informations et vous créez une expérience de lecture plus structurée.

Étapes à suivre pour créer une animation en fondu ligne par ligne

Installez et activez Elementor

Avant d'utiliser l'appareil La fonction assurez-vous que le plugin est installé et activé :

1. Connectez-vous à votre tableau de bord WordPress.
2. Naviguez jusqu'à Plugins > Ajouter un nouveau Plugin.
3. Rechercher Elementor et cliquez sur Installer maintenant.

4. Une fois installé, cliquez sur Activer.

Elementor Pro permet d'accéder à des fonctions d'animation plus avancées, qui seront étudiées ultérieurement.

Ajouter un widget texte

• Ouvrir ou créer une nouvelle page/un nouvel article dans WordPress et modifiez-le avec Elementor.
• Dans le panneau des widgets, faites glisser le Éditeur de texte à l'emplacement souhaité sur votre page.

Ce widget sert de base à l'effet de fondu enchaîné.

Appliquer l'animation intégrée d'Elementor

• Sélectionnez le widget de texte.
• Dans le cadre de la gauche Dans le panneau, cliquez sur l'icône Avancé tabulation.

• Veuillez faire défiler la page jusqu'à l'adresse suivante Effets de mouvement et développez-la.

• Dans le cadre de la Animation de l'entrée sélectionnez Fondu enchaîné.

Cela permet d'appliquer une animation de base en fondu enchaîné. Les étapes suivantes permettent de créer l'effet ligne par ligne.

Mise en œuvre de l'effet de fondu enchaîné ligne par ligne

Pour obtenir un fondu ligne par ligne, rupture le texte en plusieurs segments et animez chacun d'entre eux individuellement.

• Diviser le texte en plusieurs lignes: Divisez le contenu en lignes ou en phrases distinctes et placez chacune d'entre elles dans son widget de texte.
• Définir des animations individuelles: Répétez les étapes ci-dessus pour chaque widget de texte afin d'appliquer la fonction Fondu enchaîné l'animation, ce qui garantit la cohérence.
• Ajouter un délai d'animation: Définissez des délais différents pour chaque widget de texte. Par exemple :
  • Ligne 1 : délai de 0,2 seconde
  • Ligne 2 : Délai de 0,4 seconde
  • Ligne 3 : Délai de 0,6 seconde

L'échelonnement des retards crée un effet de fondu enchaîné régulier.

Exemple de texte :

Supposons que vous souhaitiez que le texte suivant apparaisse ligne par ligne :

"Notre mission est de fournir de la qualité. Nous donnons la priorité à la satisfaction du client. Ensemble, nous innovons pour l'avenir."

Décomposition étape par étape :

1. Ligne 1:
   • Texte : "Notre mission est de fournir de la qualité.
   • Ajouter un Éditeur de texte dans Elementor.
   • Saisissez cette phrase comme texte.
   • Appliquer le Fondu enchaîné et fixez le délai à 0,2 seconde.

2. Ligne 2:
   • Texte : "Nous donnons la priorité à la satisfaction du client".
   • Ajoutez-en un autre Éditeur de texte widget.
   • Saisissez cette phrase comme texte.
   • Appliquer le Fondu enchaîné et fixez le délai à 0,4 seconde.

3. Ligne 3:
   • Texte : "Ensemble, nous innovons pour l'avenir".
   • Ajoutez-en un autre Éditeur de texte widget.
   • Saisissez cette phrase comme texte.
   • Appliquer le Fondu enchaîné et fixez le délai à 0,6 seconde.

Chaque phrase s'efface séquentiellement lorsque l'utilisateur fait défiler la page ou lorsque l'animation est déclenchée, créant ainsi un effet de transition en douceur.
Cette méthode garantit que chaque ligne de texte apparaît individuellement, avec un léger décalage entre chaque ligne, afin d'améliorer la lisibilité et de créer un effet visuel dynamique.

Effets de fondu-enchaîné avancés avec Elementor Pro

Elementor Pro offre plus de contrôle, y compris des effets déclenchés par le défilement pour une expérience dynamique.

• Activer les effets de défilement: Dans le Effets de mouvement Dans cette section, activez Effets de défilement pour déclencher des animations lorsque l'utilisateur fait défiler la page.

• Ajouter de la transparence: Dans les paramètres de défilement, sélectionnez Fondu enchaîné sous la transparence afin que le texte apparaisse progressivement lors du défilement.

• Ajuster la vitesse et la direction: Réglez avec précision la vitesse et la direction du défilement afin d'en améliorer l'interactivité.

Prévisualisation et publication

Après avoir configuré les animations, prévisualisez la page pour vous assurer que tout fonctionne comme prévu :

• Cliquez sur le bouton Avant-première en bas à gauche de l'éditeur Elementor.
• Faites défiler la page pour confirmer que chaque ligne s'affiche en fondu de manière séquentielle.
• Si l'effet est correct, cliquez sur Publier pour mettre la page en ligne.

Conclusion

En conclusion, la création d'animations de texte ligne par ligne avec Elementor est un excellent moyen d'améliorer l'engagement des utilisateurs en présentant le contenu d'une manière claire et visuellement attrayante. En synchronisant soigneusement les animations et en ajoutant des délais, vous pouvez vous assurer que les utilisateurs absorbent l'information à un rythme confortable, évitant ainsi une surcharge d'informations. Pour ceux qui souhaitent davantage de contrôle, Elementor Pro offre des fonctionnalités supplémentaires telles que des animations déclenchées par le défilement et d'autres options de personnalisation. Après avoir tout configuré, prévisualisez les résultats et publiez votre page pour créer une expérience interactive et fluide pour vos visiteurs.