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
Î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
Înainte de a trece la magia jQuery, adăugăm imagini de fundal pentru fiecare element
Ș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
Î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
Î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
În plus, folosim fișierul de resetare CSS. astfel încât toate browserele să imprime pagina în același mod.
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!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
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.
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!