A webhelyén lévő dinamikus felület felkelti a felhasználók figyelmét és növeli a forgalmat. Animált fejléc készítése egy webhely számára nem olyan nehéz, mint amilyennek első pillantásra tűnik.
Utasítás
1. lépés
Próbálkozzunk egy animált fejléc készítésével, amely megváltoztatja a konfigurációját, amikor az egér kurzora lebeg rajta. Például a fejlécben lévő fekete-fehér képet interakció közben színné alakították át, vagy másra változtatták.
2. lépés
Telepítse a jQuery könyvtárat a számítógépére, miután letöltötte a hivatalos webhelyről (jquery.com).
3. lépés
A szkriptcímke segítségével kösse össze a könyvtárat a html fájljával a fejcímkék között:
4. lépés
Válasszon két képet, amelyek helyettesítik egymást, amikor a felhasználó interakcióba lép a fejléccel. Ha fekete-fehérről színesre szeretne váltani, akkor készítsen egy másolatot a képről, majd deszaturálja azt a Photoshopban.
5. lépés
Készítsen két elem listáját a html-dokumentumban, és csatoljon képeket mindegyikhez a képcímke segítségével. Alkalmazzon egy stílusosztályt például magában a listában
6. lépés
Tegye ezt a webhely fejlécéért felelős div-ben. Először adja meg a kép címét, amelynek statikus állapotban kell tükröződnie, majd az egérrel az egérrel.
7. lépés
Adja hozzá az első képhez a class = "pervaya" -t, a második képhez pedig a class: "vtoraya" -t.
8. lépés
A csatolt css fájlban adja meg az elemek abszolút pozicionálását (pozíció: abszolút;), rögzített magasságot és szélességet (magasság és szélesség) ezekhez az osztályokhoz.
9. lépés
Rétegezze a képeket egymásra. Ehhez használja a z-index stílust. Lehetővé teszi az elemek igazítását a z-tengely mentén, amely elmúlik tőlünk a képernyő mélységében.
10. lépés
Magának a listának adja meg a szükséges behúzást, igazítást, és távolítsa el a listaelemeket (list-style-type: none;).
11. lépés
Hozzon létre egy.js fájlt, és illessze be a következő kódot:
$ (dokumentum).ready (függvény () {
$ ("img.grey"). lebegjen (függvény () {
$ (this).stop (). animáció ({"átlátszatlanság": "0"}, "lassú");
}, függvény () {
$ (this).stop (). animáció ({"átlátszatlanság": "1"}, "lassú");
});
});
12. lépés
Ez a kód élénkíti a fejlécet. Ne felejtse el összekapcsolni a.js fájlt a html dokumentummal.
