10 CSS3 alata za animaciju trebate označiti
Budući da ljudi lakše percipiraju stvari koje se kreću, pametno korištene animacije mogu poboljšati korisničko iskustvo web-lokacije skretanje pozornosti na važne elemente koje korisnici trebaju brzo primijetiti.
CSS3 je uveo novu sintaksu animacije koja vam može pomoći da postignete mnogo zanimljivih stvari u svojim dizajnu. Izgradnja sjajnih animacija ponekad može biti komplicirana i dugotrajna, no tada se izvrsno mogu koristiti animaiton knjižnice i generatori.
Pogledajte neke od animacija koje su omogućene pomoću CSS-a:
- 38 Inspirativni CSS3 animacije Demos
- 15 lijepih tekstualnih efekata stvorenih pomoću CSS-a
- 30 Cool CSS animacije koje morate vidjeti
- Kako stvoriti Bounce Effect s CSS3 Animacija
U ovom postu ćemo pogledati 10 sjajnih alata koji mogu olakšati i ubrzati izradu vlastitih animacija.
1. CSS3Gen CSS3 Generator animacije
CSS3Gen pruža vam jednostavan animacijski generator koji vam omogućuje brzo generiranje osnovnih animacija. Iako s ovim alatom nećete raditi komplicirane umjetničke radove, to je odličan izbor ako želite stvoriti standardnu animaciju bez previše napora.
Vas ne morate prljati ruke s kodom, kao što možete postaviti svojstva na obrascu, pregledajte rezultat, a zatim jednostavno kopirajte i zalijepite kôd u vlastitu CSS datoteku.
2. CSS Animiranje
Ako ti trebate složenije animacije, možete pronaći CSS animira koristan. Ima zreliji sučelje, možete postaviti malo više svojstava, a možete pratiti, zaustaviti i ponovno pokrenuti animaciju pomoću intuitivne vremenske trake.
Postoje i primjeri animacija, kao što su “Odskakivati”, “Tresti”, i “ljuljati”, koje možete učitati u generator i modificirati kod prema vašim potrebama.
3. Pokrivanje CSS generatora animacije
Coveloping's animacija generator je vjerojatno najbolji izbor ako ste novi s CSS3 animacijama, i žele brzo razumjeti kako rade. Ovaj jednostavan, ali moćan alat omogućuje vam testiranje različitih vrsta animacija koje CSS3 može ponuditi i jednostavno provjeriti koja je razlika između njih.
Potrebno je postaviti samo 4 parametra: vrstu animacije, funkciju animacije, trajanje u sekundama i ako je animacija beskonačna. Kada budete spremni, morate dobiti i zgrabiti generirani HTML i CSS kod.
4. Čarobne animacije
Čarobne animacije je cool CSS knjižnica koja omogućuje jednostavno postavite animacije s posebnim efektima na vašoj web-lokaciji. Na primjer, možete učiniti da elementi nestanu, otvorite lijevo ili desno, a zatim se vratite, okrenete prema dolje, gore, lijevo ili desno, a mnoge druge
Sve što trebate učiniti jest preuzeti kôd, uključiti CSS datoteku na svoju HTML stranicu i dodati odgovarajuću klasu uz pomoć jQuery na sljedeći način:
$ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn');); Također možete promijeniti postavke timera i učiniti animaciju beskonačnom uz pomoć jQuery (za više detalja pogledajte readme datoteku).
5. Animate.css
Animate.css pruža vam skup cool, cross-browser CSS3 animacije. Animacije su podijeljene u skupine poput tražitelja pažnje, odskočnih ulaza, odskočnih izlaza, blijedih ulaza i mnogih drugih, tako da se ne možete žaliti zbog nedostatka izbora.
Kôd možete preuzeti iz Githuba, a zatim morate dodati CSS datoteku na svoju HTML stranicu, a relevantne CSS klase na HTML elemente koje želite animirati.
6. Bounce.js
Bounce.js je zgodna JavaScript biblioteka koja vam omogućuje stvorite komplicirane animacije. Bounce.js ima zrelo korisničko sučelje koje vam omogućuje ili dodavanje različitih komponenti - kao što su ublažavanje, trajanje, kašnjenje i broj odbijanja - ručno u vašu animaciju, ili odabir spremne za uporabu, zatim reprodukcija animacije, i prilagodite svojstva ako je to potrebno.
7. AniJS
AniJS je biblioteka JavaScripta supercool koja omogućuje dodavanje CSS3 animacija u vaše dizajne i na izgraditi sofisticirane UI komponente kao što su animirane kartice, harmonike, modali, klizni izbornici, obavijesti o mobilnim aplikacijama, otkrića pomicanja i još mnogo toga.
Radi sa svim modernim preglednicima, uključujući iOS i Android, ne treba knjižnice trećih strana i ima spektakularan izlog pod nazivom AniCollection gdje možete jednostavno eksperimentirati s različitim efektima koje nudi knjižnica.
8. CSS Spineri s jednim elementom
Jeste li ikada željeli unaprijediti svoje dizajne animirani učitavači rotora? Ako je odgovor da, ova slatka CSS spinner knjižnica može biti izvrstan izbor za vas. CSS kôd za spinnera je napisan u MANJOJ. Nema nikakvih postavki, kôd je spreman, samo ga morate umetnuti u vlastite HTML i CSS datoteke.
9. Odometar
mjerač za pređeni put je sjajan alat postavite kul animirane metara na svoju web-lokaciju. To je CSS i JavaScript knjižnica, CSS dio je napisan u Sassu, a možete birati između različitih tema kao što je “digitalni”, “Željeznička stanica”, i “Automobil”.
Da biste koristili Odometar, morate dodati JavaScript datoteku i odabranu datoteku teme na svoju HTML stranicu, zatim class = "brojač kilometara" izbornik do elementa koji želite pretvoriti u animirani mjerač. Idealan izbor za vizualno predstavljanje podataka ili za izradu “Dolazi uskoro” stranica više privlačna.
10. Snabbt.js
Snabbt.js je minimalistička knjižnica animacija koja pomaže vam da lako premjestite stvari. Ako trebate malo inspiracije, pogledajte demo da biste vidjeli što možete postići s ovim pametnim alatom za animaciju, animirana periodna tablica na slici ispod je samo jedna od mnogih mogućnosti koje Snabbt.js olakšava implementaciju.
Morate napisati malo JavaScript ako želite koristiti ovu knjižnicu, ali kao rezultat je prilično spektakularan, tako da je vjerojatno vrijedan nevolje.
