Izradite potpuno animirane widgete pomoću funkcije Shift.css

Web animacija nudi način zgrabite pozornost ljudi i privući ih dalje na web-mjesto. Postoji mnogo alata na koje treba doći stvoriti besplatne animacije ali Shift.css jedan je od najnovijih u hrpi.

To je slobodni open source okvir napravljen za stvaranje dinamičke animacije unutar bilo kojeg spremnika. I ove animacije nisu zaključani u jedan slijed. Možete zapravo izraditi prilagođene animacije za svaki element u bloku i primijenite ih u određenom redoslijedu.

Pomaknite demo stranicu mogu vam pokazati mnogo bolje nego što mogu objasniti riječima.

Jedna stvar koju ćete primijetiti je da je svaki element unutar spremnika zasebni HTML element. Bilo da je riječ o SVG-u ili slici ili slično, sve to možete animirati odvojeno stvorite vlastiti prilagođeni efekt animacije.

Knjižnica dolazi s dvije datoteke, a .css i .js biblioteci, a obje moraju biti dodan u glavu dokumenta.

Ne mogu pronaći GitHub repo za ovaj projekt, tako da ćete morati preuzmite datoteke izravno s web-mjesta Shift.css.

Sljedeći je korak definirati element spremnika s nekim sadržajima. Imena klasa su važna kako bi svaki element animacije trebao imati razred .pomak elemenata primijenjen.

Uz ove razrede, možete također dodajte HTML5 atribute podataka definirati način na koji animacija funkcionira. Trenutno ih ima samo tri, ali bi trebalo biti dovoljno za prilagodbu punog efekta animacije.

1. Podaci-animacija: Naziv animacije
2. Podaci kašnjenja: Ukupno kašnjenje (u sekundama) prije početka animacije
3. podataka trajanje: Ukupna duljina (u sekundama) animacije

Naziv animacije mora biti unaprijed definirana animacija za biblioteku Shift. Upravo sada postoje 15 imena animacija za odabir. Možete ih vidjeti na dnu Shift.css početne stranice.

Samo copy / paste što god želiš u postavku imena animacije i ti bi trebao biti dobar ići! Na primjer, ako bih htio koristiti animaciju izlaznog izbljeđivanja koju bih dodao podataka animacija = „shift_exitFade” kao atribut podataka bilo kojem elementu koji treba animirati na taj način. Jednostavno.

Želim da ova knjižnica ima više opcija u JavaScriptu jer bi programerima omogućila mnogo više kontrole nad položajem i značajkama. Ali za jednostavan (i besplatan) okvir animacije ne mogu se žaliti.

Shift.css je savršen za noviji razvojni programeri koji žele stvoriti složeniji stilovi animacije bez pisanja opširnog koda od nule.