Share
Ce veți creaÎn acest tutorial, vom crea un element interactiv cu proprietatea perspectivă CSS3 pentru a da un sentiment de trei dimensiuni. Acest tutorial vă va învăța cum să utilizați jQuery cu evenimentele mouse-ului pentru a obține poziții de elemente în JavaScript și cum să manipulați proprietățile CSS.
Avem nevoie de o relație părinte-copil pentru ca proprietatea perspectivă să funcționeze corect. Să creați mai întâi structura HTML și apoi să continuați cu stilul CSS.
Munte
5 zile
Insulă
2 zile
Aici împachetăm două card elemente într-un div cu id de cardsWrapper. De asemenea, asta cardsWrapper este înfășurat într-un alt div pentru a putea manipula ușor poziția sa în cadrul ferestrei de vizualizare.
Fiecare element cu clasa de card are un imagine element, care cuprinde ecran și text elemente. Structura este puțin vagă pentru moment, însă voi explica utilizarea fiecărui element în secțiunile viitoare.
Să folosim următorul stil CSS pentru a poziționa elementele noastre.
#mainWrapper display: flex; justify-content: centru; aliniere: centru; înălțime: 350px; #carduriWrapper display: flex; justify-content: spațiu-între; lățime: 700px; .card lățime: 300px; înălțime: 175px; fundal-culoare: roșu; .image lățime: 100%; înălțime: 100%; fundal-culoare: roșu;
perspectivă proprietatea este ceva ce trebuie să setați în divina mamă care conține divs pe care doriți să le transformați cu simțul perspectivei. Imaginați-vă că divina mamă este lumea voastră și că are o anumită valoare perspectivă pe care o experimentați.
Să adăugăm perspectivă proprietate div divorț, care este card. Suntem selectați card element ca părinte, nu cardsWrapper, deoarece dorim să avem un efect vizual individual asupra fiecărui element de card.
Tweak CSS din card după cum urmează.
.carte lățime: 300px; înălțime: 175px; fundal-culoare: roșu; perspectivă: 500px;
Încercați acum să adăugați o transforma proprietății elementului imagine pentru a vedea efectul perspectivei.
.imagine lățime: 100%; înălțime: 100%; fundal-culoare: roșu; transformă: rotateX (30deg);
De cand imagine este copilul direct al card, este afectată de perspectivă. Cu toate acestea, dacă încercați să adăugați o transforma de proprietate pentru orice copil al imagine, acest lucru nu ar funcționa.
Pentru ca acești copii să fie transformați relativ la părintele lor, adică imagine element în acest exemplu, ar trebui să utilizați transform-stil: conserve-3d pe elementul părinte.
.imagine lățime: 100%; înălțime: 100%; stilul transformat: păstrați-3d; transformă: rotateX (30deg);
Acum avem un fundal suficient în proprietatea perspectivelor și suntem gata să continuăm cu stylingul celorlalte elemente.
Nu uitați să eliminați transforma: rotateX (30deg) din elementul dvs. de imagine.
Avem un imagine element și, pe deasupra, avem un element numit ecran, și apoi text. Deoarece utilizăm perspectiva aici, vă puteți gândi la fiecare dintre aceste elemente ca straturi individuale.
Acum vom adăuga o imagine de fundal pentru noi imagine div și apoi stilul ecran și text element.
Să utilizăm următorul stil CSS pentru a adăuga o imagine de fundal fiecărui obiect de carte.
Accentsconagua
.image.first background-image: url ("https://c1.staticflickr.com/1/343/31652757460_b2b5794a51_n.jpg"); .image.second fundal-imagine: url ("https://c2.staticflickr.com/2/1506/25121644830_2d768ef51a_n.jpg"); Acum o vom modela ecran element.
Deoarece vrem ecran elementul să aibă exact aceeași dimensiune ca și părintele său imagine element, folosim valorile de lățime și înălțime 100% și o culoare de fundal negru de culoare gri cu un canal alfa.
Partea de import este transformare: scara translateZ (30px) (0.940).
Deci, aici traducem doar ecran element pe axa Z cu 20 px. Acest lucru face să se deplaseze peste imagine element. Deoarece este spre noi, va avea o dimensiune mai mare, datorită regulilor de perspectivă. Prin urmare, o scalim pentru a se potrivi cu dimensiunea cu elementul părinte. Dacă utilizați valori de traducere diferite, valoarea scării ar varia. De asemenea, definirea diferitelor dimensiuni de înălțime și lățime pentru elementul părinte ar conduce la o cerință a unei valori de scalare diferite.
.ecran culoare-fundal: rgba (0, 0, 0, 0,22); lățime: 100%; înălțime: 100%; transformare: scara translateZ (30px) (0.940);
Pentru a înțelege ce se întâmplă aici, rotiți-vă doar imagine element în jurul axelor X și Y prin adăugarea următoarei linii în regula CSS:
transformare: rotateX (30deg) rotateY (30deg)
Acum ultima parte a acestei secțiuni este stilul text element, care este destul de banal.
În principiu, folosim aceleași setări de transformare pentru text pentru a avea acelasi nivel ca si ecran element. Restul CSS este un stil simplu. Puteți să-l optimizați așa cum doriți.
.text position: absolute; fund: 25px; stânga: 30px; culoare albă; transformare: scara translateZ (30px) (0.940); .text p cursor: implicit; umplutura: 0; marja: 0; .text p: prima de tip font-size: 2em; margin-bottom: 5px; .text p: ultimul tip font-size: 1em;
Acesta este rezultatul final cu rotație manuală pentru a vedea efectul.
Înainte de a continua, ștergeți regulile de rotație din CSS, deoarece vom controla automat rotația în funcție de poziția cursorului.
Acum vom scrie un cod jQuery pentru a face aceste carduri interactive.
Hai să ajungem la asta!
Să începem cu codul de bază jQuery.
(funcția ($) ) (jQuery);
Vom scrie totul în interiorul acestei funcții. Acest lucru va permite jQuery să aștepte până când DOM este gata.
Deoarece suntem interesați să interacționăm cu noi card element, trebuie să-l selectăm.
(funcția ($) var card = $ (". carte");) (jQuery);Următorul pas este înregistrarea poziției cursorului pe elementul cardului. Pentru a face acest lucru, vom folosi built-in-ul mousemove eveniment.
(funcția ($) var card = $ ("carte"); card.on ('mousemove', funcția (e) );) (jQuery);Acum trebuie să urmărim poziția cursorului. Este un pic dificil să obțineți valorile corecte.
(funcția ($) var card = $ (".card"); card.on ('mousemove', funcția (e) var x = e.clientX - $ (this) fereastra) .scrollLeft (); var y = e.clientY - $ (aceasta) .offset () top + $ (fereastra) .scrollTop ();));) (jQuery);Aici, e.clientX și e.clientY returnați poziția cursorului în interiorul ferestrei de vizualizare. Cu toate acestea, deoarece fiecare card obiectul este poziționat în raport cu portul de vizualizare, trebuie să compensăm acest lucru prin extragerea valorilor de deplasare stânga și de sus.
Ultimul și cel mai important lucru de luat în considerare este compensarea derulării ferestrelor. Deci, deoarece poziția cursorului dvs. este înregistrată în raport cu portul de vizualizare, dar valorile offset sunt fixe, atunci când defilați, obiectul dvs. se apropie de partea superioară sau din stânga portului de vizualizare, în funcție de direcția în care ați derulat.
Ca rezultat, distanța noastră relativă față de partea superioară sau din stânga a ferestrei de vizualizare ar fi mai mică. Cu toate acestea, deoarece valorile offset sunt fixe, trebuie să compensăm acest lucru, iar acest lucru se face de către $ (Fereastră) .scrollLeft () și $ (Fereastră) .scrollTop (). Astfel, prin adăugarea acestor valori la variabilele respective, compensăm doar suma pe care am derulat-o. Ca urmare, atunci când plasați cursorul peste oricare dintre dvs. card elemente, poziția dvs. X ar varia de la 0 la lățimea cardului, care este definită ca 300px. De asemenea, poziția Y ar varia de la 0 la înălțimea cardului, care este de 175px.
Următorul pas este să cartografiați poziția cursorului într-o nouă gamă, care va fi cantitatea de rotație pe care dorim să o aplicăm în unități de grad, astfel încât atunci când cursorul dvs. se află în mijlocul elementului cardului, acesta ar arăta simplu, dar când vă mutați în stânga / dreapta sau în partea de sus / de jos, veți obține un efect de rotație, ca în cazul în care cardul urmărește cursorul.
Iată o ilustrare rapidă a rezultatului funcției de cartografiere.
harta funcției (x, in_min, in_max, out_min, out_max) întoarcere (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
În această funcție, in_min și in_max parametrii sunt valorile minime și maxime ale valorii de intrare, care corespund lățimii și înălțimii card element. out_min și out_max sunt valorile minime și maxime pe care va fi mapată intrarea.
Să folosim această funcție de hartă cu pozițiile cursorului nostru X și Y.
(funcția ($) var card = $ (".card"); card.on ('mousemove', funcția (e) var x = e.clientX - $ (this) fereastra) .scrollLeft (); var y = e.clientY - $ (acest) .offset () top + $ (fereastra) .scrollTop (); var rY = hartă (x, 0, $ (X, in_min, in_max, out_min, out_max) retur (x, in_min, in_max, out_min, out_max) (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);Acum valorile noastre sunt mapate RX și rY.
Următorul pas este stabilirea unei reguli CSS pentru imagine utilizând valorile mapate ca valori de rotație.
(funcția ($) var card = $ (".card"); card.on ('mousemove', funcția (e) var x = e.clientX - $ (this) fereastra) .scrollLeft (); var y = e.clientY - $ (acest) .offset () top + $ (fereastra) .scrollTop (); var rY = hartă (x, 0, $ ), Cd ("transforma"), cd ("transform"), , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)"); - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);Aici am selectat copiii din card element numit imagine, și apoi setați regula CSS pentru a roti acest element în jurul axelor X și Y prin RX și rY grade, respectiv.
Veți realiza că elementele cărții urmează cursorul în perspectivele respective. Cu toate acestea, atunci când cursorul este în afara elementelor cardului, acestea își păstrează orientările. În plus, ele reacționează brusc la prezența cursorului peste elementul cardului. Așadar, trebuie să rezolvăm și acele cazuri când mouse-ul intră și iese din elementul cardului.
Pentru a rezolva aceste probleme, trebuie să folosim mouseenter și mouseleave evenimente.
Când mouse-ul intră în regiunea card element, adăugăm o regulă CSS de tranziție la imagine element. Acest lucru va permite o tranziție lină pentru "privirea" imagine element.
card.on ('mouseenter', functie () $ (this) .copii (".simag") css (tranziție: "toate" + 0,05 + "s" + "liniar");De asemenea, trebuie să ne descurcăm mouseleave eveniment.
Aici, adaug, de asemenea, o altă regulă CSS de tranziție cu un calendar diferit, ceea ce face o tranziție mai ușoară la poziția inițială atunci când mouse-ul părăsește card element.
De asemenea, adaug regula de transformare CSS pentru a reseta rotațiile card element.
card.on ('mouseleave', funcția () $ (this) .copii (".configurare") css (tranziție: "tot" + 0.2 + "s" + " .cad ("transform", "rotateY (" + 0 + "deg)" + "" + "rotateX (" + 0 + "deg)");Deci, codul nostru final jQuery arată astfel:
(funcția ($) var card = $ (".card"); card.on ('mousemove', funcția (e) var x = e.clientX - $ (this) fereastra) .scrollLeft (); var y = e.clientY - $ (acest) .offset () top + $ (fereastra) .scrollTop (); var rY = hartă (x, 0, $ ), Cd ("transforma"), cd ("transform"), , "rotateY (" + rY + "deg)" + "" + "rotateX (" + -rX + "deg)"); copii ("imagine") css (tranziție: "toate" + 0,05 + "s" + "liniar",); copii ("imagine") css (tranziție: "toți" + 0.2 + "s" + "liniar",) (x, in_min, in_max, out_min, out_max) întoarcere (x - in_min), rotateY ("+ 0 +" deg) "+" "+" rotateX ("+ 0 +" deg) * (out_max - out_min) / (in_max - in_min) + out_min;) (jQuery);Iată rezultatul final. De asemenea, am folosit un font diferit de sans-serif pe text element pentru a face să arate mai bine.
Pe parcursul acestui tutorial, am învățat cum să folosim proprietatea perspectivei și structura HTML necesară pentru ca aceasta să funcționeze corect. Mai mult, am acoperit cum să înregistrăm poziția cursorului mouse-ului atunci când se așează peste un anumit element HTML.
În plus, am folosit mousemove, mouseenter, și mouseleave evenimente pentru a introduce interactivitate prin adăugarea de reguli CSS la elemente HTML cu jQuery.
Sper că v-ați bucurat de acest tutorial și ați învățat câteva metode utile.
