Loo täielikult animeeritud vidinad Shift.css abil

Veebi animatsioon pakub võimalust haarake inimeste tähelepanu ja juhtida neid veelgi veebisaidile. Seal on palju tööriistu luua tasuta animatsioone aga Shift.css on üks uusimaid.

See on vaba avatud lähtekoodiga raamistik loodud dünaamilised animatsioonid mis tahes konteineris. Ja need animatsioonid ei ole lukustatud ühte järjestusse. Saate tegelikult luua kohandatud animatsioone iga elemendi kohta blokeerida ja rakendada neid teatavas järjekorras.

The Tõstke demo lehekülg suudab teile palju paremini näidata, kui ma saan sõnadega seletada.

Üks asi, mida märkate, on see, et iga mahuti sees olev element on eraldi HTML-element. Olenemata sellest, kas tegemist on SVG-ga või pildiga või mis tahes, saate kõik eraldi animeerida luua oma kohandatud animatsiooniefekt.

Raamatukogus on kaks faili, a .css ja .js raamatukogu ja mõlemad peavad olema lisatakse dokumendi peale.

Ma ei leia sellele projektile ühtegi GitHub repot, nii et peate seda tegema faile otse alla laadida Shift.css veebisaidilt.

Järgmine samm on määratleda konteineri element sisuga. Klasside nimed on olulised, et iga animatsioonielement vajab omama klassi .shift-element rakendatud.

Koos nende klassidega saate ka HTML5 andme atribuutide lisamine et määrata, kuidas animatsioon töötab. Praegu on ainult kolm, kuid need peaksid olema piisavad täieliku animatsiooniefekti kohandamiseks.

1. andmete animatsioon: Animatsiooni nimi
2. andmete viivitus: Täielik viivitus (sekundites) enne animatsiooni algust
3. andmete kestus: Animatsiooni kogupikkus (sekundites)

Animatsiooni nimi peab olema a eelnevalt määratud animatsioon loodud Shift-raamatukogu jaoks. Praegu on olemas 15 animatsiooninime. Neid saab näha Shift.css kodulehekülje allosas.

Lihtsalt kopeeri kleebi mida iganes sa soovid animatsiooni nime seadistusse ja sa peaksid olema hea minna! Näiteks, kui ma tahaksin kasutada väljumise fade animatsiooni, lisan selle data-animation = "shift_exitFade" kui andmete atribuut mis tahes elemendile, mis sellisel viisil peaks elustama. Lihtne.

Ma soovin, et see raamatukogu oleks JavaScriptis rohkem valikuvõimalustega, sest see võimaldaks arendajatel paigutuse ja funktsioonide üle palju rohkem kontrollida. Kuid lihtsa (ja tasuta) animatsiooniraamistiku jaoks ei saa ma kaebusi esitada.

Shift.css on ideaalne uuemad arendajad kes tahavad luua keerukamaid animatsioonistiile ilma kirjaliku koodi kirjutamata nullist.