Share
Parallax scrolling este o tehnică interesantă, în care, pe măsură ce defilați, imaginile de fundal se traduc mai încet decât conținutul din prim-plan, creând iluzia profunzimii 3D. Așa cum am planificat să redefinesc site-ul meu personal, primul meu obiectiv a fost să scriu codul cel mai scurt și cel mai simplu pentru a obține minunate minuni! Îți arăt cum am făcut-o.
Dacă sunteți în căutarea unui mod rapid de a începe cu un șablon de bază pentru tema dvs., găsirea unei simple tematici Parallax ar putea fi o opțiune bună. Sau navigați prin șabloanele noastre de pagină. De asemenea, puteți găsi furnizori de servicii pe Envato Studio, care vă vor crea site-uri de derulare a paralela.
În acest tutorial, vă voi învăța cea mai simplă tehnică de derulare paralaxă pe care ați întâlnit-o vreodată, așa că să săpăm!
Această tehnică se învârte în jurul controlului vitezei imaginii de fundal. Deci, să începem cu marcajul HTML, creând două secțiuni împreună cu atributele cerute: „Tip de date“ și „Viteză de date“. Nu-ți face griji; O să le explic mai târziu.
Eu folosesc eticheta cu atributele Tip de date & date de viteză, care au fost introduse în HTML5. Acest lucru face ca marcajul HTML să fie mai curat și mai ușor de citit.
Conform specificațiilor pentru atributele de date personalizate, orice atribut care începe cu date- va fi tratată ca zonă de stocare a datelor private. În plus, acest lucru nu va afecta aspectul sau prezentarea.
Întrucât tot ce trebuie să facem este să controlam viteza imaginilor de fundal pe care le vom folosi date de tip = „background“ și date de viteză = „10“ ca atribute cheie pentru a specifica parametrii necesari.
Știu ce te gândești: ești îngrijorat de IE. Nu vă temeți; Am și o soluție pentru asta! O vom discuta momentan.
Apoi, să adăugăm conținutul în tag în interiorul fiecare
Sunt absolut poziționată Simplu Parallax Scroll
Ceea ce încercăm să facem aici este să facem
#home background: url (home-bg.jpg) 50% repet fixat; min-înălțime: 1000 pixeli; #about background: url (about-bg.jpg) 50% 0 nu-repeta min-height: 1000px;
După adăugarea fundalurilor pentru ambele secțiuni, ar trebui să arate:
Să adăugăm încă un stil CSS în stil și să îmbogățim pagina!
#home background: url (home-bg.jpg) 50% repet fixat; min-înălțime: 1000 pixeli; înălțime: 1000 pixeli; marja: 0 auto; lățime: 100%; max-lățime: 1920px; poziție: relativă; #home article height: 458px; poziția: absolută; text-align: centru; top: 150px; lățime: 100%; #about background: url (about-bg.jpg) 50% repet fixat; min-înălțime: 1000 pixeli; înălțime: 1000 pixeli; marja: 0 auto; lățime: 100%; max-lățime: 1920px; poziție: relativă; -webkit-box-shadow: 0 0 50px rgba (0,0,0,0,8); box-shadow: 0 0 50px rgba (0,0,0,0,8); # despre articol height: 458px; poziția: absolută; text-align: centru; top: 150px; lățime: 100%;
Ar trebui să arate așa ...
Da, este drept; acesta este locul unde începe magia! Folosind jQuery, vom începe cu standardul document.ready () pentru a vă asigura că pagina este încărcată și că este gata să fie manipulată.
$ (document) .ready (funcția () );
Această tehnică se învârte în jurul controlului vitezei imaginii de fundal care există în ambele secțiuni.
Acum am nevoie de atenția ta aici. Primul lucru care se întâmplă mai jos este că noi iterăm peste fiecare în pagina, care are atributul date de tip = „background“.
Accentsconagua
$ (document) .ready (functie () $ ('section [data-type = "background"]'); ); Adăugați o altă funcție, .sul(), interior .fiecare(), care este invocată pe măsură ce utilizatorul începe să deruleze.
$ (fereastră) .scroll (funcție () );
Trebuie să determinăm cât de mult a scrolat utilizatorul și apoi să împartă valoarea cu date de viteză valoare, menționată în marcaj.
var yPos = - ($ window.scrollTop () / $ bgobj.data ('viteza')); $ Window.scrollTop (): obținem valoarea curentă de defilare din partea de sus. Acest lucru determină, în esență, cât de mult a fost derulat de utilizator. $ Bgobj.data ( 'viteza') se referă la date de viteză alocat în marcaj și yPos este valoarea finală pe care trebuie să o aplicăm pentru defilare. Cu toate acestea, va fi o valoare negativă, deoarece trebuie să mutăm fundalul în direcția opusă deplasării utilizatorului.
Să investigăm un pic mai mult cu un exemplu:
În imaginea de mai sus, date de viteză este 10, și să presupunem că fereastra browserului a derulat 57px. Asta înseamnă 57px impartit de 10 = 5.7px.
// Puneți împreună poziția finală de fond var coords = '50% '+ yPos +' px '; // Mutați fundalul $ bgobj.css (backgroundPosition: coords);
Ultimul lucru pe care trebuie să-l facem este să ne alcătuim poziția finală de fundal într-o variabilă. Pentru a păstra poziția orizontală a fundalului ca fiind statică, l-am atribuit 50% ca a lui xPosition. Apoi, am adăugat yPos dupa cum yPosition, și, în final, i-au fost atribuite coordonatele de fond fundal: $ bgobj.css (backgroundPosition: coords);.
Codul dvs. final ar putea să arate astfel:
$ (document) .ready (functie () $ ('section [data-type = "background"]' ) .scroll (function () var yPos = - ($ window.scrollTop () / $ bgobj.data ('viteza')) px '; // Mutarea fundalului $ bgobj.css (backgroundPosition: coords);););); Da, am făcut-o! Încearcă-te pentru tine.
Există o ultimă soluție: IE mai veche nu poate reda și Etichete. E ușor de rezolvat, totuși; vom folosi soluția standard de creare a elementelor, ceea ce face ca browserul să recunoască în mod magic etichetele HTML5.
// Creați elemente HTML5 pentru documentul IE document.createElement ("articolul"); document.createElement ( "secțiunea"); În plus, trebuie să folosim un fișier de resetare CSS de bază pentru a face toate browserele să se joace frumos. Din fericire, unelte precum HTML5 Boilerplate se ocupă de greutatea muncii pentru noi, atunci când vine vorba de normalizarea încrucișată a browserului.
Asta face pentru această lecție! Orice întrebări sau note pe care doriți să le adăugați? Lasă-mă să știu mai jos!
Și dacă sunteți în căutarea unei soluții rapide cu rezultate profesionale, atunci parcurgeți opțiunile noastre Parallax Theme și One Page Template, disponibile pentru cumpărare pe ThemeForest.
