Cred că mulți dintre voi ați observat că tendința include acum mai multe și mai coezive elemente de design care rămân în minte atunci când utilizatorul derula pagina. Ca și în opinia mea, este foarte convenabil, mai ales în cazul în care este site-ul de navigare. Aici este un exemplu de azi și vom face. Vom învăța cum să facă un site capac animat pe JQuery și CSS3 animație.
Ca de obicei, acest lucru se face într-un minim de linii de cod și este foarte simplu, și în același timp foarte eficient. Ei bine, acum să trecem la lecția.
Ι Demo Descărcați
Codul HTML este foarte, foarte simplu, avem nevoie doar pentru a seta tag-ul pentru antetul site-ului. și mai departe între ele scrie conținutul site-ului:
Deoarece acesta este un exemplu foarte simplu, aici am adăugat un text simplu între H1 tag-uri, dar ei pot folosi, de asemenea, imaginea sau, de exemplu, navigarea pe site.
cod jQuery
CSS este cel mai bun mod de a pune în aplicare animații și tranziții în acest moment. Deci script-ul, vom folosi minim, și apoi să se precizeze definiția de animație de declanșare în timpul derulării.
În cazul în care valoarea poziției paginii când defilați este mai mare de 1, aceasta înseamnă că utilizatorul defilat pagina și trebuie să adăugați o clasă «lipicios» antetul tag-ul site-ului. Astfel, a declanșat animații și site-ul capac fix.
Și aici este codul:
Este important de remarcat faptul că utilizarea jQuery în acest exemplu nu este o idee bună, pentru că în cazul în care browser-ul este dezactivat Scripting, închideți apoi site-ul va fi pur și simplu fix și totul.
cod CSS va fi format din 2 părți. Primul cod va fi responsabil pentru site-ul standard de capac, care se află în poziția implicită. Al doilea cod va fi responsabil pentru capace de cartografiere atunci când utilizatorul derula pagina. Să vedem cum arată codul ca implicit:
Acum, cel mai interesant lucru: atunci când utilizatorul derulează în jos a paginii, apoi clasa se va aplica .sticky, pe care o putem defini un ecran complet diversă, la care numai posibilitatea de a CSS. Am stabilit, de asemenea, o poziție fixă, ceea ce ar capac site-ul nostru a fost întotdeauna în vedere.
Cu aceste reguli CSS, care sunt de mai jos, dorim să reducem zona de cele mai multe capace pe măsură ce derulați, schimba culoarea, și, desigur, reduce fontul. Aici este codul în sine:
Acesta este cel mai simplu exemplu, în care va trebui să înțeleagă esența lucrării. Totul depinde de designul site-ului.
Acum să adăugați câteva animație la tranziția folosind tranziție. Aici este codul:
Ι Demo Descărcați
concluzie
Asta e tot :) Pa pa. )