Comment combiner des animations et de la parallaxe dans Divi pour des designs uniques
Publié: 2019-08-07Que nous préparions un repas ou que nous concevions un site Web, les ingrédients seuls ne garantiront pas un plat savoureux ou un beau site. C'est la façon dont nous combinons ces éléments ensemble qui fait toute la différence. Dans ce tutoriel, je vais vous montrer comment combiner animation et parallaxe d'image d'une manière que vous n'avez peut-être jamais envisagée auparavant. Si vous ne le savez pas déjà, l'animation est une fonctionnalité intégrée de Divi qui peut être ajoutée à n'importe quel élément Divi lors du chargement de la page. La parallaxe est également une option Divi qui vous permet d'ajouter un mouvement unique à vos images d'arrière-plan lors du défilement.
Aujourd'hui, nous allons utiliser les paramètres de conception intégrés de Divi pour combiner les animations et la parallaxe de toutes sortes de manières créatives. La combinaison fonctionne de manière assez magique pour créer une belle mise en page d'images de parallaxe animées qui ont l'air géniales lorsque vous faites défiler la page.
Commençons!
Aperçu
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs 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 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 aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Images à utiliser pour le contenu fictif. Vous pouvez trouver les images utilisées pour ce tutoriel dans le Life Coach Divi Layout Pack.
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
L'idée de base
L'idée de base derrière ce concept de conception est centrée sur l'utilisation de la parallaxe CSS sur les images d'arrière-plan. En raison du fonctionnement de la parallaxe CSS, l'image de parallaxe restera fixe et remplira automatiquement la fenêtre du navigateur, quelle que soit la taille de l'élément qui l'utilise. La nature fixe de l'image vous permet d'utiliser la même image de parallaxe sur plusieurs éléments dans Divi, puis de déplacer ces éléments à l'aide d'une animation. Lorsque l'animation s'installe, les images d'arrière-plan de parallaxe utilisées correspondent et fonctionnent comme prévu lors du défilement de la page.
Partie 1 : Création de l'animation Divi et de la conception de parallaxe (version 1)
Créez une nouvelle section avec une rangée à deux colonnes (1/2 1/2).
Avant d'ajouter nos modules, faisons quelques ajustements à la section et à la ligne.
Mettre à jour les paramètres de section et de ligne
Tout d'abord, ouvrez les paramètres de la section et supprimez le remplissage par défaut comme suit :
Remplissage : 0px en haut, 0px en bas
Ensuite, ouvrez les paramètres de la ligne et donnez à la ligne une image d'arrière-plan de parallaxe.
Image d'arrière-plan : [télécharger l'image]
Utiliser l'effet de parallaxe : OUI
Méthode de parallaxe : CSS
Ici, la méthode de parallaxe doit être définie sur CSS pour que la conception fonctionne.
Largeur : 100 %
Largeur maximale : 100 %
Rembourrage : 10vw haut, 10vw gauche, 10vw droite
Ajouter le module de texte avec un arrière-plan de parallaxe correspondant
Nous sommes maintenant prêts à commencer à ajouter nos modules de texte à la conception. Le premier module de texte est la clé de cette conception. En appliquant exactement la même image d'arrière-plan et la même parallaxe CSS au module de texte, nous pouvons faire preuve de créativité avec l'animation pour un effet tout à fait unique.
Allez-y et ajoutez un nouveau module de texte à la colonne 1.
Mettez ensuite à jour les paramètres du module de texte comme suit :
Contenu du corps :
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Ensuite, donnez au module de texte la même image d'arrière-plan de parallaxe css que vous avez ajoutée à la ligne.
Image d'arrière-plan : [télécharger l'image]
Utiliser l'effet de parallaxe : OUI
Méthode de parallaxe : CSS
Police du texte : Fira Sans
Poids de la police de texte : léger
Texte Couleur du texte : #ffffff
Taille du texte du texte : 70px
Hauteur de la ligne de texte : 1 em
Style de police de lien : Souligné (U)
Couleur du texte du lien : #ffffff (par défaut), #881e67 (survol)
Taille du texte du lien : 30px
Espacement des lettres des liens : 2px
Rembourrage : 20 % en haut, 20 % en bas, 10 % à gauche, 10 % à droite
Largeur de la bordure : 20 px
Couleur de la bordure : #ffffff
Ajoutez ensuite l'animation suivante au module de texte :
Style d'animation : diapositive
Direction de l'animation : à droite
Durée de l'animation : 1500 ms
Intensité de l'animation : 80 %
Opacité de démarrage de l'animation : 20 %
Voyons l'effet jusqu'à présent…
Remarquez comment l'image d'arrière-plan du module de texte animé se pose sur l'emplacement correspondant de l'arrière-plan de la ligne. C'est parce qu'ils partagent tous les deux la même image d'arrière-plan avec l'effet de parallaxe CSS.
Ajout du deuxième module de texte avec une image d'arrière-plan True Parallax
À ce stade, nous sommes prêts à ajouter notre prochain module de texte. Ce prochain aura une image de fond différente utilisant le véritable effet de parallaxe. Nous allons également lui donner une animation.
Ajoutez un nouveau module de texte à la colonne 2.
Ensuite, mettez à jour le contenu du corps avec le mot « mon blog ».
Ajoutez ensuite une image d'arrière-plan avec la méthode True Parallax.
Image d'arrière-plan : [télécharger l'image]
Utiliser l'effet de parallaxe : OUI
Méthode de parallaxe : vraie parallaxe
Police du texte : Fira Mono
Style de police de texte : TT
Texte Alignement du texte : centre
Texte Couleur du texte : #ffffff
Espacement des lettres du texte : 10px
Largeur : 320px
Largeur maximale : 320px
Alignement du module : Centre
Marge : (bureau): -5vw en haut, 4vw en bas
Marge (tablette et téléphone): 3vw top
Remplissage : 70 pixels en haut, 70 pixels en bas
Largeur de la bordure : 20 px
Couleur de la bordure : #ffffff
Style d'animation : diapositive
Sens de l'animation : vers le bas
Délai d'animation : 200 ms
Création du troisième module de texte avec une nouvelle image d'arrière-plan de parallaxe
Pour créer le troisième module de texte, dupliquez le module de texte que vous venez de créer dans la colonne 2.
Ensuite, nous allons garder l'image d'arrière-plan la même mais nous allons mettre à jour l'effet de parallaxe avec la méthode de parallaxe CSS.
Largeur : 240px
Largeur maximale : 240 pixels
Alignement du module : à gauche
Marge : 0px en bas
Remplissage : 170 px en haut, 170 px en bas, 95 px à gauche, 95 px à droite
La largeur personnalisée et le rembourrage droit et gauche sont utilisés pour créer l'affichage de texte vertical qui va bien avec la conception plus longue du module.
Mettez ensuite à jour la direction de l'animation vers le haut au lieu du bas.
Direction d'animation : UP
Résultat final
Voyons maintenant le résultat final.
Partie 2 : Création de l'animation et de la conception de parallaxe (version 2)
Cette prochaine conception va ajouter une animation unique en chargeant l'image d'arrière-plan de parallaxe pour la ligne après l'animation initiale des modules. Pour ce faire, nous devrons utiliser une ligne distincte strictement pour l'image d'arrière-plan de parallaxe CSS qui se déplacera derrière le contenu. Et puisque notre arrière-plan de section sera exposé initialement, nous pouvons ajouter une couleur d'arrière-plan personnalisée pour notre contenu avant l'animation de la ligne.
Voici comment procéder.
Tout d'abord, déployez le mode d'affichage filaire. Dupliquez ensuite la ligne contenant vos modules de texte. Vous aurez maintenant deux rangées identiques. Ensuite, supprimez les modules de texte à l'intérieur de la rangée supérieure. Tout ce que nous voulions vraiment faire, c'était prendre une longueur d'avance sur la conception de notre rangée du haut.
Ensuite, mettez à jour les paramètres de la ligne supérieure comme suit :
Hauteur : 900px (bureau), 2000px (tablette et téléphone)
Remplissage : 0px en haut, 0px en bas
Style d'animation : diapositive
Direction de l'animation : à droite
Durée de l'animation : 1250 ms
Délai d'animation : 1800 ms
Nous donnons à la ligne une hauteur définie car la ligne vide n'aura pas de hauteur par défaut. Vous devez donc vous assurer que la hauteur de la ligne est suffisante pour couvrir le contenu de votre deuxième ligne avec le contenu. Nous avons également donné à la ligne une animation avec un délai afin qu'elle glisse derrière le contenu après l'apparition des modules de texte.
Chevauchement des deux rangées
Maintenant, tout ce que nous avons à faire est d'amener la ligne du bas vers le haut en utilisant une marge négative afin qu'elle chevauche la ligne du haut avec notre animation d'arrière-plan.
Ouvrez les paramètres de la ligne du bas et mettez à jour la marge comme suit :
Marge : -900px top (bureau), -2000px (tablette et téléphone)
Retirez ensuite l'image d'arrière-plan avec la méthode de parallaxe css pour la ligne, car nous utiliserons à la place l'image d'arrière-plan de la ligne supérieure.
Voici la conception jusqu'à présent. Remarquez l'animation d'arrière-plan retardée dans la première ligne et comment l'arrière-plan de parallaxe du module de texte de la colonne 1 lui correspond parfaitement.
Ajout d'une couleur d'arrière-plan de section
Pour donner aux modules de texte une couleur d'arrière-plan initiale avant l'animation de ligne, vous pouvez donner une couleur d'arrière-plan à la section.
Ouvrez les paramètres de la section et ajoutez les éléments suivants :
Couleur d'arrière-plan du dégradé gauche : rgba (136,30,103,0,61)
Dégradé de fond à droite : #881e67
Type de dégradé : Radial
Résultat final
Voyons maintenant le résultat final.
Combo Mode de fusion et Animation en option
Vous pouvez également être encore plus créatif en ajoutant un mode de fusion à la deuxième ligne et en ajoutant une animation de zoom qui fonctionnera en tandem avec les animations du module.
Mode de fusion : Luminosité
Style d'animation : Zoom
Voici le résultat final.
Et voici à quoi cela ressemble sur mobile.
Dernières pensées
J'espère que vous avez appris quelques choses en cours de route alors que nous explorions des façons uniques de combiner des images d'animation et de parallaxe. Les résultats sont définitivement uniques et je suis sûr que vous pouvez facilement modifier cette configuration pour créer d'innombrables autres combinaisons qui seront superbes sur votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!