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, nous pouvons penser en dehors de la boîte (ou de l’ombre de la boîte). Il suffit de quelques ajustements aux options de filtre et d’effet de défilement intégrées à Divi pour transformer n’importe quelle image en une ombre plus vraie que nature.

Dans ce tutoriel, nous allons vous montrer comment créer des ombres d’images en mouvement sur le scroll dans Divi. L’astuce consiste à trouver une image PNG avec une forme unique afin que, une fois l’image transformée, elle conserve sa forme et ressemble à une ombre réaliste de l’image. Une fois l’image/ombre prête, nous pouvons ajouter quelques effets de défilement pour déplacer l’ombre au fur et à mesure que l’utilisateur la fait défiler. Cet effet inhabituel (mais familier) ajoutera un élément de conception étonnant qui donnera une nouvelle vie à votre site.

C’est parti !

Coup d’œil rapide

Voici un aperçu du design que nous allons créer dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur le design de ce tutoriel, vous devez d’abord le télécharger en utilisant le bouton ci-dessous. Pour avoir accès au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.

Pour importer la mise en page de 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 d’importation.

divi notification box
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

expanding corner tabs
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Pour commencer, vous devez 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 en front-end (visual builder).
  3. Choisissez l’option « Build From Scratch ».

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

Partie 1 : Conception de la mise en page de la section

Dans cette première partie, nous allons concevoir une mise en page de section rapide pour compléter l’effet de défilement de l’image mobile.

Ajouter la rangée de deux colonnes

Pour commencer, ajoutez une rangée de deux colonnes à la section normale.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajoutez le module de texte

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Contenu du texte

Collez ensuite le HTML suivant à l’intérieur du contenu du corps :

Notre mariage

Votre contenu va ici. Modifiez ou supprimez ce texte en ligne ou dans les paramètres du module Contenu. Vous pouvez également styliser chaque aspect de ce contenu dans le module Paramètres de conception et même appliquer une CSS personnalisée à ce texte dans le module Paramètres avancés.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Conception du texte

Sous l’onglet design, mettez à jour les paramètres comme suit :

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

  • Police de l’en-tête 2 : comfortaa
  • Couleur du texte de l’en-tête 2 : #444235
  • Taille du texte de l’en-tête 2 : 60px (ordinateur de bureau), 40px (tablette)

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter une image pour accentuer le design

Sous le module de texte, nous allons ajouter une image qui servira d’accent design au texte. Nous allons utiliser l’image d’une branche d’arbre du Holistic Healer Layout Pack. Il s’agit de la même image que nous utiliserons plus tard pour nos ombres en mouvement.

Ajouter une image

Ajoutez un nouveau module image sous le module texte.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Téléchargez ensuite l’image.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Conception de l’image

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ensuite, déplacez l’image vers la gauche et vers le haut en utilisant l’option de transformation suivante :

  • Transformation de l’axe X : -20%
  • Transformation de l’axe des Y : -90 %

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Position de l’image

Donnez ensuite à l’image une position absolue.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Partie 2 : création des ombres de l’image animée

Une fois que le contenu fictif de la colonne de gauche est terminé, nous sommes prêts à commencer à créer l’image et les ombres de l’image animée.

Ajouter l’image principale

Ajoutez un nouveau module image à la colonne de droite.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Téléchargez ensuite une image d’au moins 800 pixels de large. Comme nous allons ajouter une ombre mobile d’une branche d’arbre, il est logique d’utiliser une image de l’extérieur.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Création de l’ombre d’image mobile 1

Nous sommes maintenant prêts à créer la première ombre mobile. L’idée de base est d’utiliser une image au format PNG afin que le fond transparent de l’image ne soit pas visible. Ensuite, nous utiliserons les effets de filtre pour ajuster la luminosité, l’opacité et le flou afin de transformer l’image pour qu’elle ressemble à une ombre. Comme l’image PNG a une forme unique, l’ombre gardera également la même forme.

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

La voici..

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Téléchargez ensuite l’image dans le module.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Filtres d’image

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

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Effets de défilement de l’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%)
  • Décalage moyen : -3 (à 50%)
  • Décalage final : -6 (à 100%)

Sous l’onglet Scaling Up and Down..

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

(REMARQUE : cela agrandira l’ombre à 160 % et la maintiendra à ce niveau pendant toute la durée de l’effet de défilement. Mais n’hésitez pas à ajuster les pourcentages d’échelle à différents endroits)

Sous l’onglet Rotation..

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

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

À ce stade, nous pouvons visualiser le résultat obtenu jusqu’à présent en ajoutant temporairement la marge suivante à la section afin de pouvoir faire défiler la page en direct.

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

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Voici à quoi ressemble l’effet obtenu jusqu’à présent.

Masquage du débordement de la colonne

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

  • Débordement horizontal : Caché
  • Débordement vertical : Caché

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Regardez maintenant le résultat.

Création de l’ombre mobile d’image 2

Une fois notre première ombre portée en place, il est facile d’en créer une autre. Il suffit de dupliquer l’ombre d’image existante et de mettre à jour les effets de défilement. Les deux ombres mobiles créeront un magnifique effet de dévoilement de l’image.

Duplication de l’ombre d’image existante

À l’aide de la fenêtre modale Calques, dupliquez l’image d’ombre.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Mettez à jour les effets de défilement

Ouvrez ensuite les paramètres de la duplication 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 final : 6 (à 100%)

Sous l’onglet Rotation..

  • Activer le mouvement horizontal : OUI
  • Rotation de départ : 210° (à 0%)
  • Rotation centrale : 180° (à 50%)
  • Fin de la rotation : 150° (à 100%)

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Voici le résultat..

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

Le débordement de la colonne étant masqué, nous pouvons mettre à l’échelle l’image principale lors du défilement pour créer un subtil effet de 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 Scaling Up and Down..

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

Cela créera un effet de zoom avant lorsque l’utilisateur fera défiler l’image.

divi moving image shadows
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Résultat final

Et voici le résultat final.

Réflexions finales

J’espère que ces ombres en mouvement ont été aussi amusantes à construire pour vous qu’elles l’ont été pour moi. Il s’agit d’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, de modes de fusion et d’autres effets de défilement pour vous approprier le design.

J’ai hâte de lire vos commentaires.