10 CSS3 animatsioonivahendid, mida peaksite järjehoidja tegema
Kuna inimesed tajuvad kergemini asju, mis liiguvad, võivad nutikalt kasutatud animatsioonid suurendada saidi kasutaja kogemust tähelepanu juhtimine olulistele elementidele, mida kasutajad peavad kiiresti teadma.
CSS3 on kasutusele võtnud uue animatsiooni süntaks, mis aitab teil oma disainilahendustes palju huvitavaid asju saavutada. Lahedate animatsioonide loomine võib mõnikord olla keeruline ja aeganõudev, kuna animaitoni raamatukogusid ja generaatoreid saab suurepäraselt kasutada.
Vaadake mõningaid animatsioone, mis on võimalik CSS-i abil:
- 38 Inspireeriv CSS3 animatsiooniesitlused
- 15 ilus tekstiefektid loodud CSS-iga
- 30 Cool CSS Animatsiooni, mida teil on vaja näha
- Kuidas luua tagasilöögiefekti CSS3 animatsiooniga
Selles postituses vaatame 10 geniaalset tööriista, mis muudavad teie animatsioonide loomise lihtsamaks ja kiiremaks.
1. CSS3Gen CSS3 animatsioonigeneraator
CSS3Gen pakub teile lihtsalt kasutatavat animatsioonigeneraatorit, mis võimaldab teil kiiresti luua põhilisi animatsioone. Kuigi te ei tee selle tööriistaga keerulisi teoseid, on see suurepärane valik, kui soovid luua tavalise animatsiooni ilma liigse müra tekita.
Sina ei pea oma käed koodiga määrduma, kui saate vormi omadusi määrata, saate tulemuse eelvaate, seejärel lihtsalt kopeerida ja kleepida kood oma CSS-faili.
2. CSS animatsioon
Kui sa vajab keerulisemaid animatsioone, võite leida CSS Animate kasulik. See on küpsema kasutajaliidese abil, saate määrata veidi rohkem omadusi ning te võite jälgida, peatada ja taaskäivitada animatsiooni intuitiivse ajakava abil.
On ka näite animatsioone, näiteks “Põrge”, “Raputama”, ja “Kiik”, mida saate generaatorisse laadida ja koodi vastavalt oma vajadustele muuta.
3. Coveloping CSS animatsioonigeneraator
Covelopinganimatsioonigeneraator on ilmselt parim valik kui olete CSS3 animatsiooniga uus, ja tahavad kiiresti aru saada, kuidas nad töötavad. See lihtne, kuid võimas tööriist võimaldab teil testida erinevaid animatsioone, mida CSS3 pakub, ja lihtsalt vaadake, milline on nende vahe.
Teil on vaja ainult 4 parameetrit: animatsioonitüüp, animatsioonifunktsioon, kestus sekundites ja kui animatsioon on lõpmatu. Kui olete valmis, peate ainult genereerima loodud HTML- ja CSS-koodi.
4. Magic Animatsioonid
Magic Animatsioonid on lahe CSS raamatukogu, mis võimaldab hõlpsasti paigutada eriefektidega animatsioone saidil. Näiteks saate teha elementide kadumise sisse ja välja, avada vasakule või paremale, siis naasta, pöörata alla, üles, vasakule või paremale ja paljud teised
Kõik, mida pead tegema, on koodi allalaadimine, CSS-faili lisamine HTML-lehele ja sobiva klassi lisamine jQuery abil järgmisel viisil:
$ ('. yourdiv'). hover (funktsioon () $ (see) .addClass ('magictime puffIn');); Te saate muuta ka taimeri seadeid ja teha animatsiooni jQuery abil lõpmatuseks (lisateabe saamiseks lugege faili readme).
5. Animate.css
Animate.css pakub teile komplekti lahe, brauseriga CSS3 animatsioone. Animatsioonid on jagatud sellistesse rühmadesse nagu tähelepanelikunnetajad, kopsakas sissepääsud, kopsakasväljundid, pleegivad sissepääsud ja paljud teised, nii et te ei saa tegelikult valiku puudumise pärast kaebusi esitada..
Koodi saate alla laadida Githubilt, seejärel peate lisama CSS-faili oma HTML-lehele ja asjakohased CSS-klassid HTML-elementidele, mida soovite animeerida.
6. Bounce.js
Bounce.js on mugav JavaScript-raamatukogu, mis võimaldab teil seda teha luua keerulisi animatsioone. Bounce.js-il on küps kasutajaliides, mis võimaldab teil lisada erinevaid komponente - näiteks leebemaks muutmise, kestuse, viivitusega ja põrkamiste arvu - oma animatsioonile käsitsi või valida valmisvaliku eelseadistuse, seejärel animatsiooni esitada, ja vajadusel häälestage omadused.
7. AniJS
AniJS on üliõpilaste JavaScript-raamatukogu, mis võimaldab teil lisada oma disainilahendustele CSS3-animatsioone ehitada keerukaid kasutajaliidese komponente näiteks animeeritud vahekaardid, akordionid, moodulid, libistamismenüüd, mobiilirakenduste teated, kerimine ja palju muud.
See töötab koos kõigi kaasaegsete brauseritega, sealhulgas iOS ja Android, ei vaja kolmandatele osapooltele mõeldud raamatukogusid ning sellel on tähelepanuväärne presentatsioon AniCollection, kus saate hõlpsasti eksperimenteerida raamatukogu erinevate efektidega.
8. Üksiku elemendi CSS spinnerid
Oled sa kunagi tahtnud oma disaini täiustada animeeritud laadimislaagrid? Kui vastus on jaatav, võib see armas CSS spinner raamatukogu olla teile suurepärane valik. Spinnerite CSS-kood on kirjutatud LESS. Seadeid pole, kood on valmis, peate selle sisestama ainult oma HTML- ja CSS-failidesse.
9. Odomeeter
Odomeeter on suurepärane vahend asetage jahedad animeeritud meetrid saidile. See on CSS- ja JavaScript-raamatukogu, CSS-osa on kirjutatud Sassis ja te saate valida erinevate teemade seast “Digitaalne”, “Rongijaam”, ja “Auto”.
Odomeetri kasutamiseks peate oma HTML-lehele lisama JavaScript-faili ja valitud teemafaili, seejärel class = "odometer" valijaga elemendiks, mida soovite teha animeeritud arvesti. Ideaalne valik andmete visuaalseks esitamiseks või a “Tulekul” lehekülge rohkem pilkupüüdev.
10. Snabbt.js
Snabbt.js on minimalistlik animatsiooniraamatukogu aitab teil asju kergesti liigutada. Kui vajate vähe inspiratsiooni, vaadake demosid, et näha, mida selle nutika animatsioonitööriistaga saavutada saab, allpool oleval pildil oleval animeeritud perioodilisel tabelil on vaid üks paljudest võimalustest, mida Snabbt.js hõlpsasti rakendab.
Kui soovite seda raamatukogu kasutada, peate kirjutama veidi JavaScripti, kuid tulemus on üsna tähelepanuväärne, seega on ilmselt väärt vaeva.
