Comment créer des ombres d'images animées sur le défilement dans Divi

Dans le monde de la conception Web, nous considérons généralement les ombres comme quelque chose que nous pouvons ajouter dans Photoshop ou comme une propriété CSS (comme box-shadow ou text-shadow). Mais avec Divi, on peut sortir des sentiers battus (ou box-shadow). Avec seulement quelques ajustements aux options de filtre et d'effet de défilement intégrées de Divi, nous pouvons transformer n'importe quelle image en une ombre réaliste.

Dans ce tutoriel, nous allons vous montrer comment créer des ombres d'images animées au défilement dans Divi. L'astuce consiste à trouver une image PNG avec une forme unique afin qu'une fois l'image transformée, elle conserve la forme et ressemble à une ombre réaliste de l'image. Une fois que l'image/l'ombre est prête, nous pouvons ajouter quelques effets de défilement pour déplacer l'ombre pendant que l'utilisateur fait défiler. Cet effet inhabituel (mais familier) ajoutera un élément de design époustouflant qui apportera une nouvelle vie à votre site.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

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 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 de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible 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 :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi,

Partie 1 : Conception de la disposition de la section

Dans cette première partie, nous allons concevoir une disposition de section rapide pour compléter l'effet de défilement d'ombre d'image en mouvement.

Ajouter la ligne à deux colonnes

Pour commencer, ajoutez une ligne à deux colonnes à la section normale.

Ajouter le module de texte

Dans la colonne de gauche, ajoutez un nouveau module de texte. Cela servira de contenu de texte fictif.

Contenu du texte

Collez ensuite le code HTML suivant dans le contenu du corps :

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Mise en forme du texte

Sous l'onglet Conception, mettez à jour les paramètres comme suit :

• Taille du texte du texte : 16px
• Hauteur de la ligne de texte : 2 em

• Police du titre 2 : comfortaa
• Titre 2 Couleur du texte : #444235
• Titre 2 Taille du texte : 60 px (ordinateur de bureau), 40 px (tablette)

Ajouter un accent de conception d'image

Sous le module de texte, nous allons ajouter une image qui servira d'accent de conception au texte. Nous allons utiliser l'image d'une branche d'arbre du Holistic Healer Layout Pack. Ce sera la même image que nous utiliserons plus tard pour nos ombres d'images animées.

Ajouter une image

Ajoutez un nouveau module image sous le module texte.

Ensuite, téléchargez l'image.

Conception d'images

Sous l'onglet Conception, réduisez l'opacité de l'image à l'aide des paramètres de filtre.

• Opacité : 20%

Ensuite, déplacez l'image vers la gauche et vers le haut à l'aide de l'option de transformation suivante :

• Transformer traduire l'axe X : -20 %
• Transformer traduire l'axe des Y : - 90 %

Position de l'image

Donnez ensuite à l'image une position absolue.

• Position : Absolu

Partie 2 : Création des ombres de l'image en mouvement

Une fois le contenu fictif de la colonne de gauche terminé, nous sommes prêts à commencer à créer l'image et ces ombres d'images en mouvement.

Ajouter l'image principale

Ajoutez un nouveau module d'image dans la colonne de droite.

Ensuite, téléchargez une image d'au moins 800 pixels de large. Puisque nous allons ajouter une ombre d'image en mouvement d'une branche d'arbre, il est logique d'utiliser une image de quelque part à l'extérieur.

Retirez ensuite la marge inférieure par défaut sous le module comme suit :

• Marge inférieure : 0px

Création d'une ombre d'image en mouvement 1

Nous sommes maintenant prêts à créer la première ombre d'image en mouvement. L'idée de base est d'utiliser une image au format de fichier PNG afin que l'arrière-plan transparent de l'image ne s'affiche pas. Ensuite, nous utiliserons les effets de filtre pour ajuster la luminosité, l'opacité et le flou pour transformer l'image en une ombre. Étant donné que l'image PNG a une forme unique, l'ombre conservera également la même forme.

Commençons par ajouter la même image PNG d'une branche du Holistic Healer Layout Pack.

C'est ici…

Ajoutez le module image sous l'image dans la colonne de droite.

Ensuite, téléchargez l'image dans le module.

Filtres d'images

