Բովանդակություն
Շատերը ամեն օր տեսնում են օգտագործողի ինտերֆեյս, լինի դա բջջային հավելվածի ներսում, թե կայքում, այնպես որ կարևոր է դրանք ճիշտ ստեղծելիս (կայքի ստեղծողը դա ձեզ համար կդարձնի պարզ), և եթե կարողանաք դրանք աշխուժացնել CSS անիմացիայի միջոցով: , ամենալավը:
- Ուսումնասիրեք CSS անիմացիայի նոր սահմանը
Buildingանցի համար կառուցելիս, մասնավորապես, երբ խոսքը վերաբերում է անիմացիային, պետք է հաշվի առնել այնպիսի բաներ, ինչպիսիք են զննարկչի աջակցությունն ու կատարումը (պատշաճ վեբ հոստինգն այստեղ կօգնի): Այս ձեռնարկում մենք ձեզ կքննարկենք UI անիմացիաներ և անցումներ ստեղծելու երկու լավագույն լուծումները:
Մենք կօգտագործենք CSS և GreenSock (GSAP) համադրություն: Մենք բոլորս տեղյակ ենք CSS- ի մասին, բայց ձեզանից ոմանք գուցե տեղյակ չեն GreenSock պլատֆորմի մասին: GreenSock- ը JavaScript շրջանակ է, որը հնարավորություն է տալիս հեշտությամբ ստեղծել HTML տարրերով ցնցող անիմացիաներ `օգտագործելով ընդամենը մի քանի տող կոդ:
Նկարներն ու պատկերանշանները հատկապես շատ ավելի շատ են առանձնացել վերջին մի քանի տարիների ընթացքում: Որքա՞ն հաճախ ենք մենք օգտագործում emoji, այլ ոչ թե տեքստ: Բջջային նավարկություններում, կարծես, ավելի շատ պատկերակներ են օգտագործվում, քան տեքստեր, և ժամանակի ընթացքում օգտվողները իմանում են, թե յուրաքանչյուրը մեզ ուր է տանելու: Մենք պատրաստվում ենք սկսել անիմացիոն նավիգացիոն գոտի ստեղծելով ՝ պարզապես լոգոներ օգտագործելով: Երբ սավառնում եք յուրաքանչյուրի վրա, այն կենդանի կլինի մինչև վերջնական վիճակը, որը նման կլինի այս սքրինշոթին: Բազմաթիվ լրատվամիջոցներ ունեք ավելացնելու: Պահուստավորեք այն ամպային պահեստում:
Կառուցեք նավարկությունը
Առաջին հերթին, մենք կստեղծենք նոր index.html ֆայլ և վեց հղումների հետ միասին կկարգավորենք մեր նավիգացիոն տարածքը: Յուրաքանչյուր հղում կազմված կլինի Ionicons- ից վերցված պատկերակից: Յուրաքանչյուրին պետք է դաս նշանակենք:
div class = "navigationbar"> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> / div>
Մենք մանրամասն չենք լուսաբանելու HTML կամ CSS ամբողջական փաստաթուղթը, բայց կոդերի ամբողջական ցուցակը կարող եք ստանալ GitHub- ից:
Հաջորդը, մենք պետք է ստեղծենք CSS ֆայլ, որը կոչվում է style.css, և ապա տեղադրեք կոդի հետևյալ տողը ՝ Ionicons ներմուծելու համար.
@import url (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
Այժմ մենք կստեղծենք դասը navlogo ոճաթերթի ներսում մեր նավիգացիոն պատկերների համար: Այստեղ մենք կկարգավորենք դիրքը, բարձրությունը, տառատեսակի չափը և այլն:
.navlogo {դիրքը ՝ հարաբերական; տառատեսակի չափը ՝ 40 հատ; լայնությունը `75px; լուսանցք ՝ 40px; բարձրությունը `75px; գծի բարձրությունը `75px; ցուցադրում ՝ inline-block; գույնը ՝ #fff; } .navlogo: հետո {դիրքը ՝ բացարձակ; վերև ՝ 0; ներքևում ՝ 0; ձախ: 0; աջ ՝ 0; եզրագիծ ՝ 2px պինդ # e6e6e6; բովանդակություն ՝ ’’; z- ինդեքս: -1; սահման-շառավիղ `50%; }
Հաջորդը, մենք պետք է ստեղծենք մեր անիմացիան .navlogo տարր. Այստեղ մենք կստեղծենք պտտման և անցման էֆեկտներ, ինչպես նաև փոխենք տարրի գույնը սավառնելիս:
.navlogo: առաջ, .navlogo: հետո {-webkit- անցում. բոլոր 0.45 վայրկյանները հեշտությամբ դուրս են գալիս; անցում. բոլոր 0.45 վայրկյանները հեշտությամբ են դուրս գալիս. } .navlogo: hover, .navlogo: ակտիվ, .navlogo.hover {գույնը: # c0392b; } .navlogo: hover: after, .navlogo: ակտիվ: after, .navlogo.hover: after {border-color: transparent # c0392b; -webkit-transform: rotate (360deg); վերափոխել ՝ պտտել (360deg); }
Վերջապես, մենք պետք է ավելացնենք մի իրադարձություն, որը հեռացնում է սավառնելու դասը, երբ մկնիկը այլևս չի սավառնում մեր լոգոների վրա: Սա է ՝ համոզվելու, որ մեր պատկերանշանը դուրս է գալիս իր անիմացիայից: Ստեղծեք JavaScript նոր ֆայլ, որը կոչվում է main.js, ապա մուտքագրեք հետևյալ կոդը.
$ («. Հովեր»). Մկնիկի սլաք (գործառույթ () {$ (այս) .հեռացնելԿլաս («Հովեր»);});
Մեր նավարկությունն այժմ պատրաստ է գործել ՝ բացի որոշ հիպերհղումներ ավելացնելուց: Մեզ հաջողվել է դրան հասնել ՝ օգտագործելով CSS3:
Ստեղծեք և կենդանացրեք կոճակները բեռի վրա
Այժմ մենք մեր էջին կավելացնենք չորս կոճակ և կօգտագործենք GreenSock գրադարանը ՝ յուրաքանչյուր կոճակը դանդաղորեն ներմուծելու համար, մեկը մյուսի ետևից մեկ վայրկյան ուշացումով: Սա կստեղծի գեղեցիկ անցումային ազդեցություն:
Նախ, մենք պետք է վերաբացենք index.html ֆայլը և ստեղծենք մեր կոճակի բաժինը ՝ օգտագործելով ստորև բերված կոդը.
div id = "buttonarea"> կոճակ> Փոխել ֆոնի գույնը / կոճակը> կոճակ> Տարբերակ 1 / կոճակ> կոճակ> Տարբերակ 2 / կոճակ> կոճակ> Տարբերակ 3 / կոճակ> / div>
Դրանից հետո մենք պետք է հիմք ստեղծենք GreenSock գրադարանին գլխի ներսում> բաժնում:
սցենար src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"> / սցենար>
Վերջապես, մենք պետք է ստեղծենք մեր անիմացիան: Սա կվերցնի միայն մեկ տող կոդ: StaggerFrom- ից գործառույթ է, որը կտակարկի մեր տարրի մեկնարկի ժամանակը: Մեր փակագծերում մենք նշում ենք տարրի անվանումը: Այս դեպքում դա կլիներ . կոճակ, Մենք նաև պետք է տևողություն սահմանենք, և այս դեպքում յուրաքանչյուրի միջև այն դրվում է մեկ վայրկյան անիբութ կոճակ տարր.
TweenMax.staggerFrom (’. Անիբիբոն’, 1, {անթափանցիկություն ՝ 0}, 1);
Ֆոնի և տարրի գույնի անցում
Հաջորդ բանը, որ մենք պատրաստվում ենք դիտարկել, կայքի ֆոնն ու կոճակները մեկ գույնից մյուսին անցնելն է: Այս հնարավորությունը մենք հաճախ չենք հանդիպում կայքերում, չնայած այն հաստատ հետաքրքիր կլիներ մատչելիության կամ վեբ հավելվածների նախապատվությունների համար, երբ օգտագործողը գուցե ցանկանար սահմանել իր գունային սխեման:
Համոզվեք, որ ունեք style.css ֆայլում ձեր ֆոնի գույն և սահման և տեքստի գույն:
.anibutton {եզրագիծ: 2px պինդ # 000; գույնը `# 000; }
Հաջորդը, մենք կստեղծենք JavaScript գործառույթ ՝ մեր տարբեր GreenSock գունային անցումները կարգավորելու համար:
գործառույթի changeBackground () {TweenMax.to («մարմին», 3, {backgroundImage: «գծային-գրադիենտ (դեպի ձախ, # 646580, # 212121)»)); TweenMax.to («. անիբանակ», 3, {գույն: "#fff"}); TweenMax.to («. Anibutton», 3, {եզրագիծ ՝ «2px solid #fff»});}
Մենք այստեղ ավելի շատ մութ ռեժիմով ենք նայելու, այնպես որ ֆոնը կլինի մութ, բայց կոճակները կթվարկեն թեթև: Կոդի առաջին տողը երեք վայրկյան ժամանակահատվածում ֆոնի գույնը կփոխի ավելի մուգ տատանումների: Երկրորդ և երրորդ տողերը երեք վայրկյան ժամանակահատվածում տեքստի գույնը և սահմանը կփոխեն սպիտակ:
Վերջապես, մենք պետք է զանգահարենք changeBackground () գործառույթը index.html ֆայլում հայտնաբերված մեր կոճակներից մեկից:
կոճակ onclick = "changeBackground ()"> Փոխել ֆոնը / կոճակը>
Theրագիրն այժմ պատրաստ է գործարկման: Իհարկե, դուք կարող եք շատ ավելին գնալ ՝ ավելացնելով նոր տարրեր և նրանց համար փոխելով գույնի ոճը:
Այս հոդվածն ի սկզբանե տպագրվել է 309-րդ համարում ցանցաշխարհի վեբ դիզայներների և մշակողների համար ամենալավ վաճառվող ամսագիրը: Գնեք 309 համարն այստեղ կամ բաժանորդագրվել այստեղ.
