Efectele derulării (scrolling) până în prezent sunt foarte fericite. Când un utilizator derulează o pagină în jos, conținutul nu se mișcă doar în sus și în jos, ci devine viu și interesant. Din păcate, până în prezent nu există nici o modalitate de a implementa efecte atunci când defilați doar cu codul CSS. Dacă nu sunteți familiarizați cu j # 097; vascript, atunci nu aveți noroc.
Introducere în Stroll.js
Stroll.js este o mică bibliotecă JS care vă permite să creați animații atractive și să le aplicați la defilare. Linia de jos este că aveți un grup de articole în lista derulantă și folosiți Stroll.js pentru a face scrollingul mai atractiv.
Pagina de pornire a proiectului (prezentată mai sus) este echipată cu mai multe demonstrații, pe care puteți încerca să vedeți ce efecte sunt disponibile. Animațiile în sine sunt proiectate cu transformări simple pe CSS3, astfel încât să puteți schimba cu ușurință ele.
Să creați demo-ul nostru!
De fiecare dată când întâlnim proiecte interesante, cum ar fi Stroll.js, dorim imediat să le încercăm, să creăm ceva înșine. Citirea documentației plictisitoare este, fără îndoială, bună și utilă, dar este rare să obțineți o impresie reală până când o încercați. De aceea astăzi o vom face.
În primul rând, știm că vom avea o listă, deoarece Stroll.js se învârte în jurul valorii de toate acestea: pentru a anima liste de defilare. În demo, elementele din listă erau simple linii de text, dar am vrut să mergem mai departe și să vedem cum se va comporta Stroll.js într-o situație reală. Am făcut ca fiecare articol din listă să conțină o imagine, un titlu și un text.
Aparent, am început cu o listă neordonată și apoi i-am întrebat elementele copilului, care conțin trei elemente, despre care am vorbit deja.
Dacă pornim în documentație, vom vedea că tipul efectului se bazează pe clasa aplicată pe lista neordonată. Mai întâi, folosim efectul "flip". De asemenea, j # 097; vascript va determina elementul părinte al listei, deci trebuie să-l creăm.
Apoi, trebuie să umplem conținutul din interiorul articolului din listă. Utilizăm imaginea, titlul și textul de umplere.
În cele din urmă, vom extinde lista noastră astfel încât să includă în total 8 puncte. Se pare că acest lucru nu este suficient, dar ele vor fi destul de voluminoase, așa că vom avea suficient conținut pentru derulare.
În acest stadiu ar trebui să aveți deja tot conținutul necesar. Acum, totul arată ca o grămadă mare de gunoi, dar în etapele ulterioare vom face acest lucru în mod corespunzător.
Nu este nimic deosebit aici, restabilim doar câțiva parametri CSS și setăm culoarea de fundal pentru corp. Este clar că într-un proiect real veți folosi o resetare mai detaliată, dar pentru un demo, nu am stabilit acest obiectiv.
În ceea ce privește proiectarea imaginilor, aici adăugăm un câmp cu grosimea de 20 de pixeli pentru a avea un pic de spațiu, precum și parametrul razei de graniță egal cu 50% (nu uitați de prefixele browserului), astfel încât miniaturile să fie rotunde. De asemenea, vom alinia imaginile la stânga astfel încât textul să fie afișat în partea laterală a acestora, nu sub ele.
În ceea ce privește fonturile, aici trebuie să specificăm stilurile h2 și paragraful. Am folosit un font cu caractere aldine fără sans serif pentru titluri și o etichetă cu punct standard cu un font serif. De asemenea, atragem atenția asupra faptului că pentru paragraf folosim un font ușor mai deschis.
Am ajuns la cea mai mare piesă de cod CSS - partea finală, care va face ca lista noastră să fie perfectă. Setați poziționarea la valoare relativă, lățimea la 800 de pixeli și înălțimea - la 510. Aplicați apoi marginile și liniuțele și asigurați-vă că stilul listei de parametri este setat la Nici unul.
Asigurați-vă că acordați atenție depășirii. Expuneți overflow-x la ascuns și overflow-x la o parcurgere, deoarece lista noastră ar trebui să fie derulantă.
Acum că ați terminat aproape cu designul listei neordonate, este timpul să setați stiluri pentru elementele listate. Din nou, setați poziționarea (relativă), înălțimea cu 200 de pixeli, indentarea cu 20 de pixeli. Apoi setați culorile pentru fundal și fonturi, setați parametrul de depășire la auto și setați parametrul z-index la 2.
Dificultatea constă aici în al doilea selector. Folosim nth-child (ciudat) pentru a diversifica culorile fiecărui element din listă, ceea ce ne permite să le evidențiem printre texte. Acest lucru nu este acceptat în IE, dar Scroll.js nu este de asemenea suportat, deci îl vom folosi. Cu toate acestea, nu uitați să utilizați Selectivizr pentru a crește nivelul de asistență pentru selectori. În general, dacă efectele derulării nu sunt acceptate în aproape orice browser, atunci trebuie să încercați să extindeți suportul pentru cel puțin restul designului vizual.
Majoritatea lucrărilor s-au făcut deja! Lista noastră arată impresionantă și tot ce trebuie să facem este să o reînvieți cu vascript. Nu va fi greu, crede-ne!
Deci, la începutul acestui tutorial v-am promis că nu veți avea nevoie de cunoștințe despre vascript pentru a termina totul. Cu toate acestea, acum vă oferim un mic j Vaster!
De fapt, trebuie doar să copiați și să inserați un mic fragment de cod j # 097; vascript pentru ao face să funcționeze.
Inserați următorul cod la sfârșitul corpului documentului dvs. HTML.
Vezi tu? Nu așa de rău. Tot ce trebuie sa faci este sa il inregistrezi si sa te asiguri ca ai folosit ID-ul corect. În proiectul nostru am folosit #main, dar poți folosi propria notație.
Aceasta incheie dezvoltarea noastra! Pentru a schimba efectul, trebuie doar să aplicați o altă clasă pe lista neordonată. În demo-ul nostru am folosit flip, curl și înclinare.
Gândindu-te la efectele pe care le puteți înfrumuseța propriile desene, ne ajutați să vă plimbați în lumea posibilităților interesante. Cu toate acestea, cu orice efect, puteți exagera. Puteți perfecta pagina și puteți strica impresia, iar linia de aici este foarte subțire. Utilizați Scroll.js foarte înțelept și subtil, iar efectul nu vă va face să așteptați.