Izveidojiet pilnībā animētas logrīki ar Shift.css

Tīmekļa animācija piedāvā iespēju satveriet cilvēku uzmanību un velciet tos tālāk tīmekļa vietnē. Ir daudz rīku izveidot bezmaksas animācijas bet Shift.css ir viens no jaunākajiem ķekars.

Tas ir bezmaksas atvērtā koda sistēma izveidots dinamiskas animācijas jebkurā konteinerā. Un šīs animācijas nav bloķēti vienā secībā. Jūs varat faktiski veidot pielāgotas animācijas katram elementam blokā un pielietojiet tos noteiktā secībā.

The Shift demonstrācijas lapa var parādīt daudz labāk nekā es varu paskaidrot vārdos.

Viena lieta, ko pamanīsiet, ir tas, ka katrs konteinera iekšējais elements ir atsevišķs HTML elements. Neatkarīgi no tā, vai tas ir SVG vai attēls vai kāds, jūs varat dzīvot visu atsevišķi izveidojiet savu pielāgoto animācijas efektu.

Bibliotēkā ir divi faili, a .css un .js bibliotēkai, un abiem jābūt pievienots dokumenta galviņai.

Šim projektam es nevaru atrast nevienu GitHub repo, tāpēc jums būs nepieciešams lejupielādējiet failus tieši no Shift.css tīmekļa vietnes.

Nākamais solis ir definēt konteinera elementu ar kādu saturu. Klases nosaukumi ir svarīgi, lai katram animācijas elementam būtu nepieciešams ir klase .maiņas elements piemērot.

Kopā ar šīm klasēm jūs varat arī pievienot HTML5 datu atribūtus lai definētu, kā darbojas animācija. Pašlaik ir tikai trīs, bet tiem jābūt pietiekamiem, lai pielāgotu pilnu animācijas efektu.

1. datu animācija: Animācijas nosaukums
2. datu aizkavēšanās: Kopējais aizkave (sekundēs) pirms animācijas sākuma
3. datu ilgums: Animācijas kopējais garums (sekundēs)

Animācijas nosaukumam jābūt a iepriekš definēta animācija izveidots Shift bibliotēkai. Tieši tagad ir 15 animācijas nosaukumi, no kuriem izvēlēties. Tos var redzēt Shift.css mājas lapas apakšā.

Tikai kopēt ielīmēt ko vien tu vēlies animācijas nosaukuma iestatījumā un jums vajadzētu būt labi iet! Piemēram, ja es vēlētos izmantot izejas izbalināšanas animāciju, es pievienotu data-animation = "shift_exitFade" kā datu atribūts jebkuram elementam, kas šādā veidā būtu jāaktivizē. Vieglāk par vieglu.

Es vēlos, lai šī bibliotēka būtu aprīkota ar vairākām iespējām JavaScript, jo tas ļautu izstrādātājiem daudz vairāk kontrolēt izvietojumu un funkcijas. Bet vienkāršai (un bezmaksas) animācijas sistēmai es nevaru sūdzēties.

Shift.css ir ideāli piemērots jaunākiem izstrādātājiem kas vēlas izveidot sarežģītāki animācijas stili bez rakstīšanas verbose kodu no nulles.