Sivustosi dynaaminen käyttöliittymä herättää käyttäjien huomion ja lisää liikennettä. Animoidun otsikon tekeminen verkkosivustolle ei ole niin vaikeaa kuin se näyttää ensi silmäyksellä.
Ohjeet
Vaihe 1
Yritetään tehdä animoitu otsikko, joka muuttaa sen kokoonpanoa, kun hiiren kohdistin leijuu sen päälle. Esimerkiksi otsikossa oleva mustavalkoinen kuva muutettiin väriksi vuorovaikutuksessa tai vaihdettiin toiseen.
Vaihe 2
Asenna jQuery-kirjasto tietokoneellesi, kun olet ladannut sen viralliselta verkkosivustolta (jquery.com).
Vaihe 3
Linkitä kirjasto html-tiedostoon päätagien välillä komentotunnisteen avulla:
Vaihe 4
Valitse kaksi kuvaa, jotka korvaavat toisensa, kun käyttäjä on vuorovaikutuksessa otsikon kanssa. Jos haluat siirtyä mustavalkoisesta värilliseen, luo kopio kuvasta ja poista tyydyttämättömyys kuvasta Photoshopissa.
Vaihe 5
Luo luettelo kahdesta html-asiakirjan kohdasta ja liitä kuvat kuhunkin kuvatunnisteen avulla. Käytä tyyliluokkaa esimerkiksi itse luetteloon
Vaihe 6
Tee tämä divissa, joka on vastuussa sivustosi otsikosta. Määritä ensin kuvan osoite, jonka tulisi näkyä staattisessa tilassa, ja sitten osoitin, joka näkyy hiiren osoittimessa.
Vaihe 7
Lisää class = "pervaya" ensimmäiseen kuvaan ja class: "vtoraya" toiseen kuvaan.
Vaihe 8
Määritä liitteenä olevassa css-tiedostossa elementtien absoluuttinen sijainti (sijainti: absoluuttinen;), kiinteä korkeus ja leveys (korkeus ja leveys) näille luokille.
Vaihe 9
Kerro kuvat päällekkäin. Käytä tähän z-indeksityyliä. Sen avulla voit kohdistaa elementtejä z-akselilla, joka menee pois meistä näytön syvyydessä.
Vaihe 10
Määritä itse luettelolle sisennys, tasaus ja poista luettelokohteet (list-style-type: none;).
Vaihe 11
Luo.js-tiedosto ja liitä seuraava koodi siihen:
$ (asiakirja).ready (funktio () {
$ ("img.grey"). vie hiiri (funktio () {
$ (this).stop (). animoi ({"opasiteetti": "0"}, "hidas");
}, funktio () {
$ (this).stop (). animoi ({"opasiteetti": "1"}, "hidas");
});
});
Vaihe 12
Tämä koodi animoi otsikkosi toiminnaksi. Älä unohda yhdistää.js-tiedostoa HTML-asiakirjaan.
