Z Shift.css ustvarite popolnoma animirane pripomočke

Spletna animacija ponuja pot pozornost ljudi in jih pripraviti naprej v spletno mesto. Na voljo je veliko orodij ustvarite brezplačne animacije ampak Shift.css je ena najnovejših v skupini.

Je prost odprtokodni okvir za ustvarjanje dinamične animacije v katerem koli vsebniku. In te animacije niso zaklenjeni v eno zaporedje. Ustvarite lahko animacije po meri za vsak element v bloku in jih uporabite v določenem vrstnem redu.

The Premaknite predstavitveno stran lahko vam pokaže veliko bolje, kot lahko pojasnim z besedami.

Opazili boste, da je vsak element v vsebniku ločen element HTML. Ne glede na to, ali gre za SVG ali sliko ali karkoli drugega, lahko animirate vse ločeno ustvarite lasten učinek animacije po meri.

Knjižnica ima dve datoteki, a .css in .js knjižnico in oba morata biti dodano v glavo dokumenta.

Ne morem najti nobene GitHub repo za ta projekt, zato boste morali naložite datoteke neposredno na spletni strani Shift.css.

Naslednji korak je, da določite element vsebnika z nekaj vsebino. Imena razredov so pomembna, zato mora vsak animacijski element imajo razred .element premika uporablja.

Poleg teh razredov lahko tudi dodajte atribute podatkov HTML5 določite, kako deluje animacija. Trenutno so samo trije, vendar bi morali biti dovolj za prilagoditev polnega animacijskega učinka.

1. animacija podatkov: Ime animacije
2. zakasnitev podatkov: Skupna zamuda (v sekundah) pred začetkom animacije
3. trajanje podatkov: Skupna dolžina (v sekundah) animacije

Ime animacije mora biti a vnaprej določena animacija za knjižnico Shift. Zdaj so 15 animacijskih imen, med katerimi lahko izbirate. Ogledate si jih lahko na dnu domače strani Shift.css.

Samo Kopiraj prilepi karkoli hočeš v nastavitev imena animacije in dobro bi bilo iti! Na primer, če bi želel uporabiti animacijo za izhodno zbledelo, ki bi jo dodal data-animation = "shift_exitFade" kot atribut podatkov za kateri koli element, ki ga je treba animirati na ta način. Enostavno.

Želim si, da bi ta knjižnica prišla z več možnostmi v JavaScriptu, ker bi razvijalcem omogočila veliko več nadzora nad umestitvijo in funkcijami. Toda za preprosto (in brezplačno) ogrodje animacije se ne morem pritoževati.

Shift.css je kot nalašč za novejši razvijalci ki želijo ustvariti kompleksnejših stilov animacije brez pisanja besedne kode od začetka.