Bună ziua, dragi cititori ai blogului beloweb.ru. Astăzi vreau să vă spun cum să faceți parallax atunci când derulați prin JQuery și CSS3.
În primul rând, vreau să spun că acest efect este într-adevăr foarte eficient. Și este foarte folosită pe Internetul străin. Datorită acestui parallax este creat, ca să spunem așa, efectul adâncirii și prezenței. Toate acestea îi obligă pe utilizatori să vină pe acest site tot mai mult, doar pentru a admira frumusețea sa.
Probabil că vă amintiți că am arătat câteva exemple de astfel de site-uri care utilizează parallax atunci când derulează o pagină. Dacă ați pierdut această colecție, atunci asigurați-vă că vedeți că este aici.
Vizionat? V-ați dorit. -) Să creați.
Exemplu Ι Descărcați surse
Vreau să vă spun o mare mulțumire pentru f6design.com. pentru acest efect remarcabil.
Vreau doar să spun că mi-am creat propriul exemplu pe baza acestui demo. Ce sa întâmplat în mine, puteți vedea aici.
Cum funcționează?
Prietenii, așa cum sa dovedit, nu există nimic supranatural și greu acolo. Mai întâi, este creată o pagină HTML. Apoi, obiectele sunt create sau desenate, de exemplu în Photoshop. După ce totul este deja creat, trebuie să determinați imediat unde va fi obiectul pe pagină și, de asemenea, la ce viteză va derula atunci când utilizatorul va derula pagina.
După utilizarea CSS, de exemplu, sunt create trei straturi (poate mai multe), 1,2 și 3. Apoi, obiectele deja terminate sunt inserate în fiecare strat. Aceste obiecte sunt date în poziția exactă pe pagină în pixeli. Apoi setați viteza de defilare pentru fiecare strat. De obicei, un strat (îndepărtat) este derulat mai încet decât al doilea și așa mai departe. Un alt aspect important este faptul că indexul z este setat pentru fiecare strat. Acest parametru determină care dintre ele va fi obiectul.
Cu alte cuvinte, avem un astfel de site stratificat :-) Dar arata foarte bine.
Mai întâi trebuie să creați o pagină HTML:
După cum puteți vedea, toate obiectele de pe această pagină sunt deja clase atribuite, pe care le vom folosi mai târziu în stiluri. De asemenea, avem deja 3 straturi care au clase:
- parallax-bg3 - primul strat, cel mai de sus.
- parallax-bg2 - al doilea strat, mediu.
- parallax-bg1 - și cel de-al treilea strat, cel mai mic.
Și desene (obiecte) gata făcute sunt deja atribuite fiecăruia dintre cele trei straturi.
Pe pagină, avem text care rulează standard. De asemenea, are o poziție fixă, dar el se rotește împreună cu fundalul. Deși pentru text puteți seta și viteza de defilare, dar trebuie să creați un al patrulea strat separat.
Între etichete
și nu uitați să atașați stiluri, precum și scriptul parallax în sine:Acum, cel mai interesant.
Mai întâi trebuie să eliminați toate rubricile de pe marginea paginii. Acest lucru se face după cum urmează:
De asemenea, setăm fundalul pentru pagină, este în codul sursă și setăm înălțimea exactă a paginii, este egală cu 4550 de pixeli.
Acum pentru câmpul #wrapper în cazul în care toate obiectele noastre sunt localizate, trebuie să setați poziția: relativă; Astfel, vom arăta desenele noastre unde se află domeniul nostru.
În acest exemplu, vom folosi navigația pe așa-numitele secțiuni. Se transformă într-un fel de glisor mare. Utilizatorul are două opțiuni, faceți clic pe etichetă și se va muta automat la locația specificată sau pur și simplu derulați pagina așa cum am folosit. În ambele cazuri, arată foarte frumos.
Și aici este codul de navigare CSS:
Ei bine, acum ne întoarcem la straturile în sine
Stratul de text și poziția sa:
După cum puteți vedea, pentru textul superior (# manned-flight) poziția absolută este setată la 0 pixeli, iar pentru al doilea text (# frameless-paraachute) poziția este de 1090 pixeli, ceea ce este mult mai mic. Un alt punct important pentru conținut este dat de z-index: 4; cel mai de sus strat. Acest lucru se face astfel încât alte straturi să nu ascundă textul.
Acum vom crea straturi din imagini:
Primul strat este cel mai mare nori (# parallax-bg3):
Al doilea strat de nori:
Și al treilea strat cel mai recent:
Acum, să vedem cum arată întregul nostru fișier CSS din surse:
Și acum vom seta viteza de defilare pentru fiecare strat al stratului, aceasta se face după cum urmează:
După cum puteți vedea, pentru stratul superior parallax-bg3 cea mai mare viteză de defilare, pentru al doilea strat este cel mai mic. iar pentru ultimul strat viteza medie.
Acum, iată cum scriptul caută navigația în sine:
Exemplu Ι Descărcați surse
Simt că va fi fierbinte. D Da, probabil că toți încercați să copiați remodelarea burgheziei etc. Mă întreb aici și de unde fac astfel de idei burghezia? Probabil este o copie a buržunetului: D
Rinat, nu mă cert, asta-i tot. Dar nu mă învinovățesc pentru plagiat, într-adevăr. -) Mai mult decât atât, am legături cu sursa peste tot, și în acest post prea. În general, pentru prima oară, am auzit că există un post dat.
Cu ocazia burzhuneta. El a fost întotdeauna în fața Runet și va fi acolo. Logica Runet: de ce inventați-vă propriul dacă aveți deja un burghez. -)
Și de ce a devenit blogul 1.0 și nu a schimbat nimic?
Aici, eu, de asemenea, nu traduc lecții. Primesc un exemplu, înțeleg și scriu în cuvintele mele cum este aranjat totul. Deci, de asemenea, link-ul la sursa pus. -) Exact așa cum ați făcut în acest post.
Și am fixat niște bug-uri în cod. Și aproape am lucrat la viteza de descărcare. -) Dacă găsesc erori sau adaug unele actualizări, atunci numărul din logo se va schimba :-)
Tochnyak! Încercați să găsiți sursa originală a acestui articol pererot: tot T.k Cred că nu toată lumea dorește să pună pe cineva pe link pentru a face articolul propriu))) De asemenea, am început să uit pentru a pune link-uri pentru a fi corectate)) :)
Articole similare
Trimiteți-le prietenilor: