Créer une animation dynamique de souris 3D dans Divi
La création d’animations dynamiques de mouvement de souris 3D est une façon amusante et excitante pour les utilisateurs d’interagir avec le contenu Web sur le site Web Divi. La conception est dynamique parce que l’animation se déplace avec le curseur. Habituellement, lorsque vous passez le curseur ou cliquez, nous animons l’objet. Mais dans ce tutoriel, nous allons vous montrer une façon créative d’animer les objets en déplaçant la souris (en déplaçant le curseur à différents endroits sur la fenêtre du navigateur). Mais ce n’est pas tout. Nous vous montrerons également comment combiner l’animation du Mouvement de la souris avec l’effet de vol stationnaire pour que les éléments apparaissent dans le design 3D, apportant ainsi le contenu dans la vie d’une nouvelle manière.
Pour le construire, nous utiliserons Divi Builder dans la plupart des conceptions. Ensuite, nous utiliserons quelques CSS personnalisés et jquery pour créer des fonctionnalités d’animation. Une fois terminé, vous aurez un design impressionnant pour présenter un nouveau produit ou service dans votre prochain projet! On y va. Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Vous pouvez également voir ce stylo de code pour voir une démonstration en direct des effets. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier 
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà inscrit
O. Tapez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder à la trousse de mise en page. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une disposition de section dans la Bibliothèque Divi, allez à la Bibliothèque Divi.
Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer.
Créer une animation 3D dynamique de la souris dans Divi partie 1: créer des conteneurs et des onglets lorsque la souris se déplace, les lignes et les colonnes de l’effet d’animation deviennent la cible de l’animation 3D active lorsque la souris se déplace. On pourrait appeler ça un conteneur stationnaire. Lorsque vous passez le curseur sur une ligne droite, la colonne agit comme notre carte qui est animée avec ses éléments enfants. Cependant, avant de créer des lignes et des colonnes, spécifions un style pour cette section. Dans la section démarrer, ouvrez les paramètres de la section normale par défaut et mettez à jour ce qui suit:
Couleur de fond: rgba (68,55,99,0,1)
Les bords (filets) que nous ajoutons cacheront le débordement, de sorte que le débordement doit être visible. Si nous ne le faisons pas, l’animation ne fonctionnera pas comme prévu.
Une fois notre image en place, ajoutez un nouveau formulaire texte en dessous pour créer le titre de l’article.
Dans l’onglet avancé, ajoutez une classe personnalisée: CSS Class: et le titre de l’onglet # 4 le texte d’information sur papier utilise un format de texte distinct comme titre et texte d’information, ce qui nous permet d’ajouter différents effets d’animation 3D pour chaque titre et texte d’information. Pour créer du texte informatif sous le titre, ajoutez un nouveau formulaire texte sous le formulaire texte du titre. Ajoutez ensuite ce qui suit au corps:
Le seul vélo Divi
# 5 boutons de carte pour créer un bouton pour une carte, veuillez ajouter un nouveau formulaire de bouton sous le formulaire de texte d’information.
En mode configuration du bouton, le texte du bouton est mis à jour. Texte du bouton: devis
Sur l’onglet conception, modélisez les boutons comme suit: utilisez un style personnalisé pour les boutons: taille du texte du bouton s: 25 Px (bureau), 20 Px (tablette), 16 Px (téléphone) couleur du texte du bouton: # FFFFFF couleur de fond du bouton: # 443763 largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 30 px
Ar $cardimage = $(\
Var $Card heading = $(\
Var $Card Info = $(\
Var $Card button = $(\
Déplacer les événements d’animation
$conteneur suspendu. Open (\
Définir xaxis = (window.innerwidth \/ 2-e.clientx) \/ 25;
Définir yaxis = (window.innerheight \/ 2-e.client y) \/ 25;
$Mouse card. CSS
\
` rotatey (${xaxis} Degree) rotatex (${yaxis} Degree ‘
);
});
Animation en vol stationnaire
$conteneur suspendu. Vol stationnaire (fonction () {
$Mouse card. Toggleclass (\
$cardheading. Toggleclass (\
$cardimage. Toggleclass (\
$bouton carte. Toggleclass (\
$cardinfo. Toggleclass (\
});
Rebondir la souris
$conteneur suspendu. Open (\
$Mouse card. CSS (\
});
});
Perspective: 1000px;
}
Par conséquent, nous devons nous assurer que ces éléments de feuille sont placés dans l’espace 3D en utilisant les attributs de style de transformation avec des valeurs Preserve – 3D. Et carte de mouvement de la souris
Style de transformation: Preserve – 3D;
Transition: toutes les 100 MS linéaires! Important
}
Ensuite, définissez la fonction temps de transition et la durée de l’animation de l’élément papier. Et l’image de la carte,
– Oui. Et Pop up title,
– Oui. Et les informations de la carte,
– Oui. Et la carte de mouvement de la souris. Et _ pb button module wrapper
Transition: tous les 750ms se détendent! Important
}
Enfin, nous utilisons l’attribut Transform et la fonction translatez pour déplacer les éléments sur l’axe Z, créer un effet pop – up chaque fois que nous traversons une ligne, et ajouter la classe Transform – 3D à chaque élément. Et l’image de la carte. Transform – 3D {
Transform: translatez (150px) rotatez (10deg)! Important
}
– Oui. Et le titre de la carte. Transform – 3D {
Transformation:
Conteneur Open (\
$Mouse card. CSS (\
});
Résultats finaux regardez les résultats finaux! Vous pouvez également voir ce stylo de code pour voir une démonstration en direct des effets. Les effets dynamiques d’animation de souris 3D que nous avons créés dans ce tutoriel incluent des effets d’animation avancés uniques que vous pouvez facilement apprendre et explorer. L’animation du Mouvement de la souris qui permet à l’utilisateur d’interagir avec le design peut être exécutée à partir de plusieurs lignes de jquery. L’effet du passage de la souris 3D est basé sur un certain nombre d’attributs CSS qui sont faciles à apprendre. En résumé, la combinaison de puissants générateurs de page comme Divi avec la magie de jquery peut créer de nombreuses possibilités. J’espère que ça marchera. J’ai hâte d’entendre vos commentaires. Bonjour!