Një ndërfaqe dinamike në faqen tuaj do të tërheqë vëmendjen e përdoruesve dhe do të rrisë trafikun. Bërja e një header të animuar për një faqe në internet nuk është aq e vështirë sa duket në shikim të parë.
Udhëzimet
Hapi 1
Le të përpiqemi të bëjmë një kokë të animuar, e cila do të ndryshojë konfigurimin e saj kur kursori i miut qëndron mbi të. Për shembull, një fotografi bardh e zi në një kokë u kthye në ngjyrë pas bashkëveprimit ose u ndryshua në një tjetër.
Hapi 2
Instaloni bibliotekën jQuery në kompjuterin tuaj pasi ta keni shkarkuar nga faqja zyrtare e internetit (jquery.com).
Hapi 3
Lidhni bibliotekën me skedarin tuaj html midis etiketave të kokës duke përdorur etiketën e shkrimit:
Hapi 4
Zgjidhni dy fotografi që do të zëvendësojnë njëra-tjetrën kur përdoruesi ndërvepron me titullin. Nëse dëshironi të keni një tranzicion nga e zezë dhe e bardhë në ngjyrë, atëherë krijoni një kopje të fotos dhe desaturateni atë në Photoshop.
Hapi 5
Krijoni një listë të dy artikujve në dokumentin HTML dhe bashkangjitni fotografi secilit duke përdorur etiketën e imazhit. Zbatoni një klasë stili në vetë listën, për shembull
Hapi 6
Bëni këtë në div që është përgjegjës për titullin e faqes tuaj. Së pari, specifikoni adresën e figurës që duhet të pasqyrohet në një gjendje statike, dhe pastaj atë që shfaqet në pezull.
Hapi 7
Shtoni klasën = "pervaya" në foton e parë dhe klasën: "vtoraya" në foton e dytë.
Hapi 8
Në skedarin e bashkangjitur css, specifikoni pozicionimin absolut të elementeve (pozicioni: absolut;), lartësia dhe gjerësia fikse (lartësia dhe gjerësia) për këto klasa.
Hapi 9
Shtrojini fotografitë njëra mbi tjetrën. Përdorni stilin e indeksit z për këtë. Ju lejon të renditni elementë përgjatë boshtit z, i cili largohet prej nesh në thellësinë e ekranit.
Hapi 10
Për vetë listën, specifikoni prerjen, shtrirjen që ju nevojitet dhe hiqni artikujt e listës (lloji i stilit të listës: asnjë;).
Hapi 11
Krijoni një skedar.js dhe ngjisni kodin vijues në të:
$ (dokumenti). gati (funksioni () {
$ ("img.grey"). rri pezull (funksioni () {
$ (kjo).stop (). gjallë ({"perde": "0"}, "i ngadalshëm");
}, funksioni () {
$ (kjo).stop (). gjallërues ({"perde": "1"}, "i ngadalshëm");
});
});
Hapi 12
Ky kod do të animojë titullin tuaj në veprim. Mos harroni të lidhni skedarin.js me dokumentin html.
