Teie saidi dünaamiline liides köidab kasutajate tähelepanu ja suurendab liiklust. Veebisaidile animeeritud päise koostamine pole nii keeruline, kui esmapilgul tundub.
Juhised
Samm 1
Proovime teha animeeritud päise, mis muudab selle konfiguratsiooni, kui hiirekursor selle kohal hõljub. Näiteks teisendati päises olev must-valge pilt vastastikmõjul värviliseks või muudeti teiseks.
2. samm
Pärast ametlikelt veebisaitidelt (jquery.com) allalaadimist installige jQuery kogu oma arvutisse.
3. samm
Linkige teek oma HTML-failiga peatunnuste vahel skripti märgendi abil:
4. samm
Valige kaks pilti, mis asendavad üksteist, kui kasutaja päisega suhtleb. Kui soovite üleminekut mustvalgest värviliseks, siis looge pildist koopia ja desatureerige see Photoshopis.
5. samm
Looge html-dokumendis kahe üksuse loend ja lisage igale pildile pildisildi abil pildid. Rakendage stiiliklassi näiteks loendisse ise
6. samm
Tehke seda divisjonis, mis vastutab teie saidi päise eest. Kõigepealt määrake pildi aadress, mis peaks staatilises olekus kajastuma, ja seejärel see, mis kuvatakse hõljukil.
7. samm
Esimesele pildile lisage klass = "pervaya" ja teisele pildile klass: "vtoraya".
8. samm
Lisage lisatud css-failis nende klasside jaoks elementide absoluutne positsioneerimine (asukoht: absoluutne;), fikseeritud kõrgus ja laius (kõrgus ja laius).
9. samm
Kihtige pilte üksteise peale. Selleks kasutage z-indeksi stiili. See võimaldab teil joondada elemente piki z-telge, mis läheb meist kaugemale ekraani sügavusele.
10. samm
Loendi enda jaoks määrake vajalik taane, joondus ja eemaldage loendi üksused (list-style-type: none;).
11. samm
Looge.js-fail ja kleepige sinna järgmine kood:
$ (dokument).ready (funktsioon () {
$ ("img.grey"). hõljutage (funktsioon () {
$ (this).stop (). animeeri ({"läbipaistmatus": "0"}, "aeglane");
}, funktsioon () {
$ (this).stop (). animeeri ({"läbipaistmatus": "1"}, "aeglane");
});
});
12. samm
See kood animeerib teie päise toimimiseks. Ärge unustage ühendada.js-fail HTML-dokumendiga.
