10 CSS3-animaatiotyökalut, jotka sinun pitäisi varata
Koska ihmiset kokevat helpommin asioita, jotka liikkuvat, älykkäästi käytetyt animaatiot voivat parantaa sivuston käyttökokemusta kiinnittää huomiota tärkeisiin tekijöihin, joita käyttäjien on nopeasti havaittava.
CSS3 on ottanut käyttöön uuden animaatio-syntaksin, jonka avulla voit saavuttaa monia mielenkiintoisia asioita malleissasi. Jännittävien animaatioiden rakentaminen voi joskus olla monimutkaista ja aikaa vievää, jolloin animaitonin kirjastoja ja generaattoreita voidaan käyttää erinomaisesti.
Tutustu joihinkin CSS: n avulla tehtyihin animaatioihin:
- 38 Inspiroiva CSS3-animaatiodemodeja
- 15 Kauniit tekstitehosteet luotu CSS: llä
- 30 Cool CSS-animaatiota, jotka sinun täytyy nähdä
- Kuinka luoda palautumisvaikutus CSS3-animaatiosta
Tässä viestissä tarkastelemme 10 loistavaa työkalua, jotka voivat helpottaa ja nopeuttaa omien animaatioiden luomista.
1. CSS3Gen CSS3-animaatiogeneraattori
CSS3Gen tarjoaa sinulle helppokäyttöisen animaatiogeneraattorin, jonka avulla voit nopeasti luoda perus-animaatioita. Vaikka et tee monimutkaisia teoksia tämän työkalun avulla, se on loistava valinta, jos haluat luoda vakion animaation ilman liikaa hätää.
Sinä ei tarvitse tehdä käsiäsi likaisiksi koodilla, Kun voit asettaa lomakkeelle ominaisuudet, esikatsella tuloksia ja kopioida ja liittää koodi omaan CSS-tiedostoon.
2. CSS Animate
Jos sinä tarvitsevat monimutkaisempia animaatioita, saatat löytää CSS Animate hyödyllinen. Siinä on kypsempi käyttöliittymä, voit määrittää hieman enemmän ominaisuuksia, ja voit seurata, pysäyttää ja käynnistää animaation intuitiivisen aikajanan avulla.
On myös esimerkin animaatioita, kuten “Pomppia”, “Shake”, ja “Keinu”, että voit ladata generaattoriin ja muokata koodia tarpeidesi mukaan.
3. Coveloping CSS Animation Generator
Covelopinganimaatiogeneraattori on luultavasti paras valinta jos olet uusi CSS3-animaatioita, ja haluavat nopeasti ymmärtää, miten he toimivat. Tämän yksinkertaisen mutta tehokkaan työkalun avulla voit testata erilaisia animaatioita, joita CSS3: lla on tarjottavanaan, ja voit helposti tarkistaa, mikä ero on niiden välillä.
Sinun tarvitsee vain asettaa 4 parametria: animaatiotyyppi, animaatiotoiminto, kesto sekunnissa ja jos animaatio on ääretön. Kun olet valmis, sinun tarvitsee vain saada ja tarttua luotuun HTML- ja CSS-koodiin.
4. Magic-animaatioita
Magic-animaatioita on viileä CSS-kirjasto, joka mahdollistaa helposti sijoittaa animaatioita, joilla on erikoistehosteita sivustossasi. Esimerkiksi voit tehdä elementtejä kadonneita sisään ja ulos, avata vasemmalle tai oikealle, sitten palata, kääntää alas, ylös, vasemmalle tai oikealle ja monia muita
Sinun tarvitsee vain ladata koodi, sisällyttää CSS-tiedosto HTML-sivullesi ja lisätä sopiva luokka jQueryn avulla seuraavasti:
$ ('. yourdiv'). hover (toiminto () $ (this) .addClass ('magictime puffIn');); Voit myös muuttaa ajastimen asetuksia ja tehdä animaatiosta äärettömän jQueryn avulla (lisätietoja on readme-tiedostossa).
5. Animate.css
Animate.css tarjoaa sinulle joukon viileät, selaimen CSS3-animaatiot. Animaatiot on jaettu ryhmiin, kuten huomionhakijoihin, hyökkääviin sisäänkäynteihin, kopioitumiseen, häipymiseen ja moniin muihin, joten et voi valittaa valinnan puutteesta.
Voit ladata koodin Githubilta, ja sinun on vain lisättävä CSS-tiedosto HTML-sivullesi ja asiaankuuluvat CSS-luokat HTML-elementteihin, jotka haluat animoida.
6. Bounce.js
Bounce.js on kätevä JavaScript-kirjasto, jonka avulla voit luoda monimutkaisia animaatioita. Bounce.js: llä on kypsä käyttöliittymä, jonka avulla voit joko lisätä eri komponentteja, kuten helpottamista, kestoa, viivettä ja kopioiden määrää - manuaalisesti animaatiosi tai valita valmiiksi asetetun esiasetuksen, toistaa animaation, ja hienosäätää ominaisuuksia, jos se on tarpeen.
7. AniJS
AniJS on superkoolinen JavaScript-kirjasto, jonka avulla voit lisätä CSS3-animaatioita malleihisi ja rakentaa kehittyneitä käyttöliittymäkomponentteja kuten animoituja välilehtiä, harmonikoita, modaaleja, liukuvalikkoja, mobiilisovellusten ilmoituksia, selaa paljastuksia ja paljon muuta.
Se toimii kaikkien nykyaikaisten selaimien kanssa, kuten iOS ja Android, ei tarvitse kolmansien osapuolien kirjastoja, ja siinä on upea näyttely, jota kutsutaan nimellä AniCollection, jossa voit helposti kokeilla kirjaston eri vaikutuksia.
8. Yksittäisen elementin CSS-spinnerit
Oletko koskaan halunnut parantaa mallejasi animoitu lastaus spinnerit? Jos vastaus on kyllä, tämä söpö CSS-spinner-kirjasto voi olla erinomainen valinta sinulle. Spinnerien CSS-koodi on kirjoitettu LESS. Asetuksia ei ole, koodi on valmis, sinun täytyy vain lisätä se omiin HTML- ja CSS-tiedostoihisi.
9. Matkamittari
Matkamittari on loistava työkalu sijoita viileät animaatiomittarit sivustoosi. Se on CSS- ja JavaScript-kirjasto, CSS-osa on kirjoitettu Sassissa, ja voit valita eri teemoista, kuten “Digitaalinen”, “Juna-asema”, ja “Auto”.
Odometrin käyttämiseksi sinun on lisättävä JavaScript-tiedosto ja valittu teematiedosto HTML-sivulle ja sitten class = "matkamittari" valitsin elementtiin, jonka haluat tehdä animoituun mittariin. Ihanteellinen valinta tietojen visuaaliseen esittämiseen tai a “Tulossa pian” sivu lisää silmiinpistävää.
10. Snabbt.js
Snabbt.js on minimalistinen animaatiokirjasto auttaa sinua helposti siirtämään asioita ympäri. Jos tarvitset vähän inspiraatiota, katsokaa demoja nähdäksesi, mitä voit saavuttaa tällä älykkäällä animaatiotyökalulla, alla olevan kuvion animoitu jaksollinen taulukko on vain yksi monista Snabbt.js: n mahdollisuuksista toteuttaa helposti.
Sinun täytyy kirjoittaa pieni JavaScript, jos haluat käyttää tätä kirjastoa, mutta tulos on varsin näyttävä, joten se on todennäköisesti vaivan arvoista.
