Dinamiskā saskarne jūsu vietnē piesaistīs lietotāju uzmanību un palielinās trafiku. Animētas galvenes izveidošana vietnei nav tik grūta, kā šķiet pirmajā acu uzmetienā.
Instrukcijas
1. solis
Mēģināsim izveidot animētu galveni, kas mainīs tās konfigurāciju, kad peles kursors kursēs virs tās. Piemēram, melnbalts attēls galvenē pēc mijiedarbības tika pārveidots par krāsu vai mainīts uz citu.
2. solis
Instalējiet jQuery bibliotēku savā datorā pēc lejupielādes no oficiālās vietnes (jquery.com).
3. solis
Saistiet bibliotēku ar HTML failu starp galvas tagiem, izmantojot skripta tagu:
4. solis
Atlasiet divus attēlus, kas aizstās viens otru, kad lietotājs mijiedarbosies ar galveni. Ja vēlaties, lai pāreja no melnbaltās krāsas kļūtu krāsaina, izveidojiet attēla kopiju un desaturējiet to Photoshop.
5. solis
Izveidojiet divu vienumu sarakstu html dokumentā un pievienojiet attēlus katram, izmantojot attēla tagu. Piemērojiet stila klasi, piemēram, pašam sarakstam
6. solis
Dariet to div, kas ir atbildīgs par jūsu vietnes galveni. Pirmkārt, norādiet attēla adresi, kas jāatspoguļo statiskā stāvoklī, un pēc tam to, kas parādās uz kursora.
7. solis
Pirmajam attēlam pievienojiet class = "pervaya", bet otrajam - class: "vtoraya".
8. solis
Pievienotajā css failā norādiet šo klašu absolūto pozicionēšanu (pozīcija: absolūtā;), fiksēto augstumu un platumu (augstumu un platumu).
9. solis
Slāņojiet attēlus viens uz otra. Tam izmantojiet z indeksa stilu. Tas ļauj izlīdzināt elementus gar z asi, kas ekrāna dziļumā iet prom no mums.
10. solis
Pašam sarakstam norādiet nepieciešamo atkāpi, izlīdzinājumu un noņemiet saraksta vienumus (list-style-type: none;).
11. solis
Izveidojiet.js failu un ielīmējiet tajā šādu kodu:
$ (dokuments).ready (funkcija () {
$ ("img.grey"). virziet kursoru (funkcija () {
$ (this).stop (). animēt ({"necaurredzamība": "0"}, "lēns");
}, funkcija () {
$ (this).stop (). animēt ({"necaurredzamība": "1"}, "lēns");
});
});
12. solis
Šis kods animēs jūsu galveni darbībā. Neaizmirstiet savienot.js failu ar html dokumentu.
