CodeWatchers

Comment créer un effet d’animation mousemove 3D dynamique avec Divi

Rifat Divi Tutorials Apr 26, 2021

Avec l’aide de Constructeur divi, nous pouvons faire de nombreux designs uniques et créatifs. Aujourd’hui, nous allons voir comment créer une animation 3D dynamique en utilisant Divi constructeur de pages visuelles qui est interactif avec le mouvement du curseur de souris. Habituellement, nous planons ou cliquez sur l’animation sur un objet, mais ici, nous animeons un objet qui se déplacera dans différentes directions avec le mouvement de la souris. En outre, vous verrez comment ajouter un effet 3D planant à un objet qui effectue l’animation interactive et apporter la vie dans la conception!

Comment créer un effet d’animation mousemove 3D dynamique avec Divi

Nous allons utiliser Constructeur de Divi pour la conception et plus tard, nous allons ajouter du code CSS et jQuery pour créer la fonctionnalité d’animation qui rendra la conception vivante! Vous pouvez utiliser cette conception pour afficher vos produits d’une nouvelle manière à vos visiteurs!

Conception finale

Si tout se passe bien comme nous le prévoyons, alors notre conception finale ressemblera beaucoup à cela.

Création d’un effet mousemove 3D dynamique sur Divi

Tâche 1 : Configuration de la page

Puisque vous souhaitez créer cet effet sur votre page Web, nous pensons que vous avez déjà installé la dernière version de Divi. Maintenant, « Ajouter une page » à partir du tableau de bord, le titre que vous avez besoin et l’étendre avec Divi constructeur.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Maintenant, choisissez « Construire à partir de zéro » et commencer ahed.

Tâche 2 : Création d’un conteneur et d’une carte hover

Pour activer l’animation 3D en vol stationnaire, nous ciblerons la ligne. Nous l’appellera « Conteneur hover ». D’autre part, la colonne agira comme une carte, qui animera avec les éléments enfant pendant le vol stationnaire au-dessus de la rangée.

Section Styling

Ouvrez les paramètres de la section par défaut et mettez à jour les

  • Couleur de fond - RGBA (68,55,99,0.1). Ici, 0,1 est l’opacité. 
  • Ajouter le rembourrage « 7vh » en haut et en bas.

Hover Container

Maintenant, ajoutez une ligne d’une colonne à la section préparée.

Maintenant, mettez à jour le paramètre de la ligne avec les modifications suivantes.

  • Activer la « largeur de gouttière personnalisée » et changer la valeur à 1
  • Largeur 100%
  • Largeur maximale: 70% (bureau), 60% (tablette), 50% (mobile)
  • Rembourrage: 7vh sur le haut et le bas, 5vw sur la gauche et la droite. 

Sous l’onglet avancé, ajoutez une classe CSS personnalisée.

  • Classe CSS : et-hover-container

Ajoutez également le code CSS à l’élément principal.

display:flex;
align-items:center;
justify-content:center;

The Card

Après avoir terminé la mise à jour de la ligne, ouvrez le paramètre pour que la colonne style de la carte.

  • Couleur de fond #ffffff
  • Rembourrage: 7vh haut, 7vh en bas, 5% à gauche, 5% à droite
  • Coins arrondis: 30px
  • Box Shadow: Voir capture d’écran
  • Position verticale de l’ombre de la boîte : 0px
  • Force de flou d’ombre de boîte : 80px
  • Couleur de l’ombre: rgba (0,0,0,0.2)

Sous l’onglet avancé, ajoutez une classe CSS personnalisée.

  • Classe CSS: et-mousemove-card

Ajoutez également ce code CSS sous élément principal. 

max-width: 600px;

Maintenant, réglez les propriétés de débordement à visible pour le débordement horizontal et vertical.

Tâche 3 : Création de l’élément carte

The Circle Background With Logo

Pour le tout premier élément de notre carte, nous allons ajouter un fond de cercle qui comprend notre logo qui sera assis derrière notre image principale du produit.

Maintenant, ajoutez « Texte » sur la colonne et supprimez le texte par défaut pour garder le corps vide.

Il est temps d’ajouter un fond de gradient.

  • Fond de gradient Gauche Couleur #443763
  • Gradient Arrière-plan Droit Couleur #EA3900
  • Définir la direction de gradient à 90 deg

Avec la couleur de gradient, ajouter un logo comme une image de fond. La taille de l’image doit être de 60px par 60px et définir la valeur de taille de l’image d’arrière-plan à « Taille réelle »

Sur l’onglet « Design », modifiez les valeurs comme suit sur la section « Dimensionnement ». Valeur de largeur définie 160px pour le bureau, 150px pour tablette et 80px pour smartphone.

En outre, réglez la valeur de hauteur la même que la largeur. Enfin, réglez les coins arrondis pour une valeur de 80% sous la section « Border ».

Sur l’onglet « Advanced », mettez à jour les positions ci-dessous.

  • Position : Absolu
  • Lieu : Top Center
  • Décalage vertical : 15%

The Card Image

