Dinaminė sąsaja jūsų svetainėje patrauks vartotojų dėmesį ir padidins srautą. Sukurti animuotą svetainės antraštę nėra taip sunku, kaip atrodo iš pirmo žvilgsnio.
Nurodymai
1 žingsnis
Pabandykime sukurti animuotą antraštę, kuri pakeis jos konfigūraciją, kai pelės žymeklis bus virš jos. Pavyzdžiui, juodai baltas paveikslėlis antraštėje buvo pakeistas į spalvą sąveikaujant arba pakeistas į kitą.
2 žingsnis
Įdiekite „jQuery“biblioteką savo kompiuteryje, atsisiųsdami ją iš oficialios svetainės (jquery.com).
3 žingsnis
Susiekite biblioteką su HTML failu tarp antraštės žymių naudodami scenarijaus žymą:
4 žingsnis
Pasirinkite dvi nuotraukas, kurios pakeis viena kitą vartotojui sąveikaujant su antrašte. Jei norite pereiti nuo nespalvoto prie spalvoto, sukurkite paveikslėlio kopiją ir desatratizuokite ją „Photoshop“.
5 žingsnis
Sukurkite dviejų elementų sąrašą HTML dokumente ir prie kiekvieno pridėkite paveikslėlius naudodami vaizdo žymą. Pavyzdžiui, pritaikykite stiliaus klasę pačiam sąrašui
6 žingsnis
Atlikite tai skyriuje, kuris yra atsakingas už jūsų svetainės antraštę. Pirmiausia nurodykite atvaizdo, kuris turėtų atsispindėti statinėje būsenoje, adresą, tada tą, kuris rodomas ant svyravimo.
7 žingsnis
Prie pirmojo paveikslėlio pridėkite class = "pervaya", o prie antrojo - class: "vtoraya".
8 žingsnis
Pridėtame css faile nurodykite absoliučią šių klasių elementų padėtį (pozicija: absoliutus;), fiksuotą aukštį ir plotį (aukštį ir plotį).
9 žingsnis
Sluoksniuokite paveikslėlius vienas ant kito. Tam naudokite z indekso stilių. Tai leidžia sulyginti elementus išilgai z ašies, kuri eina nuo mūsų ekrano gylyje.
10 žingsnis
Pačiam sąrašui nurodykite reikalingą įtrauką, sulyginimą ir pašalinkite sąrašo elementus (list-style-type: none;).
11 žingsnis
Sukurkite.js failą ir įklijuokite į jį šį kodą:
$ (dokumentas).ready (funkcija () {
$ ("img.grey"). užveskite pelės žymeklį (funkcija () {
$ (this).stop (). animuoti ({"neskaidrumas": "0"}, "lėtas");
}, funkcija () {
$ (this).stop (). animuoti ({"neskaidrumas": "1"}, "lėtas");
});
});
12 žingsnis
Šis kodas animuos jūsų antraštę veikti. Nepamirškite prijungti.js failo prie HTML dokumento.
