Simplu tehnica efectului paralaxelor

Simplu tehnica efectului paralaxelor
Simplu tehnica efectului paralaxelor

Această tehnică se bazează pe controlul vitezei de mișcare a imaginii de fundal. Să creăm un marcaj HTML care conține două secțiuni cu atributele "tip de date" și "viteză de date". Scopul atributelor va fi dezvăluit mai târziu:







tag-uri

Cu atributele de tip de date și de date-viteză, puteți face marcarea simplu și ușor de înțeles.

În conformitate cu specificațiile, toate atributele care încep cu datele vor fi tratate ca un depozit de date private. În plus, ele nu afectează șablonul.

Deoarece trebuie să controlam viteza de derulare a imaginilor de fundal, pentru parametrii cheie vom folosi date-type = "background" și data-speed = "10".

Apoi adăugați eticheta

în fiecare etichetă
.

Înainte de a trece la magia jQuery, adăugăm imagini de fundal pentru fiecare element

în codul CSS.

Și definiți stilurile pentru elementele rămase ale paginii noastre demo.

Codul magic

Utilizați jQuery. Să începem cu metoda standard document.ready (). pentru a fi siguri de încărcarea paginii și disponibilitatea acesteia de manipulare.

Acum aveți nevoie de atenție. Primul lucru care se întâmplă aici este repetarea tuturor elementelor

cu atributul type = "background" de pe pagină.

În funcția .each () adăugăm o altă funcție .scroll (). care se numește atunci când derularea începe.

Trebuie să determinați cât de mult a derulat pagina de utilizator și apoi să împartă valoarea rezultată cu suma specificată în atributul de viteză de date.

$ window.scrollTop () - obțineți valoarea curentă de defilare din partea de sus. $ bgobj.data ('speed') se referă la atributul de viteză a datelor în marcare. yPos este valoarea finală care este utilizată pentru defilare. Cu toate acestea, este utilizată o valoare negativă, deoarece fundalul este deplasat în direcția opusă deplasării utilizatorului.







În exemplul nostru, atributul de viteză a datelor este 10. Să presupunem că fereastra browserului se derulează la 57px. Aceasta înseamnă că 57px este împărțit la 10 = 5.7px.

Acum trebuie să colectăm toate datele într-o singură valoare. Pentru a păstra poziția orizontală a fundalului static, vom folosi o valoare de 50% pentru proprietatea xPosition. Apoi adăugați yPos ca valoare a proprietății yPosition. apoi asociați coordonatele cu fundalul

. $ bgobj.css (); .

În forma finală, codul va arăta astfel:

Clamp pentru IE

Un lucru rămâne: versiunile mai vechi ale IE nu pot afișa etichete

și
. Problema este ușor de rezolvat, vom folosi soluția standard pentru crearea de elemente, ceea ce face ca browserul să recunoască tagurile HTML5.

În plus, folosim fișierul de resetare CSS. astfel încât toate browserele să imprime pagina în același mod.

Simplu tehnica efectului paralaxelor

Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

Simplu tehnica efectului paralaxelor

Simplu tehnica efectului paralaxelor

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Simplu tehnica efectului paralaxelor

Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

Simplu tehnica efectului paralaxelor

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!







Articole similare

Trimiteți-le prietenilor: