Share
Ce que vous allez créerDans ce didacticiel, nous allons créer un élément interactif avec la propriété perspective CSS3 afin de donner une idée de trois dimensions. Ce tutoriel vous apprendra également à utiliser jQuery avec des événements de souris pour obtenir des positions d’élément en JavaScript et à manipuler les propriétés CSS..
Nous avons besoin d’une relation parent-enfant pour que la propriété de perspective fonctionne correctement. Commençons par créer la structure HTML, puis poursuivons avec le style CSS.
Montagne
5 jours
Île
2 jours
Ici nous en emballons deux carte éléments dans une div avec l'id de cartesWrapper. En outre, cela cartesWrapper est enveloppé dans une autre div afin de pouvoir manipuler facilement sa position dans la fenêtre.
Chaque élément avec la classe de carte a un image élément, qui englobe le écran et texte éléments. La structure est un peu vague pour le moment, mais je vais expliquer l'utilisation de chaque élément dans les sections à venir..
Utilisons le style CSS suivant pour positionner nos éléments.
#mainWrapper display: flex; justifier-contenu: centre; align-items: centre; hauteur: 350px; #cardsWrapper display: flex; justifier-contenu: espace-entre; largeur: 700px; .card width: 300px; hauteur: 175px; couleur de fond: rouge; .image width: 100%; hauteur: 100%; couleur de fond: rouge;
le la perspective La propriété est quelque chose que vous devez définir dans votre div parent qui contient les div que vous voulez transformer avec le sens de la perspective. Imaginez que la division parentale soit votre monde et qu’elle ait une certaine valeur de perspective que vous expérimentez.
Ajoutons le la perspective propriété à notre div parent, qui est carte. Nous sélectionnons le carte élément en tant que parent, pas cartesWrapper, puisque nous voulons avoir un effet de perspective individuel sur chaque élément de la carte.
Tweak le CSS de la carte comme suit.
.carte largeur: 300px; hauteur: 175px; couleur de fond: rouge; perspective: 500px;
Maintenant, essayez d'ajouter un transformer propriété de l'élément image pour voir l'effet de la perspective.
.image largeur: 100%; hauteur: 100%; couleur de fond: rouge; transformer: rotateX (30deg);
Puisque image est l'enfant direct de carte, il est affecté par la perspective. Cependant, si vous essayez d’ajouter un transformer propriété à tout enfant de la image, cela ne fonctionnerait pas.
Pour que ces enfants soient transformés par rapport à leurs parents, ce qui est le image élément dans cet exemple, vous devez utiliser transformer-style: preserve-3d sur l'élément parent.
.image largeur: 100%; hauteur: 100%; transformer-style: preserve-3d; transformer: rotateX (30deg);
Nous avons maintenant suffisamment d’arrière-plan dans la propriété perspective et sommes prêts à poursuivre le style des autres éléments..
N'oubliez pas d'enlever le transformer: rotateX (30deg) à partir de votre élément d'image.
Nous avons une image élément, et en plus de cela, nous avons un élément appelé écran, et puis le texte. Puisque nous utilisons la perspective ici, vous pouvez considérer chacun de ces éléments comme des calques individuels..
Maintenant, nous allons ajouter une image de fond à notre image div et ensuite le style écran et texte éléments.
Utilisons le style CSS suivant pour ajouter une image de fond à chaque objet de carte..
Accentsconagua
.image.first background-image: url ("https://c1.staticflickr.com/1/343/31652757460_b2b5794a51_n.jpg"); .image.second background-image: url ("https://c2.staticflickr.com/2/1506/25121644830_2d768ef51a_n.jpg"); Maintenant, nous allons coiffer le écran élément.
Puisque nous voulons le écran l'élément doit avoir exactement la même taille que son parent image élément, nous utilisons 100% des valeurs de largeur et de hauteur et une couleur de fond gris noir avec un canal alpha.
La partie import est Transformer: traduireZ (30px) échelle (0.940).
Nous traduisons donc ici le écran élément sur l'axe des Z de 20px. Cela le fait survoler la image élément. Comme il est envers nous, sa taille sera plus grande, à cause des règles de la perspective. Par conséquent, nous le réduisons pour qu'il corresponde à la taille de l'élément parent. Si vous utilisez différentes valeurs de traduction, la valeur d'échelle varierait. De même, définir différentes tailles de hauteur et de largeur pour l'élément parent entraînerait la nécessité d'une valeur de mise à l'échelle différente..
.écran couleur d'arrière-plan: rgba (0, 0, 0, 0,22); largeur: 100%; hauteur: 100%; transformation: échelle de translation (30px) (0,940);
Pour comprendre ce qui se passe ici, il suffit de faire pivoter votre image élément autour des axes X et Y en ajoutant la ligne suivante dans votre règle CSS:
transformer: rotateX (30deg) rotationY (30deg)
Maintenant, la dernière partie de cette section est le style du texte élément, ce qui est assez trivial.
Nous utilisons essentiellement les mêmes paramètres de transformation pour le texte élément afin de l'avoir au même niveau que le écran élément. Le reste du CSS est simplement un style simple. Vous pouvez le modifier comme vous le souhaitez.
.text position: absolute; en bas: 25 px; à gauche: 30px; Couleur blanche; transformation: échelle de translation (30px) (0,940); .text p curseur: défaut; rembourrage: 0; marge: 0; .text p: premier du type font-size: 2em; marge inférieure: 5px; .text p: dernier type de police font-size: 1em;
Ceci est le résultat final avec rotation manuelle pour voir l'effet.
Avant de continuer, supprimez les règles de rotation de votre CSS, car nous contrôlerons automatiquement la rotation en fonction de la position du curseur..
Nous allons maintenant écrire du code jQuery afin de rendre ces cartes interactives.
Allons-y!
Commençons par le code de base jQuery.
(fonction ($) ) (jQuery);
Nous allons écrire tout dans cette fonction. Cela permettra à jQuery d'attendre que le DOM soit prêt.
Puisque nous sommes intéressés à interagir avec nos carte élément, nous devons le sélectionner.
(fonction ($) var card = $ (". card");) (jQuery);L'étape suivante consiste à enregistrer la position du curseur sur l'élément de carte. Pour ce faire, nous utiliserons le logiciel intégré déplacer la souris un événement.
(function ($) var card = $ (". card"); card.on ('mousemove', fonction (e) );) (jQuery);Nous devons maintenant suivre la position du curseur. C'est un peu délicat d'obtenir les bonnes valeurs.
(fonction ($) var card = $ (". card"); card.on ('mousemove', fonction (e) var x = e.clientX - $ (this) .offset (). left + $ ( fenêtre) .scrollLeft (); var y = e.clientY - $ (this). offset (). top + $ (window) .scrollTop ();) (jQuery);Ici, e.clientX et e.clientY renvoie la position du curseur dans la fenêtre. Cependant, puisque chaque carte l'objet est positionné par rapport à la fenêtre d'affichage, nous devons compenser cela en extrayant les valeurs de décalage gauche et supérieur.
La dernière et la plus importante chose à considérer est la compensation pour le défilement de la fenêtre. Ainsi, puisque la position de votre curseur est enregistrée par rapport à votre fenêtre mais que les valeurs de décalage sont fixes, lorsque vous faites défiler, votre objet se rapproche du haut ou de la gauche de la fenêtre en fonction de la direction dans laquelle vous avez fait défiler.
Par conséquent, notre distance relative vers le haut ou la gauche de la fenêtre serait plus petite. Cependant, puisque les valeurs de décalage sont fixes, nous devons compenser cela, et ceci est fait par le $ (fenêtre) .scrollLeft () et $ (fenêtre) .scrollTop (). Donc, en ajoutant ces valeurs aux variables respectives, nous compensons simplement le montant que nous avons fait défiler. Par conséquent, lorsque vous passez la souris sur l’un de vos carte éléments, votre position en X serait comprise entre 0 et la largeur de la carte, définie comme 300px. De même, la position Y serait comprise entre 0 et la hauteur de la carte, soit 175 pixels..
L'étape suivante consiste à mapper la position du curseur sur une nouvelle plage, qui correspond au degré de rotation que nous souhaitons appliquer en unités de degré. Ainsi, lorsque votre curseur se trouve au milieu de l'élément de carte, il a juste l'air d'être plat, mais lorsque vous vous déplacez vers la gauche / droite ou le haut / bas, vous obtenez un effet de rotation comme si la carte suivait le curseur.
Voici une illustration rapide du résultat de la fonction de mappage.
mappe de fonctions (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
Dans cette fonction, le in_min et in_max Les paramètres sont les valeurs minimale et maximale de la valeur d'entrée, qui correspondent à la largeur et à la hauteur du carte élément. out_min et out_max sont les valeurs minimales et maximales que l'entrée sera mappée.
Utilisons cette fonction de la carte avec nos positions de curseur X et Y.
(fonction ($) var card = $ (". card"); card.on ('mousemove', fonction (e) var x = e.clientX - $ (this) .offset (). left + $ ( fenêtre) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (fenêtre) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = carte (y, 0, $ (this) .height (), -17, 17);); fonction carte (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; (jQuery);Maintenant, nos valeurs cartographiées sont rX et rY.
L’étape suivante consiste à définir une règle CSS pour le image élément en utilisant les valeurs mappées comme valeurs de rotation.
(fonction ($) var card = $ (". card"); card.on ('mousemove', fonction (e) var x = e.clientX - $ (this) .offset (). left + $ ( fenêtre) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (fenêtre) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = carte (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transformer" , "rotateY (" + rY + "deg)" + "" + "rotationX (" + -rX + "deg)")); fonction map (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; (jQuery);Ici nous avons sélectionné les enfants du carte élément qui sont nommés image, puis définissez la règle CSS pour faire pivoter cet élément autour des axes X et Y en rX et rY degrés respectivement.
Vous réaliserez que les éléments de la carte suivent le curseur dans leurs perspectives respectives. Cependant, lorsque le curseur est sur les éléments de la carte, ils conservent leurs orientations. De plus, ils réagissent brusquement à la présence du curseur sur l'élément de carte. Nous devons donc également gérer ces cas lorsque la souris entre et sort de l'élément de carte.
Afin de gérer ces problèmes, nous devons utiliser le mouseenter et laisser la souris événements.
Quand la souris entre dans la région du carte élément, nous ajoutons une règle de transition CSS à la image élément. Cela permettra une transition en douceur du "regard" de la image élément.
card.on ('mouseenter', function () $ (this) .children (".image"). css (transition: "tout" + 0.05 + "s" + "linéaire"););De même, nous devons gérer les laisser la souris un événement.
Ici, j’ajoute aussi une autre règle CSS de transition avec un timing différent, ce qui permet une transition plus douce vers la position initiale lorsque la souris quitte le carte élément.
J'ajoute également la règle de transformation CSS afin de réinitialiser les rotations du carte élément.
card.on ('mouseleave', function () $ (this) .children (". image"). css (transition: "all" + 0.2 + "s" + "linear"); $ (this) .children (". image"). css ("transform", "rotationY (" + 0 + "deg)" + "" + "rotationX (" + 0 + "deg)"););Donc, notre code jQuery final ressemble à ceci:
(fonction ($) var card = $ (". card"); card.on ('mousemove', fonction (e) var x = e.clientX - $ (this) .offset (). left + $ ( fenêtre) .scrollLeft (); var y = e.clientY - $ (this) .offset (). top + $ (fenêtre) .scrollTop (); var rY = map (x, 0, $ (this) .width ( ), -17, 17); var rX = carte (y, 0, $ (this) .height (), -17, 17); $ (this) .children (". Image"). Css ("transformer" , "rotateY (" + rY + "deg)" + "" + "rotationX (" + -rX + "deg)");); card.on ('mouseenter', function () $ (this). enfants (".image"). css (transition: "tous" + 0.05 + "s" + "linéaire",);); card.on ('mouseleave', function () $ (this). enfants (".image"). css (transition: "tous" + 0.2 + "s" + "linéaire",); $ (ceci) .children (". image"). css ("transformer", " rotationY ("+ 0 +" deg) "+" "+" rotationX ("+ 0 +" deg) ");); fonction map (x, in_min, in_max, out_min, out_max) return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);Voici le résultat final. J'ai également utilisé une police de caractères sans empattement différente. texte élément pour le rendre meilleur.
Tout au long de ce tutoriel, nous avons appris à utiliser la propriété perspective et la structure HTML requise pour le faire fonctionner correctement. De plus, nous avons expliqué comment enregistrer la position du curseur de la souris en survolant un élément HTML spécifique..
En plus de cela, nous avons utilisé le déplacer la souris, mouseenter, et laisser la souris événements pour introduire l'interactivité en ajoutant des règles CSS aux éléments HTML avec jQuery.
J'espère que vous avez apprécié ce tutoriel et appris quelques méthodes utiles.
