Dinamičen vmesnik na vašem spletnem mestu bo pritegnil pozornost uporabnikov in povečal promet. Izdelava animirane glave za spletno stran ni tako težka, kot se zdi na prvi pogled.
Navodila
Korak 1
Poskusimo narediti animirano glavo, ki bo spremenila svojo konfiguracijo, ko nad njo lebdi miškin kazalec. Na primer, črno-bela slika v glavi je bila ob interakciji pretvorjena v barvo ali spremenjena v drugo.
2. korak
Knjižnico jQuery namestite v računalnik, potem ko jo prenesete z uradnega spletnega mesta (jquery.com).
3. korak
Knjižnico povežite s svojo datoteko html med oznakami glave z uporabo skriptne oznake:
4. korak
Izberite dve sliki, ki se bosta med seboj zamenjali, ko uporabnik komunicira z glavo. Če želite preiti s črno-bele na barvno, ustvarite kopijo slike in jo desaturirajte v Photoshopu.
5. korak
Ustvari seznam dveh elementov v html-dokumentu in vsakemu priloži slike s pomočjo slikovne oznake. Na primer uporabite slog sloga za sam seznam
6. korak
Naredite to v divju, ki je odgovoren za glavo vašega spletnega mesta. Najprej določite naslov slike, ki naj bo odsevna v statičnem stanju, in nato tisto, ki se prikaže pri miškanju.
7. korak
Na prvo sliko dodajte class = "pervaya", na drugo sliko pa razred: "vtoraya".
8. korak
V priloženi datoteki css določite absolutno pozicioniranje elementov (position: absolute;), fiksno višino in širino (višina in širina) za te razrede.
9. korak
Slike položite eno na drugo. Za to uporabite slog z-indeksa. Omogoča vam poravnavo elementov vzdolž osi z, ki se od nas oddaljuje v globini zaslona.
10. korak
Za sam seznam navedite zamik, poravnavo, ki jo potrebujete, in odstranite elemente seznama (vrsta sloga seznama: nič;)
11. korak
Ustvarite datoteko.js in vanjo prilepite naslednjo kodo:
$ (dokument).ready (funkcija () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
12. korak
Ta koda bo aktivirala vašo glavo. Ne pozabite povezati datoteke.js z dokumentom html.
