Ձեր կայքի դինամիկ ինտերֆեյսը կգրավի օգտագործողների ուշադրությունը և կբարձրացնի երթևեկությունը: Կայքի համար անիմացիոն վերնագիր պատրաստելը այնքան էլ դժվար չէ, որքան թվում է առաջին հայացքից:
Հրահանգներ
Քայլ 1
Եկեք փորձենք պատրաստել անիմացիոն վերնագիր, որը կփոխի իր կազմաձևը, երբ մկնիկի ցուցիչը սահի դրա վրա: Օրինակ, վերնագրի սեւ-սպիտակ նկարը փոխազդեցության արդյունքում վերածվեց գույնի կամ փոխվեց մեկ այլի:
Քայլ 2
Տեղադրեք jQuery գրադարանը ձեր համակարգչում այն պաշտոնական կայքից (jquery.com) ներբեռնելուց հետո:
Քայլ 3
Գրադարանը կապեք ձեր html ֆայլին գլխի պիտակների միջև ՝ օգտագործելով սցենարի թեգը.
Քայլ 4
Ընտրեք երկու նկար, որոնք փոխարինելու են միմյանց, երբ օգտագործողը վերնագրի հետ փոխազդում է: Եթե ցանկանում եք անցում կատարել սևից և սպիտակից գույնի, ապա ստեղծեք նկարի պատճենը և հոտեք այն Photoshop- ում:
Քայլ 5
Ստեղծեք html- փաստաթղթում երկու կետի ցուցակ և յուրաքանչյուրին կցեք նկարներ `օգտագործելով պատկերի պիտակը: Կիրառեք ոճի դաս ՝ բուն ցուցակում, օրինակ
Քայլ 6
Դա արեք այն բաժնում, որը պատասխանատու է ձեր կայքի վերնագրի համար: Նախ նշեք պատկերի հասցեն, որը պետք է արտացոլվի ստատիկ վիճակում, ապա այն, որը հայտնվում է սավառնել:
Քայլ 7
Առաջին նկարին ավելացնել դաս = "pervaya", իսկ երկրորդ նկարին ՝ դաս: "vtoraya":
Քայլ 8
Կցված css ֆայլում նշեք այս դասերի տարրերի բացարձակ դիրքավորումը (դիրքը ՝ բացարձակ;), ֆիքսված բարձրությունն ու լայնությունը (բարձրությունը և լայնությունը):
Քայլ 9
Նկարները շարեք միմյանց վրա: Դրա համար օգտագործեք z-index ոճը: Այն թույլ է տալիս հավասարեցնել տարրերը z առանցքի երկայնքով, որը էկրանի խորքում մեզանից հեռանում է:
Քայլ 10
Itselfանկի համար նշեք ձեր համար անհրաժեշտ ներդիրը, հավասարեցումը և հանեք ցուցակի տարրերը (ցուցակի ոճի տեսակը ՝ ոչ մեկը;):
Քայլ 11
Ստեղծեք.js ֆայլ և տեղադրեք հետևյալ կոդը ՝
$ (փաստաթուղթ): պատրաստ (գործառույթ () {
$ («img.grey»): սավառնել (ֆունկցիա () {
$ (այս). կանգ (). կենդանի ({"անթափանցիկություն". "0"}, "դանդաղ");
}, ֆունկցիա () {
$ (այս). կանգ (). կենդանի ({"անթափանցիկություն". "1"}, "դանդաղ");
});
});
Քայլ 12
Այս կոդը կօգնի ձեր վերնագիրը գործի դնել: Մի մոռացեք միացնել.js ֆայլը html փաստաթղթին:
