Sizning saytingizdagi dinamik interfeys foydalanuvchilar e'tiborini tortadi va trafikni ko'paytiradi. Veb-sayt uchun animatsion sarlavha yaratish, birinchi qarashda ko'rinadigan darajada qiyin emas.
Ko'rsatmalar
1-qadam
Sichqoncha kursori uning ustida turganda uning konfiguratsiyasini o'zgartiradigan animatsion sarlavha yaratishga harakat qilaylik. Masalan, sarlavhadagi oq-qora rasm o'zaro ta'sirlashganda rangga aylantirildi yoki boshqasiga o'zgartirildi.
2-qadam
JQuery kutubxonasini rasmiy veb-saytidan (jquery.com) yuklab olgandan so'ng uni kompyuteringizga o'rnating.
3-qadam
Skript yorlig'i yordamida kutubxonani html fayliga bosh teglar o'rtasida bog'lang:
4-qadam
Foydalanuvchi sarlavha bilan o'zaro aloqada bo'lganda bir-birining o'rnini bosadigan ikkita rasmni tanlang. Agar siz oq va oq rangdan rangga o'tishni xohlasangiz, unda rasmning nusxasini yarating va fotoshopda uni to'ydirmang.
5-qadam
HTML-hujjatdagi ikkita element ro'yxatini yarating va rasm yorlig'i yordamida har biriga rasmlarni qo'shing. Masalan, uslublar sinfini ro'yxatning o'ziga qo'llang
6-qadam
Buni saytingiz sarlavhasi uchun javobgar bo'lgan divda bajaring. Birinchidan, statik holatida aks ettirilishi kerak bo'lgan rasmning manzilini, so'ngra hoverda paydo bo'ladigan manzilni ko'rsating.
7-qadam
Birinchi rasmga class = "pervaya" ni, ikkinchi rasmga class: "vtoraya" ni qo'shing.
8-qadam
Qo'shilgan CSS faylida ushbu sinflar uchun elementlarning mutlaq joylashishini (pozitsiya: mutlaq;), belgilangan balandlik va kenglikni (balandlik va kenglik) aniqlang.
9-qadam
Rasmlarni bir-birining ustiga qo'ying. Buning uchun z-indeks uslubidan foydalaning. Bu sizga ekranning chuqurligida bizdan uzoqlashadigan z o'qi bo'ylab elementlarni tekislash imkonini beradi.
10-qadam
Ro'yxatning o'zi uchun kerakli chiziqni, tekislashni ko'rsating va ro'yxat elementlarini olib tashlang (list-style-type: none;).
11-qadam
. Js faylini yarating va unga quyidagi kodni joylashtiring:
$ (document).ready (function () {
$ ("img.grey"). hover (funktsiya () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, funktsiya () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
12-qadam
Ushbu kod sizning sarlavhangizni harakatga keltiradi.. Js faylini HTML hujjatiga ulashni unutmang.
