Comment combiner les effets de survol avec les arrière-plans CSS Parallax dans Divi

L'utilisation de CSS Parallax avec des images d'arrière-plan dans Divi nous permet de créer des effets de survol étonnamment uniques. La parallaxe est l'une des nombreuses façons dont nous pouvons ajouter de la vie à nos sites Web. Et en combinant la parallaxe avec la vaste gamme d'options de survol de Divi, nous donnons encore plus vie au contenu.

Dans ce didacticiel, nous montrerons que vous pouvez concevoir rapidement et facilement des effets de survol d'arrière-plan de parallaxe CSS uniques dans Divi. Aucun plugin ou codage personnalisé nécessaire !

Commençons.

Aperçu

Voici un aperçu des effets de survol de fond de parallaxe CSS que nous allons concevoir dans ce didacticiel.

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 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 :

1. Le thème Divi installé et actif
2. Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
3. Images à utiliser pour le contenu fictif

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

Partie 1 : Création d'un effet de survol Breakout Parallax dans Divi

Tout d'abord, créez une section régulière avec une ligne à une colonne.

Avant d'ajouter un module, ouvrez les paramètres de la section et ajoutez une image d'arrière-plan à l'aide de la parallaxe CSS.

Assurez-vous que l'image fait au moins 1920px de large. La conception fonctionne bien avec une image d'arrière-plan plus sombre avec beaucoup de texture. J'en utilise un de notre pack de mise en page de café qui est disponible à partir de Divi Builder.

Ajoutez ensuite un peu de rembourrage à la section comme suit :

Rembourrage: haut 10vw, bas 10vw

Ajouter un module de présentation

Une fois l'arrière-plan et le rembourrage de la section en place, ajoutez un module de présentation à la ligne.

Mettez ensuite à jour le contenu du texte de présentation avec quelques phrases de corps de texte. Vous pouvez y conserver le titre par défaut.

Cliquez ensuite pour utiliser une icône et sélectionnez l'icône de café pour le texte de présentation.

Une fois le contenu prêt, mettez à jour les paramètres de conception comme suit :

Couleur de l'icône : #ffffff
Taille de la police de l'icône : 50px
Alignement du texte : au centre
Police du titre : Oswald
Style de police de titre TT
Couleur du texte du titre : #ffffff
Espacement des lettres du titre : 2px
Police de caractère : Nunito
Couleur du corps du texte : #ffffff
Espacement des lettres du corps : 1px
Remplissage : 30 px en haut, 30 px en bas, 30 px à gauche, 30 px à droite

Ajuster la largeur de ligne

Une fois le texte de présentation conçu, passez aux paramètres de ligne et ajustez la largeur maximale.

Largeur maximale : 80 %

Paramètres de colonne

Pour cet exemple, nous allons activer l'effet de survol au niveau de la colonne. Cela vous permet d'utiliser plusieurs modules pour créer le contenu, même si nous n'utilisons qu'un seul module de présentation pour le moment.

Pour que cet effet de survol de parallaxe fonctionne, nous devons ajouter la même image d'arrière-plan à la colonne que nous avons utilisée dans notre section. Nous devrons également utiliser la même méthode de parallaxe CSS sur l'image d'arrière-plan de la colonne.

Ouvrez les paramètres de colonne et ajoutez cette même image d'arrière-plan à l'aide de la parallaxe CSS.

Vous ne pourrez voir aucune différence entre l'image d'arrière-plan de la colonne et l'image d'arrière-plan de la section car elles utilisent toutes deux la parallaxe CSS qui fixe essentiellement l'image exactement au même endroit sur la page Web. Cependant, vous verrez la différence une fois l'effet de survol en place.

Continuez à mettre à jour les paramètres de conception de colonne comme suit :

Rembourrage: haut 4vw, bas 4vw
Coins arrondis : 10px

Ensuite, donnez à la colonne une ombre de boîte qui ne s'affiche qu'au survol comme suit :

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou d'ombre de la boîte: 36px
Couleur de l'ombre (par défaut) : rgba(0,0,0,0)
Couleur de l'ombre (survol): rgba(0,0,0,0.72)

Passons maintenant aux options de transformation et mettons à jour les styles de transformation suivants au survol :

Échelle de transformation (survol): 105%

Cela agrandira légèrement la colonne (et son contenu) pour créer l'effet de sortir légèrement de l'image d'arrière-plan.

Transformer l'axe Y de translation (survol): -2,5%

Cela déplace légèrement la colonne vers le haut en survol pour créer un léger déplacement asymétrique.

Origine de la transformation : 100 % 50 % (en bas au centre)

Cela commence l'effet de mise à l'échelle à partir de l'origine centrale inférieure qui, lorsqu'il est combiné avec la valeur de translation, ressemble à un effet de charnière subtil.

Voici l'effet de survol de parallaxe CSS jusqu'à présent.

Ouvrez maintenant les paramètres de ligne et dupliquez la colonne deux fois pour créer un total de trois colonnes chacune avec les mêmes effets de présentation et de survol en place.

Résultat final

Voici la conception finale. Remarquez comment les images d'arrière-plan de parallaxe sont masquées par défaut lors du défilement de la page. Ensuite, ils apparaissent lorsque vous survolez chacune des colonnes lorsqu'elles apparaissent. Vous pouvez également voir la parallaxe fonctionne toujours sur la colonne lorsque vous faites défiler la page tout en survolant la colonne. C'est un effet de survol subtil, mais extrêmement unique.

Ajouter une rotation à l'effet de survol

Nous pouvons également ajouter une rotation à l'effet de survol de parallaxe CSS qui ajoute une belle touche au design. Ouvrez simplement chacun des paramètres de colonne et mettez à jour les éléments suivants :

Transformation Rotation Axe Z (survol): 5deg

Si vous voulez le mélanger, vous pouvez donner à la colonne du milieu une rotation de -5 degrés.

Voici le résultat final.

Et voici le même design avec une image de fond plus claire et un texte plus sombre.

Partie 2 : Création d'un effet de survol de parallaxe de loupe dans Divi

Dupliquez la section du premier dessin, puis ouvrez les paramètres de la section et remplacez l'image d'arrière-plan par une nouvelle. J'utilise celui de notre pack de mise en page de jeux vidéo car il met vraiment en évidence l'effet de survol de parallaxe de grossissement.

Mettre à jour les paramètres de ligne

Nous allons avoir besoin d'espace supplémentaire pour cette conception, alors ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur de gouttière : 1
Largeur : 100 %
Largeur maximale : 98 %

Après cela, passez à l'onglet Contenu et supprimez deux des colonnes pour qu'il n'en reste qu'une.

Paramètres de colonne

Pour cette conception, nous devons appliquer l'effet de survol au niveau du module au lieu du niveau de la colonne, nous devons donc réinitialiser les styles par défaut pour la colonne. Pour ce faire, faites un clic droit sur l'élément de la colonne et sélectionnez « réinitialiser les styles d'élément ».

Mettre à jour le module de présentation

Une fois les paramètres de colonne restaurés aux styles par défaut, ouvrez les paramètres du module de présentation et ajoutez la même image d'arrière-plan de parallaxe css que celle qui a été ajoutée à la section.

Dimensionnement

Afin de créer un module circulaire, nous devons d'abord lui donner une largeur et une hauteur correspondantes comme suit :

Largeur : 300px
Alignement du module : centre
Hauteur : 300px

Frontière

Pour compléter l'effet circulaire, nous devons mettre à jour les coins arrondis et lui donner une légère bordure.

Coins arrondis : 50 %
Largeur de la bordure : 1px
Couleur de la bordure : rgba(255,255,255,0.12)

Effet de survol de l'ombre de la boîte

Ensuite, donnez au texte de présentation une ombre de boîte au survol comme suit :

Box Shadow : voir capture d'écran
Force du flou d'ombre de la boîte: 36px
Couleur de l'ombre (par défaut) : rgba(0,0,0,0)
Couleur de l'ombre (survol): rgba(0,0,0,0.7)

Transformer les effets de survol

Une fois votre ombre de boîte en place, mettez à jour les options de transformation comme suit :

Origine de la transformation (par défaut) : 50 % 0 % (centre gauche)

Cela garantira que le texte de présentation ne s'étendra pas à l'extérieur de la page une fois qu'il sera placé à l'extrême gauche de la rangée de trois colonnes.

Échelle de transformation (survol) : 130 %

Cela agrandira le texte de présentation et agrandira vraiment l'image d'arrière-plan de parallaxe pour un effet de survol cool.

Dupliquer la colonne

Une fois le texte de présentation terminé, nous pouvons dupliquer la colonne pour créer trois colonnes, chacune avec le même module de présentation.

Ouvrez les paramètres de ligne et dupliquez la colonne deux fois pour un total de trois colonnes.

Mettre à jour l'origine de la transformation

Étant donné que nos modules de présentation ont tous l'origine de transformation définie sur "centre gauche", nous devons ajuster cela pour les présentations dans les colonnes centrale et droite afin qu'elles soient mises à l'échelle à partir de la position appropriée.

Ouvrez les paramètres du module de présentation dans la colonne 2 et mettez à jour les éléments suivants :

Origine de la transformation : 50 % 50 % (centre au centre)

Ensuite, ouvrez les paramètres du module de présentation dans la colonne 3 et mettez à jour les éléments suivants :

Origine de la transformation : 50 % 100 % (centre droit)

Résultat final

Découvrez maintenant le résultat final. Remarquez comment l'effet agrandit vraiment l'image d'arrière-plan de parallaxe CSS derrière le texte de présentation. Et lorsque vous faites défiler vers le bas tout en survolant le texte de présentation, cela ressemble à l'effet d'une loupe.

En fait, c'est tellement cool que nous pourrions vouloir le laisser comme style par défaut au lieu de simplement dans l'état de survol.

Dernières pensées

J'espère que les exemples de cet article ont fait couler un peu votre créativité afin que vous puissiez explorer des designs encore plus cool et des effets de survol à combiner avec la parallaxe CSS. Le processus d'installation est vraiment simple, mais les possibilités sont apparemment infinies.

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

À votre santé!