La création d’une animation dynamique de déplacement de souris en 3D est un moyen amusant et passionnant pour les utilisateurs de s’engager avec le contenu Web sur votre site Divi. La conception est dynamique en ce sens que l’animation se déplacera avec votre curseur. Normalement, nous animons les objets au survol ou au clic. Mais dans ce tutoriel, nous allons présenter une façon créative d’animer des objets lors du déplacement de la souris (déplacement du curseur à différents endroits de la fenêtre du navigateur). Mais ce n’est pas tout. Nous allons également vous montrer comment combiner l’animation du déplacement de la souris avec un effet de survol qui fait apparaître des éléments dans un design 3D qui donnera vie à votre contenu d’une toute nouvelle manière.
Pour le construire, nous utiliserons le constructeur Divi pour l’essentiel du design. Ensuite, nous utiliserons quelques CSS personnalisés et JQuery pour créer la fonctionnalité d’animation.
Une fois terminé, vous aurez un design impressionnant pour présenter de nouveaux produits ou services sur votre prochain projet !
C’est parti.
Coup d’œil rapide
Voici un aperçu du design que nous allons créer dans ce tutoriel.
Vous pouvez également consulter ce codepen pour voir une démonstration en direct de l’effet.
Téléchargez la mise en page gratuitement
Pour mettre la main sur les modèles de ce tutoriel, vous devez d’abord le télécharger à l’aide du bouton ci-dessous. Pour avoir accès au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le 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.
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
Pour commencer, vous devez 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 modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création d’un effet dynamique d’animation 3D de la souris dans Divi
Partie 1 : Créer le conteneur de survol et la carte avec une ligne et une colonne
Pour cet effet d’animation, la ligne sera la cible qui activera l’animation 3D au survol. Nous pouvons l’appeler le conteneur de survol. La colonne servira de carte qui s’animera avec ses éléments enfants lors du survol de la ligne.
Mais avant de créer la ligne et la colonne, nous allons styliser la section.
La section
Pour commencer, ouvrez les paramètres de la section normale par défaut et mettez à jour les éléments suivants :
- Couleur d’arrière-plan : rgba(68,55,99,0.1)
- Rembourrage : 7vh en haut, 7vh en bas
La rangée (conteneur de survol)
Ajoutez une rangée d’une colonne à la section.
Paramètres de la rangée
Sous les paramètres de la rangée, mettez à jour les éléments suivants :
- Largeur de la gouttière : 1
- Largeur : 100
- Largeur maximale : 70% (ordinateur de bureau), 60% (tablette), 50% (téléphone)
- Rembourrage : 7vh, haut, 7vh bas, 5vw gauche, 5vw droite
REMARQUE : L’astuce consiste à créer une ligne avec suffisamment d’espace autour de la colonne pour que vous puissiez activer l’animation de déplacement de la souris de la carte en déplaçant le curseur dans toute la zone de la ligne (et non de la colonne). De cette façon, vous disposez de plus d’espace pour déplacer la carte. Vous souhaitez également laisser suffisamment d’espace autour de la ligne pour pouvoir déplacer le curseur en dehors de la ligne (dans l’espace de section entourant la ligne) afin de désactiver l’animation et de permettre aux éléments de la carte de se remettre en place.
Dans l’onglet avancé, donnez à la rangée une classe personnalisée :
- Classe CSS : et-hover-container
Ajoutez ensuite le CSS suivant à l’élément principal :
display:flex ; align-items:center ; justify-content:center ;
Ce petit extrait maintient la colonne centrée verticalement et horizontalement dans la rangée (nécessaire car nous allons donner à notre colonne une largeur maximale définie).
La colonne (ou la carte)
Après avoir mis à jour la ligne, ouvrez les paramètres de la colonne pour créer le style de notre carte comme suit :
- Couleur d’arrière-plan : #ffffff
- Rembourrage : 7vh en haut, 7vh en bas, 5% à gauche, 5% à droite
- Coins arrondis : 30px
- Ombre de la boîte : voir la capture d’écran
- Position verticale de l’ombre de la boîte : 0px
- Intensité du flou de l’ombre de la boîte : 80px
- Couleur de l’ombre : rgba(0,0,0,0,0.2)
Sous l’onglet Avancé, donnez à la colonne une classe personnalisée :
- Classe CSS : et-mousemove-card
Ajoutez ensuite ce CSS personnalisé à l’élément principal :
max-width : 600px ;
Veillez ensuite à définir les propriétés de débordement sur « visible ».
- Débordement horizontal : visible
- Débordement vertical : visible
REMARQUE : Donner à la colonne une largeur maximale de 600px permet de conserver une conception plus cohérente sur des navigateurs de tailles différentes et d’augmenter l’espace de survol autour de la colonne pour le conteneur (ou la ligne) de survol. Le rayon de la bordure (coins arrondis) que nous avons ajouté masquera le débordement. Nous devons donc définir le débordement sur visible. Si nous ne le faisons pas, l’animation ne fonctionnera pas comme prévu.
Partie 2 : création des éléments de la carte
#1 L’arrière-plan circulaire avec le logo
Pour le premier élément de notre carte, nous allons ajouter un arrière-plan circulaire comprenant un logo qui sera placé derrière notre image de vélo.
Ajoutez un nouveau module de texte à la colonne.
Retirez le texte par défaut afin que le contenu du corps soit vide.
Ajoutez ensuite un fond en dégradé :
- Fond dégradé gauche Color : #443763
- Couleur d’arrière-plan dégradé à droite : #ea3900
En plus du fond dégradé, ajoutez un logo pour l’image de fond.
- Image d’arrière-plan : [ajoutez une image de logo en png d’environ 60px par 60px]
- Taille de l’image d’arrière-plan : Taille réelle
Sous l’onglet « Design », mettez à jour les éléments suivants :
- Largeur : 160px (ordinateur de bureau), 150px (tablette), 80px (téléphone)
- Hauteur : 160px (ordinateur de bureau), 150px (tablette), 80px (téléphone)
- Coins arrondis : 50%
Les valeurs de largeur et de hauteur correspondantes et le rayon de bordure de 50 % nous donnent la forme de cercle que nous recherchons.
Sous l’onglet Avancé, mettez à jour la position comme suit :
- Position : Absolue
- Emplacement : Centre supérieur
- Décalage vertical : 15
#2 L’image de la carte
Pour créer l’image du produit (dans ce cas, un vélo), ajoutez un nouveau module image sous le module texte précédent.
Téléchargez ensuite l’image dans le module. Assurez-vous qu’il s’agit d’une image au format png avec un arrière-plan transparent. J’utilise l’image de vélo de notre pack de mise en page pour la réparation de vélos.
Sous l’onglet « Design », mettez à jour les éléments suivants :
- Alignement de l’image : Centre
- Largeur : 90
- Marge : 4vh en bas
Sous l’onglet Avancé, donnez à l’image une classe personnalisée :
#3 L’en-tête de la carte
Une fois notre image en place, ajoutez un nouveau module de texte sous celle-ci pour créer l’en-tête de la carte.
Dans le contenu du corps du nouveau module de texte, collez le HTML d’en-tête H2 suivant :
La Vélo Divi
Sous l’onglet design, mettez à jour ce qui suit :
- Heading 2 Font : Bebas Neue
- Alignement du texte de l’en-tête 2 : centre
- Couleur du texte de l’en-tête 2 : #443763
- Taille du texte Heading 2 : 75px (ordinateur de bureau), 60px (tablette), 45px (téléphone)
- Espacement des lettres du Heading 2 : 0.05em
- Marge : 4vh en bas
Sous l’onglet Avancé, ajoutez une classe personnalisée :
- Classe CSS : et-card-heading
#4 Le texte d’information de la carte
L’utilisation de modules de texte distincts pour l’en-tête et le texte d’information nous permettra d’ajouter différents effets d’animation 3D à chacun d’eux. Pour créer le texte d’information sous le titre, ajoutez un nouveau module de texte sous le module de texte du titre.
Ensuite, ajoutez le contenu suivant dans le corps :
Le seul et unique vélo Divi
(par Elegant Themes)
.
Sous l’onglet design, mettez à jour ce qui suit :
- Poids de la police du texte : Semi Bold
- Taille du texte : 18px (ordinateur de bureau), 16px (tablette et téléphone)
- Hauteur de la ligne de texte : 1.8em
- Alignement du texte : centre
- Marge : 4vh
Donnez ensuite au module de texte une classe personnalisée :
#5 Le bouton de la carte
Pour créer le bouton de la carte, ajoutez un nouveau module bouton sous le module texte d’information.
Dans la modale de paramétrage du bouton, mettez à jour le texte du bouton.
- Texte du bouton : faire une offre
Sous l’onglet « Design », donnez au bouton le style suivant :
- Utiliser des styles personnalisés pour le bouton : YES
- Taille du texte du bouton : 25px (ordinateur de bureau), 20px (tablette), 16px (téléphone)
- Couleur du texte du bouton : #ffffff
- Couleur d’arrière-plan du bouton : #443763
- Largeur de la bordure du bouton : 0px
- Rayon de la bordure du bouton : 30px
- Espacement des lettres du bouton : 0.1em
- Police du bouton : Bebas Neue
- Padding (bureau) : 0.5em haut, 0.5em bas, 3em gauche, 3em droite
- Remplissage (téléphone) : 0.5em haut, 0.5em bas, 2em gauche, 2em droite
Puis donnez au bouton une classe personnalisée :
Résultat jusqu’à présent
Voici le résultat de la conception jusqu’à présent.
Il ne nous manque plus qu’un peu de code personnalisé.
Partie 3 : Ajout du code personnalisé (CSS et JQuery)
Maintenant que notre conception est terminée, nous pouvons ajouter le code CSS et JQuery nécessaire pour créer l’effet dynamique d’animation 3D de la souris sur la carte/colonne et les éléments de la carte.
Pour ce faire, ajoutez un module de code sous le module de bouton.
Collez ensuite le CSS personnalisé suivant dans la zone de code en veillant à envelopper le CSS dans les balises de style.
/*addition d'une perspective à la ligne pour une perspective 3D des éléments enfants*/
.et-hover-container {
perspective : 1000px ;
}
/*preserve-3d nécessaire pour l'effet 3d des éléments de la carte*/
.et-mousemove-card {
transform-style : preserve-3d ;
transition : all 100ms linear !important ;
}
/*fonction de temporisation et durée de la transition pour les éléments de carte*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition : all 750ms ease-out !important ;
}
/*transformer les styles pour les éléments de carte*/
.et-card-image.transform-3d {
transform : translateZ(150px) rotateZ(10deg) !important ;
}
.et-card-heading.transform-3d {
transform : translateZ(150px) !important ;
}
.et-card-info.transform-3d {
transform : translateZ(50px) !important ;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform : translateZ(150px) rotateX(20deg) !important ;
}
Sous la feuille de style CSS, collez le code JQuery suivant en veillant à l’insérer dans les balises de script.
jQuery(document).ready(function ($) {
//Éléments
var $hoverContainer = $(".et-hover-container") ;
var $mousemoveCard = $(".et-mousemove-card") ;
var $cardImage = $(".et-card-image") ;
var $cardHeading = $(".et-card-heading") ;
var $cardInfo = $(".et-card-info") ;
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper") ;
//Evénement d'animation de déplacement
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25 ;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25 ;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
) ;
}) ;
//Animer au survol
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d") ;
$cardHeading.toggleClass("transform-3d") ;
$cardImage.toggleClass("transform-3d") ;
$cardButton.toggleClass("transform-3d") ;
$cardInfo.toggleClass("transform-3d") ;
}) ;
//Retour en arrière au passage de la souris
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`) ;
}) ;
}) ;
À propos du code
CSS
Pour donner à nos éléments positionnés en 3D (la colonne et les modules), nous devons utiliser la propriété CSS perspective sur la ligne (ou le conteneur de survol).
.et-hover-container {
perspective : 1000px ;
}
Ensuite, nous devons nous assurer que ces éléments de carte sont positionnés dans l’espace 3D en utilisant la propriété transform-style avec la valeur preserve-3d.
.et-mousemove-card {
transform-style : preserve-3d ;
transition : all 100ms linear !important ;
}
Ensuite, nous définissons la fonction de synchronisation de la transition et la durée lorsque les éléments de la carte sont animés.
.et-card-image,
.et-popout-title
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition : all 750ms ease-out !important ;
}
Enfin, nous utilisons la propriété transform avec une fonction translateZ pour déplacer les éléments sur l’axe z, créant ainsi l’effet popout lorsque l’on survole la ligne, et la classe transform-3d est ajoutée à chaque élément.
.et-card-image.transform-3d {
transform : translateZ(150px) rotateZ(10deg) !important ;
}
.et-card-heading.transform-3d {
transform : translateZ(150px) !important ;
}
.et-card-info.transform-3d {
transform : translateZ(50px) !important ;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform : translateZ(150px) rotateX(20deg) !important ;
}
Le JQuery
Tout d’abord, nous déclarons toutes les variables nécessaires pour cibler les éléments en fonction de leur classe personnalisée.
//Éléments
var $hoverContainer = $(".et-hover-container") ;
var $mousemoveCard = $(".et-mousemove-card") ;
var $cardImage = $(".et-card-image") ;
var $cardHeading = $(".et-card-heading") ;
var $cardInfo = $(".et-card-info") ;
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper") ;
Ensuite, nous attachons l’événement mousemove à la ligne (ou au conteneur de survol) avec une fonction qui calcule la position du curseur pour les axes X et Y de la fenêtre du navigateur, puis fait pivoter la carte mousemove (ou la colonne) lorsque les valeurs X et Y changent dynamiquement.
//Evénement d'animation de déplacement
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25 ;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25 ;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
) ;
}) ;
Pour activer la transformation CSS (avec translateZ) qui déplace les éléments de la carte dans l’espace Z, nous basculons la classe transform-3d vers chaque élément lors du survol de la ligne (ou du conteneur de survol).
//Animer au survol
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d") ;
$cardHeading.toggleClass("transform-3d") ;
$cardImage.toggleClass("transform-3d") ;
$cardButton.toggleClass("transform-3d") ;
$cardInfo.toggleClass("transform-3d") ;
}) ;
Nous devons ensuite attacher l’événement mouseleave à la ligne avec une fonction qui ajoute une propriété CSS transform avec les fonctions rotateY et rotateX à 0 degré. Cela remettra la colonne (ou la carte) en place lorsque le curseur sortira de la rangée.
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`) ;
}) ;
Résultat final
Regardez le résultat final !
Vous pouvez également consulter ce codepen pour voir une démonstration en direct de l’effet.
Réflexions finales
L’effet d’animation dynamique 3d de la souris que nous avons créé dans ce tutoriel comprend des effets d’animation uniques et avancés qui peuvent être facilement appris et passionnants à explorer. L’animation de la souris qui permet aux utilisateurs d’interagir avec le design peut être réalisée avec quelques lignes de JQuery. Quant aux effets de survol en 3D, ils reposent sur quelques propriétés CSS faciles à apprendre. Dans l’ensemble, la combinaison d’un constructeur de pages puissant comme Divi et de la magie de JQuery offre de nombreuses possibilités. Espérons que celui-ci vous sera utile.
Je suis impatient d’avoir de vos nouvelles dans les commentaires.
À la vôtre !
