Comment animer des images d'arrière-plan de parallaxe avec les effets de défilement de Divi
Publié: 2020-03-05La combinaison d'effets de défilement avec des images d'arrière-plan de parallaxe peut créer un design assez magique pour vos visiteurs. Étant donné que l'effet de parallaxe met déjà l'image en mouvement lorsque l'utilisateur fait défiler la page, l'ajout d'effets de défilement supplémentaires (comme le mouvement horizontal et la rotation) peut vraiment différencier le design et ouvrir des portes pour des mises en page plus créatives.
Dans ce tutoriel, nous allons expliquer comment animer des images d'arrière-plan de parallaxe à l'aide des effets de défilement de Divi. Nous utiliserons la même image d'arrière-plan sur plusieurs modules de texte pour concevoir une mise en page unique permettant d'afficher un court bloc de texte.
Commençons.
Aperçu
Téléchargez GRATUITEMENT la mise en page de l'image de fond de parallaxe animée
Pour mettre la main sur la mise en page de ce tutoriel, vous devrez d'abord la télécharger à l'aide du 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 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.
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 :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création des images d'arrière-plan animées de parallaxe avec les effets de défilement de Divi
Ajout de la colonne
Pour commencer, créez une ligne à une colonne.
Création du module de texte
Ajoutez ensuite un module de texte à la colonne.
Contenu du texte
Ajoutez la lettre "p" au contenu du corps.
Ajouter une image d'arrière-plan de parallaxe au module de texte
Ensuite, ajoutez une image d'arrière-plan de parallaxe au module de texte comme suit :
- Image d'arrière-plan : insérer une image
- Utiliser l'effet de parallaxe : OUI
- Méthode de parallaxe : CSS
Conception du texte
Sous l'onglet Conception, mettez à jour les éléments suivants :
- Police du texte : Montserrat
- Style de police de texte : TT
- Texte Couleur du texte : #ffffff
- Taille du texte : 100px (bureau), 70px (téléphone)
- Espacement des lettres du texte : 5px (téléphone)
- Hauteur de la ligne de texte : 1 em
- Alignement du texte : au centre
- Remplissage : 250px en haut, 250px en bas
Le rembourrage est ce qui crée la hauteur nécessaire pour exposer l'image d'arrière-plan de parallaxe.
Paramètres de ligne
Maintenant que notre module de texte est terminé, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Utiliser une largeur de gouttière personnalisée : OUI
- Largeur de gouttière : 1
- Largeur : 100 %
Paramètres de la colonne 1
Cliquez ensuite pour ouvrir les paramètres de la colonne.
Sous l'onglet Avancé, mettez à jour les effets de défilement suivants :
Sous l'onglet Effets de mouvement horizontal…
- Activer Horizontal : OUI
- Décalage de départ : -2 (à 0 % de la fenêtre)
- Décalage moyen : 0 (à 40 %-60 %)
- Décalage de fin : -2 (à 100 %)
Sous l'onglet Effets de rotation…
- Activer la rotation : OUI
- Rotation de départ : 20 deg (à 0 % de la fenêtre d'affichage)
- Rotation moyenne : 0 degré (à 40 % - 60 %)
- Rotation finale : -20 deg (à 100 %)
Création de la colonne 2
Même si nous avons commencé avec une mise en page à une colonne, nous allons créer un total de 5 colonnes. Il est simplement plus facile de dupliquer la colonne avec tout son contenu et ses paramètres pour créer les quatre suivants nécessaires à la conception.
Dupliquez toute la première colonne (avec le module de texte) pour créer la deuxième colonne.
Mise à jour des effets de défilement de la colonne 2
Mettez ensuite à jour les effets de défilement pour la colonne 2 comme suit :
Sous l'onglet Effets de rotation…
- Rotation de départ : -20 degrés
- Rotation finale : 20 degrés
Création de la colonne 3
Pour créer la colonne 3, dupliquez la colonne 2.
Mise à jour des effets de défilement de la colonne 3
Mettez ensuite à jour les paramètres de la colonne 3 comme suit :
Sous l'onglet Effets de mouvement horizontal…
- Activer le mouvement horizontal : NON
Sous l'onglet Effet de rotation…
- Rotation de départ: 20deg
- Rotation finale : 10 degrés
Création de la colonne 4
Pour créer la colonne 4, dupliquez la colonne 2, puis faites-la glisser vers le bas.
Mise à jour des effets de défilement de la colonne 4
Ouvrez ensuite les paramètres de la colonne 4 et mettez à jour les éléments suivants :
Sous l'onglet Effets de mouvement horizontal…
- Décalage de départ : 2
- Décalage de fin : 2
Sous l'onglet Effets de rotation…
- Rotation de départ : -15 deg
- Rotation finale : 20 degrés
Création de la colonne 5
Enfin, pour créer la colonne 5, dupliquez la colonne 4.
Mise à jour des effets de défilement de la colonne 5
Mettez ensuite à jour les paramètres de la colonne 5 comme suit :
Sous l'onglet Effets de rotation…
- Rotation de départ : 15 deg
- Rotation finale : -15 deg
Mise à jour des lettres du module de texte
Ensuite, utilisez l'option de texte en ligne pour modifier les lettres dans chaque colonne afin qu'elles épellent collectivement le mot « pouvoir ».
Mise à jour de la conception du module de texte moyen
Ouvrez les paramètres du module de texte dans la colonne 3 et mettez à jour les éléments suivants :
- Police du texte : Montserrat Subrayada
- Texte Couleur du texte : #e0e722
- Taille du texte du texte : 150 px (ordinateur de bureau)
- Hauteur de la ligne de texte : 100 px
Mettre à jour le contenu du premier module de texte pour mobile
Afin d'afficher un seul module de texte sur mobile, nous devons mettre à jour le module de texte dans la colonne 1 avec le contenu suivant sur l'affichage de la tablette et du téléphone :
Contenu du corps sur tablette et téléphone :
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>
Mettre à jour les paramètres de la colonne 1
Ensuite, ouvrez les paramètres de la colonne 1 et mettez à jour les éléments suivants :
- Coins arrondis (bureau) : 100 % en haut à gauche
- Coins arrondis (tablette et téléphone) : 40 % en haut à gauche, 40 % en bas à droite
Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'affichage de la tablette de l'élément principal :
width: 100% !important;
Cela garantira que la colonne couvre toute la largeur de la ligne sur l'écran de la tablette et du téléphone.
Masquer le reste des colonnes sur l'écran de la tablette et du téléphone
Maintenant que la colonne 1 s'étendra sur toute la largeur de la ligne sur tablette et téléphone, nous pouvons masquer/désactiver le reste des colonnes sur tablette et téléphone. Pour ce faire, ouvrez les paramètres des colonnes 2 à 5 et désactivez la visibilité de chacune des colonnes sur téléphone et tablette.
Mettre à jour les paramètres de la colonne 5
Ouvrez ensuite les paramètres de la colonne 5 et ajoutez un coin arrondi complémentaire comme suit :
- Coins arrondis (bureau) : 100 % en bas à droite
Ajout d'une conception d'arrière-plan à la section
Pour terminer la conception, mettez à jour les paramètres de la section avec une conception d'arrière-plan comme suit :
- Couleur d'arrière-plan : #e0e722
- Style de séparateur supérieur : voir la capture d'écran
- Couleur du séparateur supérieur : #222222
- Hauteur du séparateur supérieur : 650 px (ordinateur de bureau), 500 px (tablette et téléphone)
- Style de séparateur inférieur : voir la capture d'écran
- Couleur du séparateur inférieur : #222222
- Hauteur du séparateur inférieur : 500 px (ordinateur de bureau), 400 px (tablette et téléphone)
Résultat final
Voici la conception finale sur le bureau.
Et voici la conception de secours sur l'écran de la tablette et du téléphone.
Dernières pensées
Les images d'arrière-plan de parallaxe se combinent avec des effets de défilement de manière vraiment magique. Le seul inconvénient de l'utilisation d'images d'arrière-plan de parallaxe est le manque de prise en charge du mobile, mais avec les paramètres réactifs fournis par Divi, nous pouvons facilement créer une solution de secours. J'espère que ce design élégant ajoutera de l'inspiration à votre journée.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!