Maintenant, comme nous l’avons fait avec la partie logo, ajoutons l’image du produit sur la carte. Nous ajouterons un nouveau module d’image sous le module texte précédent.

Téléchargez maintenant une image du produit. Assurez-vous que l’image est transparente et son format Png. Ici, nous utilisons l’image d’une ferrari rouge.

Sur l’onglet « Design », modifiez les valeurs mentionnées ci-dessous.

  • Alignement de l’image: Centre
  • Largeur: 90%
  • Marge: 12vh haut et 5vh en bas (ajuster les valeurs en fonction de vos besoins)

Sur la section onglet « Advanced », ajoutez une classe CSS personnalisée pour l’image.

  • Classe CSS : et-carte-image

The Car Heading

Maintenant, nous allons créer un titre pour la carte. Avec notre image de voiture en position, ajoutons un module texte sous l’image pour créer notre rubrique de carte.

Dans le corps, supprimer le texte par défaut et ajouter le titre H2 de HTML donné ci-dessous. 

<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>

Maintenant, sur la section de conception changer les valeurs suivantes:

  • Cap 2 Font : Bebas Neue
  • Cap 2 Alignement de texte : Centre
  • Titre 2 Couleur du texte: #443763
  • Cap 2 Taille de texte : 75px pour le bureau, 60px pour tablette et 45px pour mobile.
  • Cap 2 Espacement des lettres : 0.05em
  • Marge : 4vh au fond

Sur la section « Advanced » ajouter une classe CSS personnalisée

  • Classe CSS : et-card-heading

The Card Info

Maintenant, nous allons ajouter les informations sur la carte. Nous ajouterons un autre module de texte pour l’information parce que cela nous permettra d’ajouter différents effets d’animation 3D à chacun d’eux. Ajoutons un nouveau module texte sous le module de texte de titre.

Maintenant, ajoutez le contenu texte suivant au corps. 

<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>

Sous l’onglet conception, mettez à jour ce qui suit :

  • Poids de police de texte : Semi Bold
  • Taille du texte : 18px (bureau) et 16px (tablette et téléphone.)
  • Hauteur de la ligne de texte : 1.8em
  • Alignement du texte : Centre
  • Marge : 4vh

Maintenant, ajoutez une classe CSS personnalisée à ce module.

  • Classe CSS: et-carte-info

The Button

Maintenant, ajoutez un nouveau module de bouton sous le module de texte d’information. Cela ajoutera un bouton sur la carte.

Sur l’onglet « Contenu » des paramètres du bouton, modifiez le texte du bouton.

  • Texte du bouton : Faites une offre.

Sur l’onglet « Design », style le bouton comme mentionné ci-dessous.

  • Utilisez des styles personnalisés pour le bouton: OUI
  • Taille du texte du bouton : 25px (bureau), 20px (tablette), 16px (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan de bouton : #443763
  • Largeur de bordure de bouton : 0px
  • Rayon de bordure de bouton : 30px
  • Espacement de lettre de bouton : 0.1em
  • Police de boutons: Bebas Neue
  • Rembourrage (bureau): 0.5em top, 0.5em bottom, 3em left, 3em right
  • Rembourrage (téléphone): 0,5em haut, 0,5em en bas, 2em à gauche, 2em à droite

Maintenant, ajoutez une classe CSS personnalisée

  • Classe CSS : bouton et carte

Result Till Now

Voici notre sortie de conception finale sans l’animation.

Maintenant, nous allons ajouter du code personnalisé pour donner vie à cette conception.

Puisque notre conception est complète, nous allons maintenant ajouter du code CSS et JQuery pour donner à nos colonnes nouvellement créées et des éléments de carte pour lui donner un effet dynamique d’animation de déplacement de souris 3D.

Pour ce faire, ajoutez un nouveau module de code sous le module bouton.

Coller le code CSS personnalisé donné dans la boîte et assurez-vous d’envelopper le code dans l’étiquette « Style ». 

<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
 
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
 
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
 
/*transform styles for card elements*/
.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;
}
</style>

Le code CSS ressemblera à ceci sous l’onglet contenu du module Code.

Ci-dessous le CSS, ajouter le JQuery suivant et assurez-vous que le code est à l’intérieur des balises « Script ». 

<script>
jQuery(document).ready(function ($) {
//Items
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");
 
//Moving Animation Event
$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)`
);
});
 
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
 
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>

Le code suivant devrait ressembler à ceci dans le panneau de code.

Maintenant, enregistrez l’ensemble de l’œuvre et vérifiez l’ensemble du travail dans une page en direct.

Sortie finale

Donc, tout notre design ressemble à ceci. Cool hein!

Derniers mots

L’animation 3D que nous avons vu dans le tutoriel d’aujourd’hui est très facile et amusant à apprendre. Il s’agit d’un effet d’animation unique et avancé qui peut être contrôlé par le mouvement de la souris. Nous pouvons concevoir ceci par quelques codage simples de CSS et de JQuery. Sans aucun doute, Divi est un puissant constructeur de pages et grâce à un codage personnalisé, il est possible d’apporter un design magique aux sites Web.

Divi WordPress Theme