În tutorialul meu anterior i-am arătat cum să folosiți CSS 3D Transforms pentru a crea o dispunere izometrică a rețelei. A fost destul de dificilă, deoarece câteva browsere, cum ar fi Firefox, au abordări ușor diferite în ceea ce privește modul în care ele fac elemente pe un plan tridimensional.
În acest tutorial vom continua să explorăm Transformările 3D, construindu-ne un efect de rollovare 3D parallax, inspirat de interfața Apple TV. Încă vom folosi Envato Elements drept sursă de inspirație pentru conținutul nostru; iată la ce lucrăm:
Plasați cursorul peste miniatură și mutați cursorul; miniatura va fi înclinată în funcție de poziția cursorului și de direcția de mișcare.
Perspectivă: un Grund
Ca ființe umane, vizibilitatea noastră este limitată până la orizontul de dispariție, iar viziunea noastră binoculară creează ceea ce percepem ca perspectivă. Perspectiva ne ajută să interpretăm un obiect care să fie mai departe, mai degrabă decât pur și simplu să fie mai mic.
Grilă izometrică din tutorialul anterior nu ia în considerare "perspectiva". Dimensiunea grilei - înălțime și lățime - este de fapt reținută. În realitate, ar trebui să vedem cea mai îndepărtată latură a rețelei, din cauza perspectivei.
În CSS, putem adăuga perspectivă la transformarea 3D prin perspectivă() funcţie. Este demn de remarcat faptul că perspectivă() trebuie adăugată înainte de alte funcții de transformare, cum ar fi roti() și Traduceți() ca să intre în vigoare. De asemenea, aceasta necesită o valoare care să definească distanța de vedere față de element; dacă elementul ar trebui să fie privit din afară sau în apropierea acestuia.
Așa facem un plan 3D cu CSS. Acum, să vedem cum putem aplica acest lucru pentru a crea o efect parallax. Vom începe cu codul HTML:
Marcajul HTML
Dacă ați urmat temeinic tutorialul nostru anterior, veți găsi marcajul HTML ca fiind destul de similar. Aici avem a div cu o clasă de ItemCard împachetând numele, imaginea și link-ul indicând unul dintre elementele de pe Envato Elements.
Fonturi
Herbert Lemuel
August10
Adăugați marcajul HTML de mai sus, de sus în jos.
CSS
Începem prin adăugarea unor stiluri de resetare care, în acest caz, stabilesc dimensiunea cutiei de element frontieră-box, eliminați figura marginea elementului și face imaginea să fie fluidă.
html box-size: border-box; *, *: înainte, *: după box-size: moștenire; figura marja: 0; img max-lățime: 100%; înălțime: auto;
Cu aceasta, adăugăm câteva stiluri la ItemCard. Dincolo de regulile estetice, cum ar fi border-radius și box-shadow, definim tranziția și transformarea elementului, inclusiv perspectivă() funcţie.
Pentru mai multe informații despre ce cub-bezier () face aici, verificați cursul lui Guy Routledge:
Ușor la funcțiile Cubic Bezier în cursul nostru de pauză de cafea
O modalitate de a respira mai multă viață și o mai multă personalitate în animație pe web este să experimentați diferite setări de relaxare. În această cafea ...
Stilurile Meta
Apoi, adăugăm stiluri ItemCard elemente de copil; numele articolului, numele autorului articolului și categoria articolului. În mod similar, stilurile definesc vizibilitatea, poziția, dimensionarea, tranzițiile și transformările acestor elemente.
În acest moment, veți avea ceva care seamănă cu următoarele:
Stiluri de stat inițiale și de tip hover
Efectul parallaxului cu jQuery
Vom folosi câteva jQuery aici, deci asigurați-vă că vă conectați la jQuery undeva din documentul dvs. În CodePen adăugați https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js ca cale externă JavaScript.
Efectul de parallax este aplicat prin două evenimente jQuery mousemove și mouseout. mousemove evenimentul se declanșează atunci când cursorul se deplasează peste elementul țintă; în acest caz,.ItemCard. mouseout se declanșează atunci când cursorul mouse-ului este deja în afara elementului țintă.
$ (document) .on ("mousemove", ".ItemCard", funcția (event) ) .on ("mouseout", ".ItemCard", funcția () );
In timpul mousemove eveniment, vom prelua coordonatele cursorului mouse-ului, determina ItemCard rotație și aplicați aceste numere adăugând stiluri inline. In timpul mouseout eveniment, am elimina stilul inline, astfel încât ItemCard revine la poziția sa inițială.
$ (document) .on ("mousemove", ".ItemCard", funcție (eveniment) / ** * Jumătate din lățimea 'ItemCard' * @type integer * / var halfW = (this.clientWidth / / ** * Jumătate din înălțimea 'ItemCard' * @type integer * / var halfH = (this.clientHeight / 2); / ** * Cursorul mouse-ului coordonate X * @type integer * / var coorX = (*) * / var coordonat = (jumătateH - (event.pageY - this.offsetLeft)); * X gradul de rotație a 'ItemCard' * @type integer * / var degX = ((coorY / halfH) * 10) + 'deg'; // gradul maxim = 10 / ** * Y grad de rotație ' '* @type integer * / var degY = ((coorX / halfW) * -10) +' deg '; // maxima grad = 10 / ** * Adăugarea stilurilor inline * / $ (this) ('+ transformare', functie () return 'perspectiva (600px) rotateY (' + degY + ')';) ('.ItemCard__summary') .css (perspectiva "transformare", funcție () retur " (600px) traduce3d (0, 0, 0) rotateX ('+ degX +') rotateY ('+ degY +') '; ); ) .on ("mouseout", ".ItemCard", funcția () / ** * Eliminați stilurile inline * / $ (this) .removeAttr ('style') .children ('.ItemCard__summary' "stil"););
Și asta e o înfășurare.
Înfășurarea în sus
În acest tutorial am învățat cum să folosim transformările 3D pentru a construi un efect 3D de parallax inspirat de Apple TV.
Rețineți că acest efect nu va funcționa bine pe dispozitivele cu funcție de atingere, deci va trebui să luați în considerare un fel de rezervă, eventual cu Touch Events pentru a replica efectul parallaxului - o voi lăsa pe masă pentru a vă aborda!
Accentsconagua
Share
Fonturi
Stiluri de stat inițiale și de tip hover