Sous l'onglet Conception, mettez à jour les filtres pour que l'image ressemble à une ombre.

• Luminosité : 0%
• Opacité : 25%
• Flou : 8px

Position de l'image

Donnez ensuite à l'ombre de l'image une position absolue afin qu'elle se trouve au-dessus de l'image principale ci-dessus.

Effets de défilement d'image

Pour déplacer l'ombre de l'image, mettez à jour les effets de défilement suivants.

Sous l'onglet Mouvement horizontal…

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 0 %)
• Mid Offset : -3 (à 50 %)
• Décalage de fin : -6 (à 100 %)

Sous l'onglet Mise à l'échelle vers le haut et vers le bas…

• Activer la mise à l'échelle vers le haut et vers le bas : OUI
• Échelle de départ : 160 % (à 0 %)
• Échelle moyenne : 160 % (à 50 %)
• Échelle de fin : 160 % (à 100 %)

(REMARQUE : cela agrandira l'ombre à 160 % et la conservera pendant tout l'effet de défilement. Mais n'hésitez pas à ajuster les pourcentages d'échelle à différents points.)

Sous l'onglet Rotation…

• Activer le mouvement horizontal : OUI
• Rotation de départ : 30° (à 0%)
• Rotation moyenne : 0° (à 50%)
• Rotation finale : -30° (à 100%)

Vérification du résultat jusqu'à présent

À ce stade, nous pouvons voir le résultat jusqu'à présent en ajoutant temporairement la marge suivante à la section afin que nous puissions faire défiler la page en direct.

• Marge : 70vh haut, 70vh bas

Voici à quoi ressemble l'effet jusqu'à présent.

Cacher le débordement de colonne

Afin de contenir l'ombre de l'image dans la même colonne de l'image principale, ouvrez les paramètres de la colonne 2 et mettez à jour les options de débordement comme suit :

• Débordement horizontal : masqué
• Débordement vertical : caché

Vérifiez maintenant le résultat.

Création d'une image animée Shadow 2

Une fois notre première ombre d'image en place, il est facile d'en créer une autre. Tout ce que nous avons à faire est de dupliquer l'ombre de l'image existante et de mettre à jour les effets de défilement. Les deux ombres d'image en mouvement créeront un bel effet de dévoilement de l'image.

Dupliquer l'ombre d'une image existante

À l'aide du modal Calques, dupliquez l'image de l'ombre.

Mettre à jour les effets de défilement

Ouvrez ensuite les paramètres du doublon et mettez à jour les effets de défilement comme suit :

Sous l'onglet Mouvement horizontal…

• Activer le mouvement horizontal : OUI
• Décalage de départ : 0 (à 0 %)
• Décalage moyen : 3 (à 50 %)
• Décalage de fin : 6 (à 100 %)

Sous l'onglet Rotation…

• Activer le mouvement horizontal : OUI
• Rotation de départ : 210° (à 0%)
• Rotation moyenne : 180° (à 50%)
• Rotation finale : 150° (à 100 %)

Voici le résultat…

Ajout d'un effet de zoom avant à l'image principale

Comme le débordement de la colonne est masqué, nous pouvons redimensionner l'image principale lors du défilement pour créer un subtil zoom avant (ou effet Ken Burns) qui complétera les ombres de l'image en mouvement.

Pour ce faire, ouvrez les paramètres de l'image principale et mettez à jour les éléments suivants :

Sous l'onglet Mise à l'échelle vers le haut et vers le bas…

• Activer la mise à l'échelle vers le haut et vers le bas : OUI
• Échelle de départ : 100 % (à 0 %)
• Échelle moyenne : 115 % (à 50 %)
• Échelle finale : 130 % (à 100 %)

Cela créera un effet de zoom au fur et à mesure que l'utilisateur fait défiler.

Résultat final

Et voici le résultat final.

Dernières pensées

J'espère que ces ombres d'images animées ont été aussi amusantes à construire pour vous qu'elles l'ont été pour moi. C'est un élément de conception simple mais étonnant qui a le potentiel pour des ajouts encore plus créatifs. N'hésitez pas à explorer l'ajout de différentes couleurs, modes de fusion et autres effets de défilement pour personnaliser le design.

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

À votre santé!