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.
Instrukcije
Korak 1
Pokušajmo napraviti animirano zaglavlje, koje će promijeniti svoju konfiguraciju kad lebdi kursor miša iznad njega. Na primjer, crno-bijela slika u zaglavlju pretvorena je u boju nakon interakcije ili je promijenjena u drugu.
Korak 2
Instalirajte jQuery biblioteku na svoj računar nakon što je preuzmete sa službene web stranice (jquery.com).
Korak 3
Povežite biblioteku s vašom html datotekom između head oznaka pomoću oznake skripte:
Korak 4
Odaberite dvije slike koje će se međusobno zamijeniti kada korisnik stupi u interakciju sa zaglavljem. Ako želite prijelaz iz crno-bijele u boju, stvorite kopiju slike i desaturirajte je u Photoshopu.
Korak 5
Kreirajte listu od dvije stavke u html-dokumentu i priložite slike svakoj pomoću oznake slike. Primijenite klasu stila na samu listu, na primjer
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 koristite stil z-indeksa. Omogućava vam poravnavanje elemenata duž z-osi, koja od nas odlazi u dubini ekrana.
Korak 10
Za sam popis navedite uvlačenje, poravnanje koje vam treba i uklonite stavke popisa (vrsta stila liste: nema;).
Korak 11
Kreirajte.js datoteku i zalijepite u nju sljedeći kod:
$ (dokument).ready (funkcija () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"neprozirnost": "0"}, "sporo");
}, function () {
$ (this).stop (). animate ({"neprozirnost": "1"}, "sporo");
});
});
Korak 12
Ovaj kôd će animirati vaše zaglavlje u akciju. Ne zaboravite povezati.js datoteku s html dokumentom.
