skip to Main Content

Comment créer une animation de défilement d’arrière-plan de texte coloré avec Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

La création d’une animation de défilement d’arrière-plan de texte est un moyen unique d’ajouter des textures animées colorées au texte de votre site Web pendant qu’un utilisateur fait défiler la page. Avec Divi, le processus est étonnamment facile une fois que vous avez appris quelques techniques clés.

Dans ce didacticiel, nous n’utiliserons que la puissance des paramètres intégrés de Divi pour créer 3 conceptions uniques qui comportent une animation de défilement d’arrière-plan de texte coloré. Nous vous montrerons même comment créer une version sombre de chaque design pour un tout nouveau look.

Commençons!

Résultat Possible

Voici un aperçu des conceptions que nous allons construire aujourd’hui.

Conception 1: Dégradé d’arrière-plan du texte avec effet de défilement horizontal

Cette première conception comportera un effet de défilement horizontal qui anime un module de séparation coloré derrière un module de texte avec le filtre d’écran.

Ajouter une colonne

Pour commencer, ajoutez une ligne d’une colonne à la section par défaut.

Ajouter un module de texte

Ajoutez ensuite un nouveau module de texte à la colonne.

Contenu

Pour le contenu de la colonne, collez le code HTML suivant dans la zone de contenu:

Mise en forme du texte

Mettez ensuite à jour la conception du texte comme suit:

  • Couleur d’arrière-plan: #ffffff
  • Text Font Style: TT
  • Couleur du texte: # 000000
  • Taille du texte: 100 px (ordinateur de bureau), 40 px (téléphone)
  • Espacement des lettres texte: 0.15em
  • Hauteur de la ligne de texte: 1em
  • Alignement du texte: centre
  • Police de titre: Merriweather
  • Poids de la police de titre: gras
  • Style de police de titre: TT
  • Alignement du texte de l’en-tête: centre
  • Couleur du texte de l’en-tête: # 000000
  • Taille du texte de l’en-tête: 200 px (ordinateur de bureau), 80 px (téléphone)
  • Espacement des lettres de titre: 0.15em
  • Hauteur de la ligne de titre: 1em

Rembourrage et filtre

Maintenant, nous devons ajouter un peu de remplissage et un filtre d’écran au module de texte. Le filtre est nécessaire pour que cette conception fonctionne car c’est ce qui permet aux couleurs / modules d’arrière-plan de s’afficher derrière le texte.

Pour ajouter le remplissage et le filtre, mettez à jour les éléments suivants:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • rembourrage: 15px haut, 20px bas
  • Blend Mode: Screen

Remarque: Le mode de fusion d’écran fonctionne mieux avec du texte noir sur fond blanc. Si nous voulions utiliser du texte blanc sur un fond noir, nous utiliserions le mode de fusion Multiplier.

Séparateur supérieur et inférieur

Une fois notre module de texte terminé, ajoutons quelques séparateurs (au-dessus et un en dessous du module de texte) pour un élément de conception supplémentaire.

Ajouter un séparateur inférieur

Ajoutez un nouveau module de séparation sous le module de texte.

Paramètres de séparation supérieurs

Ouvrez les paramètres du séparateur et sélectionnez NON pour afficher le séparateur.

effets de défilement de fond de texte divi

Mettez ensuite à jour l’arrière-plan et donnez au diviseur le même mode de fusion que le module de texte comme suit:

  • Couleur de fond dégradé gauche: # 000000
  • Couleur de fond dégradé à droite: #ffffff
  • Gradient Direction: 90deg
  • Start Position: 48%
  • End Position: 0%
  • Blend Mode: Screen

Mettez ensuite à jour la hauteur du séparateur sur l’écran du téléphone comme suit:

  • Hauteur: 15px (téléphone)

Ajouter un séparateur supérieur

Pour créer le séparateur supérieur, dupliquez le séparateur inférieur précédent et faites-le glisser au-dessus du module de texte à l’aide de la zone d’affichage des calques.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Inversez ensuite les couleurs sur le fond dégradé.

Mettre à jour les paramètres de ligne

Une fois nos séparateurs supérieur et inférieur en place, mettez à jour les paramètres de ligne comme suit:

  • Largeur de gouttière: 1 (pour retirer les marges inférieures entre les modules)
  • Largeur maximale: 600 pixels (pour conserver une conception cohérente sur le bureau et la tablette)
  • Alignement des lignes: centre
  • Rembourrage: 0px haut, 0px bas
  • Débordement horizontal: caché
  • Débordement vertical: caché

Créer un séparateur pour la couleur d’arrière-plan du texte animé

Le dernier élément de cette première conception est le diviseur que nous utiliserons pour animer la couleur d’arrière-plan du texte sur le défilement. Pour ce faire, ajoutez un nouveau module de séparation sous le séparateur inférieur.

Sélectionnez ensuite NON pour afficher le séparateur.

Paramètres du diviseur d’arrière-plan

Mettez à jour le séparateur avec un arrière-plan dégradé comme suit:

  • Couleur de fond dégradé gauche: # e02b20
  • Couleur de fond dégradé à droite: # 8300e9
  • Gradient Direction: 90deg
  • Start Position: 30%
  • End Position: 70%

Nous voulons que la hauteur du séparateur soit suffisamment élevée pour colorer tout notre texte dans le module de texte et les séparateurs supérieur et inférieur. Pour cette conception, définissez la hauteur sur 400 px.

  • Hauteur: 400px

Donnez ensuite au diviseur une position absolue pour le positionner directement au-dessus des autres modules. Utilisez l’index Z pour placer le séparateur derrière les autres modules.

  • Position: Absolute
  • Index Z: -1
Effets de défilement du diviseur d’arrière-plan

Avec le séparateur en position, tout ce que nous avons à faire est de déplacer le séparateur derrière le texte en utilisant les effets de défilement de Divi. Pour cette conception, nous allons simplement ajouter un mouvement horizontal sur le défilement.

Mettez à jour les éléments suivants:

Sous l’onglet Mouvement horizontal…

Bureau

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

Téléphone

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • Décalage de départ: 3
  • Décalage de fin: -3

Veillez également à définir le déclencheur de l’effet de mouvement au milieu de l’élément:

  • Déclenchement d’effet de mouvement: milieu de l’élément

Ajouter un espacement de section

Pour créer un espace de défilement temporaire pour tester la conception, ajoutez ce qui suit à la section:

  • Marge: 80vh en haut, 80vh en bas

Dernières pensées

Les conceptions d’animation d’arrière-plan de texte présentées dans cet article fonctionneraient en fait parfaitement comme conception statique sans le mouvement d’ajout sur le défilement. Cependant, les effets de défilement supplémentaires prennent vraiment la conception à un tout nouveau niveau. N’hésitez pas à expérimenter avec plus de couleurs et d’effets!

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

À votre santé!

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer