Web-ul se schimba in fiecare zi. Noi tehnici apar și dispar. Din acest motiv, designerii web și dezvoltatorii de front-end ar trebui să fie familiarizați cu ultimele tendințe în designul web.
Deplasarea cu efect de parallax, anteturile fixe, site-urile de o pagină și animațiile reprezintă câteva dintre direcțiile fierbinte în designul web.
În acest articol, vom examina animațiile și efectele de derulare a paginilor bazate pe CSS și jQuery.
Înainte de a începe implementarea efectelor, să trecem peste o mică introducere.
Ce sunt animațiile de efecte și defilare?
Derularea animațiilor este o tehnică nouă, răspândită, care permite unui dezvoltator din front-end să creeze medii bogate și interactive. Începe atunci când utilizatorul derulează pagina.
Pentru a determina dacă utilizatorul derulează pagina, vom folosi parcurgerea evenimentului jQuery ().
Știind că utilizatorul derulează pagina, putem determina poziția barei de derulare vertical utilizând metoda jQuery a metodei scrollTop (). și aplicați efectul dorit:
Sunt adaptabile?
Dacă trebuie să implementăm efecte adaptive de defilare, trebuie să definim următoarele proprietăți:
- Lățimea proprietății browserului;
- Proprietatea înălțimii ferestrei browserului.
Fără aceste proprietăți, efectele de derulare vor fi "statice" și nu vor funcționa corect atunci când utilizatorul modifică dimensiunea ferestrei în mod vertical sau orizontal.
Aceste valori pot fi obținute cu ușurință prin metodele jQuery de lățime () și înălțime ().
Următorul fragment de cod demonstrează verificările necesare pentru implementarea efectului de defilare.
Acum, că am decis despre elementele de bază ale efectelor de derulare, să le examinăm în acțiune pe baza a patru exemple.
Pentru simplitate, ne concentram doar pe verificarea modului în care efectele vor varia în funcție de diferitele valori ale proprietăților ferestrei de lățime și înălțime.
Acest efect este declanșat când poziția de sus a barei de derulare depășește 60 de pixeli. În acest caz, fragmentul de cod executabil arată astfel:
Codul de mai sus ascunde elementul h2 dintr-un element cu clasa .banner. și afișează elementul copil .info. care este inițial ascuns.
Acest cod poate fi scris și după cum urmează:
Următorul exemplu depinde nu numai de poziția barei de derulare, ci și de lățimea ferestrei. În special, există următoarele condiții:
- Lățimea ferestrei este de 549 de pixeli sau mai mică. În acest caz, animația pornește numai dacă poziția barei de derulare depășește 600 de pixeli.
- Lățimea ferestrei este între 550px și 991px. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 480 de pixeli.
- Lățimea ferestrei este mai mare de 991 de pixeli. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 450 de pixeli.
Codul cazurilor de mai sus este prezentat mai jos:
Codul animației care va fi lansat este următorul:
Codul de mai sus animă proprietățile de opacitate. înălțimea și lățimea elementelor .clients-info.
Al treilea efect depinde nu numai de poziția barei de derulare, ci și de lățimea ferestrei. În special, există următoarele condiții:
- Lățimea ferestrei este de 549 de pixeli sau mai mică. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 1750 px;
- Lățimea ferestrei este între 550px și 991px. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 1150 pixeli;
- Lățimea ferestrei este mai mare de 991 de pixeli. În acest caz, animația începe numai când poziția barei de derulare depășește 850 de pixeli.
Codul cazurilor de mai sus este prezentat mai jos:
Codul animației care urmează a fi executat arată astfel:
Codul de mai sus modifică secvențial proprietatea de opacitate a elementelor de metode. și apoi modifică proprietatea culorii de fond a copiilor din h4.
Acest efect depinde nu numai de poziția barei de derulare, dar și de lățimea ferestrei. În special, există următoarele condiții:
- Lățimea ferestrei este de 549 de pixeli sau mai mică. În acest caz, animația începe numai dacă poziția barei de derulare depășește 3500 pixeli;
- Lățimea ferestrei este între 550px și 991px. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 2200 pixeli;
- Lățimea ferestrei este mai mare de 991 de pixeli. În acest caz, animația începe numai atunci când poziția barei de derulare depășește 1600 pixeli.
Rezultatele din următorul cod:
Codul de animație este după cum urmează:
Codul de mai sus animă secvențial proprietățile de opacitate. la stânga. Elementele drept și de jos p. img. buton.
concluzie
Sper că exemplele prezentate aici demonstrează bine cum poate fi folosit jQuery pentru implementarea efectelor de animație și derulare.
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!
Trimiteți-le prietenilor: