Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար

Բովանդակություն:

Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար
Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար

Video: Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար

Video: Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար
Video: Ինչպես պատրաստել ԱՆԻՄԱՑԻՈՆ մուլտֆիլմ 2024, Նոյեմբեր
Anonim

Ձեր կայքի դինամիկ ինտերֆեյսը կգրավի օգտագործողների ուշադրությունը և կբարձրացնի երթևեկությունը: Կայքի համար անիմացիոն վերնագիր պատրաստելը այնքան էլ դժվար չէ, որքան թվում է առաջին հայացքից:

Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար
Ինչպես պատրաստել անիմացիոն վերնագիր կայքի համար

Հրահանգներ

Քայլ 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 փաստաթղթին:

Խորհուրդ ենք տալիս: