Dinamično sučelje na vašoj web lokaciji privući će pažnju korisnika i povećati promet. Izrada animiranog zaglavlja za web stranicu nije tako teška kao što se čini na prvi pogled.
Upute
Korak 1
Pokušajmo napraviti animirano zaglavlje, koje će promijeniti svoju konfiguraciju kad lebdi kursor miša. Na primjer, crno-bijela slika u zaglavlju pretvorena je u boju nakon interakcije ili je promijenjena u drugu.
Korak 2
Instalirajte jQuery knjižnicu na svoje računalo nakon što je preuzmete sa službenog web mjesta (jquery.com).
3. korak
Povežite knjižnicu sa svojom html datotekom između head oznaka pomoću oznake skripte:
4. korak
Odaberite dvije slike koje će se međusobno zamijeniti kada korisnik stupi u interakciju sa zaglavljem. Ako želite prijeći iz crno-bijele u boju, stvorite kopiju slike i desaturirajte je u Photoshopu.
Korak 5
Stvorite popis dviju stavki u html dokumentu i priložite slike svakoj pomoću oznake slike. Primijenite, na primjer, klasu stila na sam popis
Korak 6
Učinite to u div-u koji je odgovoran za zaglavlje vaše web-lokacije. Prvo navedite adresu slike koja bi se trebala odražavati u statičnom stanju, a zatim onu koja se pojavljuje pri zadržavanju pokazivača.
Korak 7
Na prvu sliku dodajte class = "pervaya", a na drugu sliku class: "vtoraya".
Korak 8
U priloženoj css datoteci navedite apsolutno pozicioniranje elemenata (position: absolute;), fiksnu visinu i širinu (visinu i širinu) za ove klase.
Korak 9
Slojite slike jednu na drugu. Za to upotrijebite stil z-indeksa. Omogućuje vam poravnavanje elemenata duž z-osi, koja od nas odlazi u dubini zaslona.
Korak 10
Za sam popis navedite uvlačenje, poravnanje koje vam treba i uklonite stavke popisa (vrsta stila popisa: nema;).
11. korak
Stvorite.js datoteku i zalijepite sljedeći kôd u nju:
$ (dokument).ready (function () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Korak 12
Ovaj kôd će animirati vaše zaglavlje u akciju. Ne zaboravite povezati.js datoteku s html dokumentom.
