10 CSS3 animācijas rīki, kurus jums vajadzētu atzīmēt
Tā kā cilvēki mēdz vieglāk uztvert lietas, kas pārvietojas, gudri izmantotās animācijas var uzlabot vietnes lietotāju pieredzi pievēršot uzmanību svarīgiem elementiem, kas lietotājiem ir nepieciešams ātri pamanīt.
CSS3 ir ieviesusi jaunu animācijas sintaksi, kas var palīdzēt jums sasniegt daudzas interesantas lietas jūsu dizainā. Veidojot vēsas animācijas, dažkārt var būt sarežģīti un laikietilpīgi, tāpēc animaiton bibliotēkas un ģeneratori var tikt izmantoti lieliski.
Iepazīstieties ar dažām animācijām, kas ir pieejamas ar CSS:
- 38 Iedvesmojošas CSS3 animācijas demonstrācijas
- 15 Skaisti teksta efekti, kas izveidoti ar CSS
- 30 atdzist CSS animācijas, kas jums jāskatās
- Kā izveidot atlēšanas efektu ar CSS3 animāciju
Šajā ziņojumā mēs apskatīsim 10 izcili rīkus, kas var padarīt vieglāk un ātrāk izveidot savas animācijas.
1. CSS3Gen CSS3 animācijas ģenerators
CSS3Gen nodrošina jums viegli lietojamu animācijas ģeneratoru, kas ļauj ātri ģenerēt pamata animācijas. Lai gan ar šo rīku netiks veikti sarežģīti darbi, tā ir lieliska izvēle, ja vēlaties izveidot standarta animāciju bez pārāk daudz satraukuma.
Jūs nav jākļūst netīras rokas ar kodu, kā jūs varat iestatīt īpašības formā, priekšskatīt rezultātu, tad vienkārši nokopējiet un ielīmējiet kodu savā CSS failā.
2. CSS animācija
Ja jūs nepieciešama sarežģītāka animācija, jūs varat atrast CSS animācija noderīga. Tai ir vairāk nobriedušu lietotāja interfeisu, jūs varat iestatīt nedaudz vairāk rekvizītu, un jūs varat sekot, apturēt un restartēt animāciju, izmantojot intuitīvu laika skalu.
Ir arī piemēru animācijas, piemēram, “Atlekšana”, “Krata”, un “Šūpoles”, ka jūs varat ielādēt ģeneratorā un modificēt kodu atbilstoši savām vajadzībām.
3. Coveloping CSS animācijas ģenerators
Covelopinganimācijas ģenerators, iespējams, ir labākā izvēle ja esat jauns ar CSS3 animācijām, un vēlas ātri saprast, kā viņi strādā. Šis vienkāršais, bet jaudīgais rīks ļauj pārbaudīt dažāda veida animācijas, ko piedāvā CSS3, un viegli pārbaudīt, kāda ir atšķirība starp tiem.
Jums ir jāiestata tikai 4 parametri: animācijas veids, animācijas funkcija, ilgums sekundēs, un, ja animācija ir bezgalīga. Kad esat gatavs, jums tikai jāsaņem un jāsaņem ģenerētais HTML un CSS kods.
4. Magic animācijas
Burvju animācijas ir atdzist CSS bibliotēka, kas ļauj viegli ievietot animācijas ar īpašiem efektiem jūsu vietnē. Piemēram, jūs varat padarīt elementus pazudušus un ārā, atvērtus pa kreisi vai pa labi, tad atgriezties, pagriezt uz leju, uz augšu, pa kreisi vai pa labi, un daudzus citus
Viss, kas Jums jādara, ir lejupielādēt kodu, iekļaut CSS failu savā HTML lapā un pievienot atbilstošo klasi ar jQuery palīdzību šādā veidā:
$ ('. yourdiv'). hover (funkcija () $ (this) .addClass ('magictime puffIn');); Varat arī mainīt taimera iestatījumus un padarīt animāciju bezgalīgi ar jQuery palīdzību (sīkāku informāciju skatiet readme failā).
5. Animate.css
Animate.css sniedz jums komplektu atdzist, pārrobežu pārlūkprogrammas CSS3 animācijas. Animācijas tiek iedalītas tādās grupās kā uzmanības meklētāji, atlekšanas ieejas, veselīgs izejas, izbalēšanas ieejas un daudzi citi, tāpēc jūs tiešām nevarat sūdzēties par izvēles trūkumu.
Jūs varat lejupielādēt kodu no Github, tad jums ir nepieciešams pievienot CSS failu savai HTML lapai un atbilstošās CSS klases HTML elementiem, kurus vēlaties animēt.
6. Bounce.js
Bounce.js ir ērta JavaScript bibliotēka, kas ļauj jums radīt sarežģītas animācijas. Bounce.js ir nobriedis lietotāja interfeiss, kas ļauj vai nu pievienot dažādus komponentus - piemēram, atvieglošanu, ilgumu, aizkavēšanos un atlēku skaitu - manuāli animācijai, vai arī izvēlēties gatavu lietošanu, pēc tam atskaņot animāciju, un precīzi noregulējiet īpašības, ja tas ir nepieciešams.
7. AniJS
AniJS ir supercool JavaScript bibliotēka, kas ļauj jums pievienot dizainam CSS3 animācijas veidot sarežģītus UI komponentus piemēram, animētas cilnes, akordeoni, modāli, bīdāmās izvēlnes, mobilo lietotņu paziņojumi, ritināšanas atklāšana un daudz ko citu.
Tas darbojas ar visām mūsdienu pārlūkprogrammām, ieskaitot iOS un Android, nav nepieciešamas nekādas trešās puses bibliotēkas, un tai ir iespaidīgs vitrīna AniCollection, kurā varat viegli eksperimentēt ar dažādām bibliotēkas sniegtajām sekām.
8. Viena elementa CSS spinner
Vai esat kādreiz vēlējies uzlabot savu dizainu animācijas iekraušanas spinneri? Ja atbilde ir "jā", šī cute CSS vērpšanas bibliotēka var būt lieliska izvēle jums. Spoles CSS kods ir rakstīts LESS. Nav neviena iestatījuma, kods ir gatavs, jums tikai jāievieto savos HTML un CSS failos.
9. Odometrs
Odometrs ir lielisks līdzeklis ievietojiet vēsus animētus metrus uz jūsu vietni. Tā ir CSS un JavaScript bibliotēka, CSS daļa ir rakstīta Sass, un jūs varat izvēlēties no dažādām tēmām, piemēram, “Digitāls”, “Vilciena stacija”, un “Automašīna”.
Lai izmantotu Odometru, jums HTML lapā jāpievieno JavaScript fails un izvēlētais tēmas fails, pēc tam - class = "odometer" atlasītājs uz elementu, kuru vēlaties izveidot animācijas mēraparātā. Ideāla izvēle vizuāli attēlot datus vai veikt a “Drīzumā” lappuse vairāk uzkrītošā.
10. Snabbt.js
Snabbt.js ir minimālisma animācijas bibliotēka palīdz viegli pārvietot lietas. Ja jums ir nepieciešams neliels iedvesmas avots, apskatiet demo, lai redzētu, ko jūs varat sasniegt ar šo viedo animācijas rīku, zemāk redzamās attēlotās animācijas tabula ir tikai viena no daudzajām iespējām, ko Snabbt.js ir viegli realizēt.
Ja vēlaties izmantot šo bibliotēku, jums ir nepieciešams uzrakstīt nelielu JavaScript, bet tā kā rezultāts ir diezgan iespaidīgs, tāpēc, iespējams, ir vērts cīnīties.
