Share
Ce veți creaTrecând de la tutorialul precedent, să adăugăm ceva înflorirea construirii noastre.
Vom descurca în Animații CSS3 și vom crea o animație simplă de filare pentru pictograma noastră de încărcare. Avem deja marcajele de care avem nevoie pe pagină, așa că hai să intrăm direct în CSS.
div.loading culoare: darken ($ gri, 20%); poziția: absolută; lățime: 100px; fund: 15px; stânga: 50%; margin-stânga: -50px; img vertical-align: middle; & .rotate -webkit-animație-nume: rotiți; -ms-animație-nume: rotiți; animație-nume: rotiți; -webkit-animație-durată: 1s; durata animației: 1s; -webkit-animație-iterație-count: infinit; -ms-animație-iterație-count: infinit; animație-iterație-count: infinit; -webkit-animație-funcția de sincronizare: liniară; -ms-animație-temporizare-funcție: liniară; animație-temporizare-funcție: liniară;
Plasați acest cod imediat după portofoliu de element bloc în fișierul nostru Sass. Pentru început, aici punem doar câteva stiluri pentru încărcarea divului în sine. Suntem absolut poziționați-o și asigurându-vă că este centrat prin utilizarea a -Marginea din stângade -50px, care este jumătate din lățimea elementului. Acest lucru este pentru a compensa faptul că pozițiile CSS elemente din colțul din stânga sus.
Următoarea secțiune este mult mai interesantă. Așa cum ați văzut în HTML am atribuit o clasă de roti la încărcare
În mod normal, îi spunem CSS care este denumirea funcției noastre de animație (o vom crea într-un moment), cât timp ar trebui să ruleze animația, de câte ori ar trebui să ruleze și funcția de sincronizare sau de relaxare pe care să o folosiți. Pentru proiectul nostru dorim o rotație de 360 de grade frumos, care nu se oprește niciodată. Codul de mai sus va realiza exact acest lucru.
Notă: Trebuie să includem declarațiile prefixate ale browserului, astfel încât nimeni nu o pierde - și am putea îmbunătăți acest lucru prin utilizarea unui mixer Sass pentru a face ridicarea greoaie pentru noi.
Să aruncăm o privire în browser.
OK, arată foarte bine, dar lipsește un singur lucru. Nu este animație! Să rezolvăm acum acest lucru cu următorul cod:
@ -webkit-keyframes rotiți 100% -webkit-transform: rotate (360deg); transforma: roti (360deg); -webkit-transform-origin: centru centru; transformare-origine: centru centru; @să se rotească 100% -webkit-transform: rotate (360deg); -ms-transform: rotire (360deg); transforma: roti (360deg); -webkit-transform-origin: centru centru; -ms-transform-origin: centru centru; transformare-origine: centru centru;
Deci, aici este roti funcţie. Modul în care funcționează aceasta este stabilirea punctelor cheie în animație pentru a schimba elementul. Ați putea stabili ceva la 0%, 25%, 50% și așa mai departe. Animația noastră este foarte simplă, așa că avem nevoie doar de o declarație de 100%, care să precizeze că elementul trebuie rotit 360 de grade. Aceasta înseamnă că elementul nostru va efectua o rotire întreagă și va ajunge înapoi de unde a început. Setarea noastră anterioară ne asigură că va continua să se desfășoare pe termen nelimitat. transformare origine proprietatea spune CSS unde este punctul central al animației. Am putut să-l setăm să se rotească cu colțul din stânga sus ca centru (care ar putea părea interesant!), Dar vrem doar să folosim centrul exact al elementului nostru aici. Salvați acest fișier și aruncați o privire în browser!
Ar trebui să arate similar cu cele de mai sus, dar mult mai neted și mai rapid.
Asta face parte din pagina Portal de Timeline, dar există un lucru pe care îl putem adăuga în acest scop pentru acest tutorial.
Acum, în lumea reală, acest tip de aspect / temă ar conține, probabil, un fel de caracteristică de derulare infinită în care apar mai multe elemente pe măsură ce defilați în jos pe pagină, împiedicându-vă să faceți clic pentru a trece prin pagini.
Noi putem simula acest comportament aici, cu câteva rânduri de jQuery. Deschide app.js și începeți prin adăugarea următoarelor, deasupra locului în care am scris meniatorul de clic pentru titlul meniului.
var vizibilHeight = $ (document) .height () - $ (fereastră) .height (); articole var;
Mai întâi trebuie să declarăm două variabile pe care le putem folosi mai târziu. Al doilea este doar o declarație și îi va fi atribuită o valoare mai târziu. Primul, visibleHeight, apucă fereastră înălțime și scade din total document înălţime. Acest lucru ne va lăsa cu înălțimea zonei care este vizibilă în prezent în browser-ul utilizatorilor.
Accentsconagua
storeElements (); $ (fereastră) .on ('redimensionare', funcția (e) updateHeight ();); $ (fereastră) .on ('derulați', funcția (e) loadContent (););Apoi, adăugați fragmentul de mai sus. Veți vedea câteva apeluri de funcții la funcții care nu există încă, ceea ce este OK, pe măsură ce le vom crea în continuare.
funcția storeElements () items = $ ('portofoliu-element: lt (3)'). // Îndepărtați prima clasă din elementele de selecție.RemoveClass ("prima"); storeElements funcția servește ca o modalitate de a ne popula articolevariabilă cu unele elemente DOM. În cazul nostru, vrem să luăm primele trei Portofoliu-articole. Utilizarea lui jQuery lt () ne permite să alegem selectiv elementele pe care le dorim. Odată ce avem selecția, ar trebui clona ()ele, deci nu folosim elementele reale, ci o copie. Ultimul pas este eliminarea primul dacă există, deoarece nici unul dintre elementele noastre noi nu este primul din listă.
funcția updateHeight () visibleHeight = $ (document) .height () - $ (fereastră) .height ();
Plasați această funcție deasupra storeElements. Aceasta este probabil cea mai simplă funcție, deoarece face doar ceea ce am făcut documentul gata. Motivul pentru care am folosit o funcție pentru a face acest lucru este să-l păstrez reutilizabil.
Acum ajungem la funcția care face munca ...
funcția loadContent () if ($ (fereastră) .scrollTop ()> = visibleHeight) $ (fereastră) .unbind ('scroll'); var loadingWrap = $ (".load-wrap"); loadWrap.hide (function () setTimeout (function () loadWrap.before (elemente); loadingWrap.hide (function () updateHeight (); storeElements (); $ (window) ) loadContent ();););, 500);); OK, pas cu pas pe ceea ce facem aici:
visibleHeight.fereastră astfel încât să putem procesa conținutul.încărcare-wrap pentru utilizare ulterioară.încărcare-wrap în și odată ce se estompează ... Pauză pentru a simula "încărcarea" conținutului.articole inainte de încărcare-wrap. Aceasta se va potrivi frumos între pictograma de încărcare și cea curentă Portofoliu-articole.încărcare-wrap și o dată ascunsă updateHeight, storeElementsși re-atașați evenimentul de defilare la fereastră cu instrucțiuni pentru rularea din nou a acestei funcții.Pfiu! Asta pare a fi o mulțime, așa că treceți prin ea din nou, dacă aveți nevoie. Un lucru pe care îl puteți observa, dacă ești cu ochii înconjurați, este că ne estompează încărcare-wrap care este de fapt deja vizibil în HTML. Fixați că adăugând un stil inline acelui element ...
Deci, dacă salvați fișierele noastre și vizualizați munca noastră în browser, ar trebui să vedeți mai mult conținut "încărcare", odată ce ați derulat în partea de jos a paginii. Așteaptă, mai este încă un lucru pe care trebuie să-l adăugăm ...
$ ((')') '('), () ',' fals; );În interiorul
h3clic pe care am creat chiar la început trebuie să adăugăm un apel laupdateHeight (), în acest fel când dăm clic pentru a deschide un meniu, variabilele sunt actualizate pentru a reflecta modificarea înălțimii documentului. Fără aceasta, dacă deschideți un meniu pe mobil, funcția "încărcare" ar fi ruptă cavisibleHeightvariabilă ar fi incorectă.Concluzie
Am ajuns la sfârșit! Probabil am putea ordona JavaScript-ul pe care tocmai l-am scris și, într-o situație din lumea reală, probabil că ar fi schimbat la un apel AJAX sau ceva.
Sper că ați învățat câteva tehnici diferite urmând împreună cu acest tutorial. A fost plăcut să construiți și sunt bucuros să vă împărtășesc procesul pentru a aduce la viață acest design foarte frumos. Sunt sigur că există o mulțime de modalități de a îmbunătăți acest lucru, deci, dacă aveți sugestii, vă rugăm să-mi spuneți în comentarii!
