Această tendință a început cu panourile laterale, dar astăzi popularitatea sa a crescut până la antetul site-ului. De ce? Deoarece de multe ori în secțiunile antetului există un meniu de navigare.
Să aruncăm o privire la dezvoltarea a ceea ce vom face astăzi.
Dacă doriți să urmați codul în cursul manualului, codul complet poate fi descărcat aici.
HTML-ul pentru exemplul nostru este destul de simplu. Tot ce avem nevoie este h1 în interiorul antetului. Sub el vom avea o imagine care obligă vizitatorii să parcurgă pagina, ceea ce ne va permite să testați efectul.
Tranzițiile CSS reprezintă cea mai bună modalitate de a controla animația pe care trebuie să o aplicați în secțiunea antetul lipicios. Tot ceea ce folosim pentru jQuery este definirea poziției de defilare.
Aceasta înseamnă că vom avea ocazia să stilizăm partea antetului pe baza aplicării clasei "lipicioase".
Este important să subliniem că în acest exemplu jQuery ne ajută destul de bine, dar există o opțiune de backup excelentă. Dacă asistența pentru j # 097; vascript este dezactivată, navigarea va continua să funcționeze, deoarece antetul va fi formatat ca porțiunea de antet obișnuită a oricărui site web.
Codul nostru CSS este utilizat pentru a stiliza două poziții diferite: pozițiile implicite și pozițiile "lipicioase". Iar între aceste două poziții nu există o tranziție.
Mai întâi, să adăugăm câteva stiluri simple care îmbunătățesc aspectul secțiunii antetului nostru:
Acum, să trecem la cele mai interesante: atunci când utilizatorul scroll pagina, clasa "lipicios" este aplicată antetului, iar acum avem posibilitatea de a o proiecta diferit, redefinind prioritatea atenției pe pagină. De asemenea, specificăm o poziționare fixă, astfel încât locația sa să nu se schimbe.
Aici trebuie să facem câteva lucruri: în primul rând, trebuie să schimbăm mărimea, ceea ce ne-ar permite să luăm mai puțin spațiu pe ecran. De asemenea, trebuie să modificați culoarea și să setați alinierea spre stânga astfel încât acest element să nu interfereze vizual cu utilizatorii:
În general, ceea ce decideți să faceți aici depinde de designul de care aveți nevoie. Și deci poți să faci ce vrei, desigur.
Dacă încercați acum ce se întâmplă, veți vedea că porțiunea de antet se modifică atunci când pagina se derulează.
Acum, pentru a anima aceste modificări, tot ce trebuie să facem este să setăm tranziția pentru antet:
Cu abilitatea de a folosi proprietățile CSS3 și a comuta clase cu jQuery, dezvoltarea anteturilor animate a devenit o sarcină incredibil de simplă.
Ce altceva trebuie menționat este faptul că codul se adaptează perfect situațiilor diferite.
Articole similare
Trimiteți-le prietenilor: