10 „CSS3“ animacijos įrankiai, kuriuos turėtumėte žymėti
Kadangi žmonės linkę lengviau suvokti dalykus, judančius, sumaniai panaudotos animacijos gali padidinti svetainės naudotojo patirtį atkreipti dėmesį į svarbius elementus, kuriuos vartotojai turi greitai pastebėti.
„CSS3“ pristatė naują animacijos sintaksę, kuri gali padėti jums pasiekti daug įdomių dalykų. Kartais gali būti sudėtinga ir daug laiko reikalaujanti vėsių animacijų kūrimas, todėl animaiton bibliotekos ir generatoriai gali būti puikiai naudojami.
Peržiūrėkite kai kurias animacijas, kurias galima padaryti su CSS:
- 38 Įkvepiančios CSS3 animacijos demonstracijos
- 15 Gražus teksto efektas sukurtas su CSS
- 30 „Cool CSS“ animacijų, kurias turite pamatyti
- Kaip sukurti atšokimo efektą su CSS3 animacija
Šiame pranešime pažvelgsime į 10 puikių įrankių, kurie padės lengviau ir greičiau sukurti savo animacijas.
1. CSS3Gen CSS3 animacijos generatorius
CSS3Gen suteikia jums paprastą naudoti animacijos generatorių, kuris leidžia greitai generuoti pagrindines animacijas. Nors su šiuo įrankiu nesudarysite sudėtingų kūrinių, tai puikus pasirinkimas, jei norite sukurti standartinę animaciją be pernelyg didelio triukšmo.
Tu neturite padaryti savo rankų nešvarių su kodu, kaip galite nustatyti ypatybes formoje, peržiūrėti rezultatą, tada tiesiog nukopijuokite ir įklijuokite kodą į savo CSS failą.
2. CSS animacija
Jei tu reikia sudėtingesnių animacijų, galite rasti CSS animacija naudinga. Ji turi brandesnę vartotojo sąsają, galite nustatyti šiek tiek daugiau savybių ir galite stebėti, sustabdyti ir iš naujo paleisti animaciją naudodami intuityvų laiko juostą.
Taip pat yra pavyzdžių animacijos, pvz “Bounce”, “Kratoma”, ir “Sūpynės”, kad galite įkelti į generatorių ir modifikuoti kodą pagal savo poreikius.
3. Coveloping CSS animacijos generatorius
Covelopinganimacijos generatorius tikriausiai yra geriausias pasirinkimas jei esate naujas su CSS3 animacijomis, ir norite greitai suprasti, kaip jie veikia. Šis paprastas, bet galingas įrankis leidžia išbandyti įvairių tipų animacijas, kurias turi pasiūlyti CSS3, ir lengvai patikrinti, kas yra jų skirtumas.
Turite nustatyti tik 4 parametrus: animacijos tipą, animacijos funkciją, trukmę sekundėmis ir, jei animacija yra begalinė. Kai būsite pasiruošę, turite tik gauti ir patraukti sukurtą HTML ir CSS kodą.
4. Magic animacijos
Magic animacijos yra vėsioje CSS biblioteka, kuri leidžia lengvai įdėkite animacijas su specialiu efektu svetainėje. Pavyzdžiui, galite elementus išnykti ir išeiti, atidaryti į kairę arba į dešinę, tada grįžti, pasukti žemyn, aukštyn, į kairę arba į dešinę ir daugelį kitų
Jums tereikia atsisiųsti kodą, į HTML puslapį įtraukti CSS failą ir jQuery pagalba pridėti atitinkamą klasę taip:
$ ('. yourdiv'). hover (funkcija () $ (this) .addClass ('magictime puffIn');); Taip pat galite pakeisti laikmačio nustatymus ir padaryti animaciją be galo su jQuery pagalba (daugiau informacijos žr. „Readme“ failą).
5. Animate.css
Animate.css suteikia jums rinkinį vėsios, kryžminės naršyklės CSS3 animacijos. Animacijos yra suskirstytos į tokias grupes kaip dėmesio ieškotojai, grįžtantys įėjimai, grįžtantys išėjimai, įsišakniję įėjimai ir daugelis kitų, todėl jūs tikrai negalite skųstis dėl pasirinkimo trūkumo.
Kodą galite atsisiųsti iš „Github“, tuomet turite pridėti CSS failą į savo HTML puslapį ir atitinkamas CSS klases į HTML elementus, kuriuos norite animuoti.
6. Bounce.js
Bounce.js yra patogi „JavaScript“ biblioteka, kuri leidžia jums sukurti sudėtingas animacijas. „Bounce.js“ turi brandžią vartotojo sąsają, kuri leidžia jums pridėti skirtingus komponentus - pvz., Palengvinimą, trukmę, vėlavimą ir atsiskleidimų skaičių - rankiniu būdu į animaciją, arba pasirinkti paruoštą naudojimą, tada paleisti animaciją, ir sureguliuokite ypatybes, jei tai būtina.
7. AniJS
AniJS yra „supercool JavaScript“ biblioteka, kuri leidžia jums pridėti CSS3 animacijas į jūsų dizainą ir sukurti sudėtingus UI komponentus pvz., animaciniai skirtukai, akordeonai, modalai, stumdomieji meniu, mobiliųjų programų pranešimai, slinkties atskleidimas ir daug daugiau.
Jis veikia su visomis šiuolaikinėmis naršyklėmis, įskaitant „iOS“ ir „Android“, nereikalauja jokių trečiųjų šalių bibliotekų ir turi įspūdingą vitriną „AniCollection“, kur galite lengvai eksperimentuoti su įvairiais bibliotekos teikiamais efektais.
8. Vieno elemento CSS spinneriai
Ar kada nors norėjote pagerinti savo dizainą animaciniai pakrovimo suktukai? Jei atsakymas yra „taip“, ši miela „CSS spinner“ biblioteka gali būti puikus pasirinkimas. Suktukų CSS kodas parašytas LESS. Nėra jokių nustatymų, kodas paruoštas, jį reikia įterpti tik į savo HTML ir CSS failus.
9. Spidometras
Spidometras yra puikus įrankis patalpinkite vėsius animuotus skaitiklius į savo svetainę. Tai CSS ir „JavaScript“ biblioteka, CSS dalis parašyta „Sass“, ir jūs galite pasirinkti iš įvairių temų, pvz “Skaitmeninis”, “Traukinių stotis”, ir “Automobilis”.
Norėdami naudoti „Odometer“, turite pridėti „JavaScript“ failą ir pasirinktą temos failą į savo HTML puslapį, tada class = "odometer" selektorių į elementą, kurį norite padaryti į animuotą matuoklį. Idealus pasirinkimas vizualiai vaizduoti duomenis arba padaryti “Netrukus” puslapis labiau akį traukiantis.
10. Snabbt.js
Snabbt.js tai minimalistinė animacinė biblioteka padeda lengvai perkelti daiktus aplink. Jei jums reikia šiek tiek įkvėpimo, pažiūrėkite į demonstracijas, kad pamatytumėte, ką jūs galite pasiekti su šiuo protingu animacijos įrankiu, toliau pateikiamame paveikslėlyje esanti animacinė periodinė lentelė yra tik viena iš daugelio galimybių, kurias Snabbt.js lengvai įgyvendina.
Jei norite naudoti šią biblioteką, turite parašyti šiek tiek „JavaScript“, tačiau rezultatas yra gana įspūdingas, todėl tikriausiai verta problemų.
