75 Vefur Fjör Verkfæri Þú verður að prófa
Hreyfimyndir eru ein af þeim þróunum sem hafa klærnar í vefviðmót. Vinsældir þess sveiflast, en það er alltaf þar einhvers staðar, sem nauðsynlegur hluti í hvaða vefsíðu sem er.
Frá pínulitlum, varla sýnilegum, hleðsluskúffum, til heildarskiptingar eins og kvikmyndaleynslu, fjör nær til allra svæða af hönnun okkar.
Fyrir hönnuði sem leita að fanga, eru mikið af valkostum í boði. Frá eingöngu skreytingarfærslum sem einfaldlega snerta tengin, til mikilvægra áhrifa sem auka notendaupplifun, nær safn okkar verkfæri sem gera þér kleift að hanna hreyfimyndir af ýmsum vogum og í mismunandi tilgangi. Hér eru 75 viðbætur og bókasöfn sem þú vilt skoða. þú munt ekki nota þau alla á hverjum tíma, en hver hefur hugsjónanotkun og sumt sem þú munt nota aftur og aftur ...
1. Animate.css
Animate.css er grundvallar bókasafn af snyrtilegu vafra fjör sem liggur fyrir mörgum lausnum. Frá klassískum bouncings og fadings til nútíma flækjum og einstökum áhrifum er hægt að mæta þörfum nánast hvaða verkefnis sem er.
2. Galdur Teiknimyndir
Galdur Teiknimyndir leggur áherslu á óvenjuleg áhrif sem gefa tengi ákveðna zest. Þó að bókasafnið geti ekki hrósað um gríðarlega fjölbreytni, nægir það til að auðga notendavandann.
3. Bounce.js
Bounce.js er lítill leikvöllur þar sem þú getur gert tilraunir með CSS-undirstaða hreyfimyndir. Bættu bara við hluti og stilltu stillingarnar til að færa allt til að lifa. Og í lokin, fluttu CS-skrána.
4. AnijS
AnijS aðstoða við meðhöndlun fjör á leiðandi hátt með því að nota einfaldar leiðbeiningar eins og Ef, Á, Gera, Til. The mikill hlutur er að þú ert velkominn að nota eigin námskeið eða jafnvel Animate.css (nefnt fyrr) til að búa til eitthvað frábært.
5. Snabbt.js
Snabbt.js er frægur fyrir lágmarks nálgun sem leiðir til hratt hreyfingar. Það vegur aðeins 5kb; Hins vegar er það hægt að gefa einhverjum þáttum sýnilegan aukningu með því að þýða, snúa, skera, mæla eða breyta stærð hennar.
6. Kute.js
Kute.js er frábær hreyfimynd sem skilar góðum árangri. Það er hratt og samhæft yfir mismunandi vöfrum þökk sé settum raunhæfum fallbacks sem höndla eldri vafra. Það kemur með fjölmörgum viðbótum til að veita skilvirkt vinnuumhverfi.
7. Velocity.js
Velocity.js er hreyfimynd sem við fyrstu sýn kann að líta út úr fyrirlestrum. Hins vegar er vopnabúr hans með öllum venjulegum gerðum fjör eins og morphing, loop, slökun, rolla osfrv. Það er hratt og jQuery-sjálfstæður.
8. Löggjaldsmaður
SVG slóð fjör er auðvelt með Löggjaldsmaður . Taktu línu listaverk þitt frá Illustrator í SVG sniði og hlaða því upp á breytirann. Síðarnefndu mun búa til jQuery skrá sem annast fjörvinnsluferlið. Ef nauðsyn krefur er hægt að gera breytingar rétt innan kóðans.
9. SVG.js
SVG.js býður þér leiðandi umhverfi þar sem þú getur unnið og hreyfigetu SVGs. Það er lítið og sjálfstætt með hreinu setningafræði og sameinuðu API. Gera það sem þú vilt: virkja stærð, lit, stöðu, textarásar; umbreyta íhlutum; binda viðburði o.fl.
10. Hreyfing HÍ
Ólíkt fyrri dæmum, Hreyfimyndavél tekur kost á SASS til að búa til heillandi CSS hreyfimyndir. Það er heildarhraði af fyrirfram skilgreindum umbreytingum og áhrifum sem hægt er að nota á hvaða HTML hluti sem er. Allt virkar í öllum vinsælum vöfrum nema fyrir IE9.
11. Bíddu! Hreyfðu
Bíðið! Hreyfðu leyfir þér að keyra tafir og bíður í fjörum á einfaldan hátt. Reiknaðu öll nauðsynlegan tímafjölda í gegnum litla spjaldið og byggðu náttúrulega fjör án þess að hrekja og bustle.
12. Dynamics.js
Dynamics.js er JavaScript-máttur bókasafn sem býður upp á 9 staðlaðar áhrif til að spila með. Þú getur tilgreint lengd, tíðni, núning, væntingarstærð og væntingarstyrk til að ná fram raunveruleikanum á eðlisfræði.
13. Danshöfundur
Með Choreographer.js innan seilingar þú ættir ekki að vera hræddur við flóknar hreyfimyndir, þar sem þetta JavaScript bókasafn gerir allt þungt lyfta. Þó að það fjallar um takmarkaðan fjölda hreyfimynda, þá leyfir þú þér að vinna með sérsniðnar aðgerðir þannig að þú getir búið til eigin meistaraverk.
14. Anime.js
Tilkoma með glæsilegum settum aðgerðum sem gerir kleift að tengja marga fjör, samstilla mismunandi dæmi, teikna línur, morphing hlutir, byggja einstök fjör osfrv. Þetta JavaScript hreyfimynd mun koma þér á óvart með möguleika þess.
15. Mo.js
Mo.js stendur fyrir hreyfingu fyrir netið. Það er ótrúlega hratt og á sama tíma leiðandi og einfalt. Búðu til aðlaðandi gönguleiðir, óvæntar breytingar á umræðum, umbreytingum á kúlum, útliti björgunar, sprengiefni og margt fleira.
16. Sequence.js
Sequence.js er CSS-ekin rammi til að byggja upp móttækilegur snerta-virkur skref-undirstaða hreyfimyndir. Það er tilvalið til að búa til renna, kynningar, borðar og aðrar tegundir af dynamic hlutum. Meðal nokkurra iðgjaldsáforma finnur þú ókeypis sem veitir þér persónulegt opið leyfi.
17. Shifty
Shifty er tweening vél með sterka áherslu á hagræðingu, fljótur árangur, sveigjanleika og þenjanleika. Það er talið vera raunhæfur valkostur við GreenSock enn með miklu einfaldari tengi.
18. Það er þriðjudagur
Þriðjudagur er sjálfstæðan fjör bókasafn sem hægt er að nota í sambandi við önnur bókasöfn. Það gerir innganginn og útgangarnir lítill, lúmskur og glæsilegur. Það býður upp á margs konar staðlaðar áhrif, svo sem innblástur, útdráttur, innköllun, innsláttur osfrv.
19. CSS Búa til
CSS Búa til er frumstæð leikvöllur sem býr til gilt og ringulreiðarkóða fyrir venjulegt fjör. Setja nafn, bekk, hreyfimyndir, rammaeiginleikar; breyta tímalínu og bæta við merkjum: Í einu orði skaltu stilla allt sem þú þarft til að búa til venjulegan hreyfimyndir sem byggjast á myndinni.
20. Vivus.js
Sending með þremur gerðum fjör: að tefja, samstilla og sýna einn í einu, Vivus.js mun draga SVG á sléttan og náttúrulegan hátt sem gerir tilkomu hluti þess yndisleg reynsla. Þú getur farið fyrir fyrirfram ákveðnar hreyfimyndir eða notað eigin sérsniðnar aðgerðir.
21. Bonsai.js
Bonsai.js er JavaScript bókasafn fyrir háþróaða grafík meðferð. Það hefur frekar einfalt API og SVG renderer. Notaðu ritvinnsluforritið til að gefa prófdreif, kynna þér setningafræði og jafnvel hlaða niður sýnum til að byrja með.
22. GSAP af GreenSock
GSAP er öflugur fjör vettvangur sem miðar að faglegum fjör. Það hefur fjölmargar viðbætur og tól sem bera ábyrgð á ýmsum gerðum hreyfimynda. Það samanstendur af BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, o.fl.
23. Popmotion
Popmotion er annar léttur og handhægur valkostur við Greensock í safninu okkar. Það er hreyfimót með fullri stjórn yfir hverri ramma. Það hefur háþróaða tween, lit blanda og fullt af aðgerðum og aðgerðir til að byggja upp flóknar lausnir.
24. Tween.js
Mikið ótrúlegt efni er gert með hjálp Tween.js . Það er framúrskarandi tweening vél með fjölmörgum þáttum til að fá fjör undir stjórn. Það er einnig frábær lausn til að efla verkefni sem eru rekin af Three.js.
25. Hover.css
Hover.css 'bókasafn er hægt að skipta í nokkra undirstöðu flokka: 2D umbreytingar, bakgrunns umbreytingar, helgimynd hreyfimyndir, landamæri umbreytingar, skuggi og ljóma umbreytingar, málbólur og krulla. Beita þessum áhrifum á hvaða þátt í hönnun þinni án takmarkana.
26. Flutningur
Listi yfir aðgerðir af Flutningur er frekar stutt en það felur í sér mikilvægustu efni til að byggja 2D og 3D umbreytingar. Til dæmis getur þú tilgreint tafir og lengd, bætt við slökunaraðgerð, notað hlutfallsleg gildi og fleira.
27. Rocket
Eldflaugar er lausn til að prettify hreyfingu hlutar frá einum stað til annars. Það eru 8 tæknibrellur eins og pulsation eða snúningur sem gefa þetta ferð yndislegan zest .
28. Animo.js
Animo.js er tiltölulega lítið tól til að takast á við umbreytingar og hreyfimyndir. Það hefur safn af auka viðbótum, svo sem niðurtalning, snúningur og hreyfing sem auðgar bókasafnið og gerir það miklu auðveldara að ná tilætluðum áhrifum.
29. Shift.css
Shift.css er ramma til að byggja upp hreyfimyndir innan íláts sem hefur áhrif á bæði hreiður og aðlögunarhæfni. Það eru 15 tegundir af venjulegum hreyfimyndum, þar með talið að flytja, slá inn, hlakka, sleppa og einhverjum öðrum.
30. CSShake
CSShake kemur með 11 flokkum sem þvinga þætti DOM til að hrista. Þú getur valið stefnu (lárétt eða lóðrétt), tegund (fast, brjálaður, stöðug, klumpur), styrkleiki (hægur eða harður) eða bara að fara í sjálfgefið val.
31. Saffron
Ef þú vilt nota mixins til að auðvelda og fljótt vinna hreyfimyndir og umbreytingar þá Saffron er vissulega fyrir þig. Það er samantekt á endurnýtanlegum aðferðum sem eru skrifaðar í Sass þar sem hægt er að stilla breytur og breytur.
32. CSSynth
CSSynth er lítill ritstjóri þar sem þú getur notið fegurðar samstillingar. Fjörið er byggt á fjölda reitum sem þú getur tilgreint á vinstri spjaldið. Veldu áhrif, stilltu töf og veldu hvort þú vilt hlaða niður niðurstöðumarkinu í CSS eða SCSS sniði.
33. Höfundur
Ceaser er gömul, tímabundið tól til að framkvæma tilraunir með klassískum slökunarfjör. Það eru margar afbrigði sem byrja frá línulegri og endar með sérsniðnum. Tvær auka breytur (lengd og áhrif) munu hjálpa til við að fullkomna niðurstöðuna.
34. Morf.js
Til að taka ofangreint verkfæri aðeins lengra, getur þú reynt að gera það Morf.js . Það býður upp á umbreytingu byggt á sérsniðnum slökunaraðgerðum. Það eru næstum 40 fyrirfram ákveðnar valkostir sem þú getur auðveldlega lagað að verkefninu þínu.
35. Voxel.css
Voxel.css var búið til sérstaklega fyrir 3D flutninga. Einföld framkvæmd hennar gerir jafnvel nýliði kleift að fá að skilja 3D CSS. Bókasafnið hefur 4 mikilvæga flokka: Vettvangur, Veröld, Ritstjóri og Voxel sem hjálpa til við að byggja leiki og njóta aðgerða.
36. Repaintless.css
Repaintless.css notar FLIP tækni til að gera hreyfimyndir hratt og slétt. Þótt það krefst nokkurra úrbóta; Engu að síður er það fullkomið upphaf fyrir þá sem borga sérstaka athygli á árangri.
37. MixItUp
MixItUp er bókasafn til að fegra síun, flokkun, innsetningu og aðrar sjálfgefna aðgerðir sem felast í meirihluta tengslanna, svo sem söfnum, myndasöfnum osfrv. Það er óháður og lofar að veita hágæða árangur.
38. Wallop
Eins og titillinn segir, Wallop er til að sýna og fela hluti á skemmtilega hátt; Fyrirsjáanlega, almenn notkun þess liggur í að byggja renna. Hins vegar stoppar enginn þig frá því að nýta möguleika sína og skapa eitthvað áhugavert og heillandi.
39. Ramjet
Ramjet umbreytir einum þátt í annað með tálsýn hreyfingar sem er að veruleika með því að létta virka. Það er fær um að vinna með DOM þætti, SVGs, truflanir myndir eða hreyfimyndir.
40. jQuery DrawSVG
Byggt á öflugu jQuery hreyfimyndum dregur það duglegur alla leiðin í SVG og gefur myndinni dramatískan og á sama tíma glæsilegan inngang. Aðferðin er einföld: bæta við tappi á síðunni, frumstilla það og keyra fjör.
41. Animatic.js
Animatic.js er frábær lausn í gegnum vafra með samþættum reglum um eðlisfræði sem notar CSS umbreytingar, 3D umbreytingar og JavaScript til að koma öllu í líf. Helstu verkefni þess er að draga úr viðleitni ykkar til að hreyfa fjölmörgum hlutum í einu. Þú getur búið til bæði samhliða og raðbundna hreyfimyndum með því að stilla tímalengd, tefja og slökun.
42. Move.js
Move.js er oversimplified tól til að búa til reglulega fjör eins og stigstærð, skewing, færa eða þýða. Hver fjör er hægt að bæta með klassískum vellíðan virka.
43. Eg.js
Eg.js er vandlega saman safn af ýmsum áhrifum og dynamic þætti sem miða að því að auka samskipti í tengi. Það eru 8 öflugir íhlutir sem útskýra grunn verkefni og 6 helstu aðferðir og viðburði í öðrum tilgangi.
44. GFX
GFX er sannfærandi 3D fjör bókasafn til að byggja upp CSS3 fjör á forrita hátt. Það virkar með jQuery og gerir það miklu auðveldara að framleiða viðkomandi niðurstöðu. Þú getur leikið með stigstærð, snúningur, þýðingu, skew og einhver önnur efni.
45. Stíll
Þótt það sé sagt að Stíll er tæki til skemmtunar, en það mun örugglega vekja hrifningu af þér með getu sína. Stjórnstöðin býður upp á 4 flipa sem leyfir þér að stilla upp lykilmyndir, slökun, útflutningsvalkostir og HTML, sem gerir flókna hreyfimyndir auðvelt.
46. Iconate.js
Iconate.js sprautar lífinu í umbreytingar táknmynda, aukið umskipti milli tveggja atriða með skemmtilega meðfylgjandi áhrifum. Það virkar vel, ekki aðeins með Font Awesome, heldur einnig með Glyphicons og jafnvel eigin sérsniðnu setti af táknmyndum.
47. AnimateMate
AnimateMate er lítið tól til að framleiða og flytja smáskífur frá Sketch umhverfi þínu. Það er ekki eitthvað ímyndað, en það gerir þér kleift að spila með keyframes, bæta við slökunaraðgerðum, eftirlitskerfum og fleirum.
48. RAFA
CAAT (sem stendur fyrir Canvas Advanced Animation Toolkit) er sterlað ramma sem myndar öflugt samspil við JavaScript. Verkfæraskúr hennar býður upp á tjöldin, margvíslegan flutningartækni, úrklippa grímur, staðall pakki hegðunar osfrv.
49. Granim.js
Granim.js er örlítið JavaScript bókasafn fyrir spicing upp tengsl við gagnvirka halli byggir centerpieces. Það getur verið venjulegt geislamyndaður lóðrétt hreyfimynd, breytilegar stigamunur sem er beitt fyrir ofan bakgrunnsmyndina eða hreyfistöðugleiki ásamt myndgrímum.
50. Animista
Búið til af Ana Travas, Animista er leiksvæði til að framkvæma tilraunir með fullt af hefðbundnum og óalgengum fyrirfram skilgreindum CSS-knúnum hreyfimyndum. Veldu tímalengd, tímasetningu virka, töf, endurtekningarfjölda og nokkrar aðrar valkostir til að skoða útkomuna.
51. Obnoxious.css
Óeðlilegt kemur með 5 einstökum CSS-undirstöðu teikningum sem þvinga þætti viðmótsins til að hrista, snúa, stækka, líkja eftir strobeáhrifum eða breyta þyngd letursins. Allt sem þú þarft að gera er að beita völdum flokki til viðkomandi div.
52. Hreyfimyndir
Teiknimyndir inniheldur tonn af auga-grípandi dynamic áhrif sem voru lánuð frá fræga og öfluga Animate.css, enda auðveldara að nota þær. Þökk sé Polyfill vefur API er það studd af öllum nútíma vöfrum.
53. Foxholder
Foxholder er pakki með 15 ágætum smáum áhrifum sem voru búnar til sérstaklega til að bæta samskipti notenda við formið. Hver aðferð leggur áherslu á inntaksvettvanginn á sinn hátt: það getur gert landamæri bjartari, bætt við sjón vísbendingum, sett í texta og margt fleira.
54. Rhythm.js
Rhythm.js snýst allt um fjörugur fjör. Þetta JavaScript bókasafn samanstendur af áhrifum sem líkja eftir einhvers konar dansfærum. Það eru næstum 20 valkostir sem vilja bæta Boogie-Woogie við vefsvæðið þitt.
55. Colorido.js
Mjög eins og Granim.js, þetta JavaScript-máttur tappi var búið til til að vinna að litareigninni. Það hjálpar til við að breyta breytilegum tónum og ógagnsæi í bakgrunni og texta, auk þess að búa til óhefðbundnar geislamyndir, línulegar, ská og lárétta stig.
56. Barba.js
Barba.js notar PJAX (ajax-undirstaða tækni) til að létta notendum svokölluð harður hressa skipta á milli síðna. Það felur bara í sér gömlu ílátið og sýnir nýja ílátið í lúmskum augum ánægjulegri tísku.
57. ScrollReveal.js
ScrollReveal.js er vinsælt tól til að búa til hreyfimyndir. Með aðalhelgi () aðferðinni geturðu stjórnað mismunandi hreyfimyndir og stjórnað öllum stöðluðum þáttum þeirra. The mikill hlutur er þessi það virkar vel með bæði vefur og hreyfanlegur vöfrum.
58. Scrollanim
Scrollanim er minna háþróuð enn þægilegra og einfaldara tól til að nota frekar en í fyrra dæmi. Þó að það færi CSS3 en það gerir þér kleift að bæta við hreyfimyndum með JavaScript API til að framleiða hreyfimynda hreyfimyndir. Það hefur fjölda fyrirbyggða lausna sem þú getur fljótt kynnt fyrir verkefnið.
59. ScrollTrigger
Þó að fyrri tveir lausnirnar einbeita sér að hefðbundinni lóðrétta hreyfingu, þessi er til að byggja langa lárétta vefsíður. Það gerir þér kleift að byggja upp vívirkt tengi í x-ás planinu sem er fjölmennt með fallegum CSS3 fjörum með frekar frumstæðu setningafræði.
60. Force.js
Force.js er lítill lausn sem er sviptur miklum virkni og auðæfi valkosta. Hins vegar er það tilvalið fyrir reglulega verkefni eins og að setja hluti í lúmskur hreyfingu eða prettifying rolla. Eins og venjulega liggur slökun í kjarna þess að gera fjör hreint og snyrtilegt.
61. AOS
AOS stendur fyrir hreyfingu á skrúfu. Það gerir það sem það segir - afla þér fullt af líflegum fyrirfram ákveðnum áhrifum sem eru afleiðing af því að fletta atburði. Ef þú vilt gefa köflum stórkostleg inngang án þess að grófa í kóðann þá er það vissulega fyrir þig.
62. Rellax
Rellax er fyrir fallega parallax. Það er létt vanillu JavaScript bókasafn til að gefa lúmskur snerta af 3D vídd við tengi.
63. Tilt.js
Tilt.js framleiðir heillandi parallaxknúinn hallaáhrif. Það mun færa hluti í hallandi stöðu og líkja eftir 3D í grunnu 2D plani. Þú getur lagað ás sem gerir áhrifin meira áberandi og áhugavert, eða endurskapa einhvers konar glampi eða fljótandi tilfinningu.
64. Umbreyta hvenær
Umbreyta hvenær er frábær lausn til að hanna upplifunarsögur með hágæða og innfæddan stuðning fyrir farsíma. Það veðja á tveimur mikilvægum þáttum: tími og fletta stöðu og þannig gera ævintýri notanda í gegnum tengi vigilantly stjórnað af hliðinni. Það virkar með bæði SVG og venjulegum HTML þætti.
65. CSS3 Teiknimyndir
Þetta er gömul skóla rafall með lifandi sýnishorn til að búa til grunn CSS3 hreyfimyndir. Það er venjulegt stjórnstöð þar sem hægt er að stilla lengd breytinganna, fjölda endurtekninga, tímasetningar, osfrv. Venjulegt er einfalt: settu allt upp, afritaðu HTML og CSS kóða sem hér er að finna og límdu þau inn í verkefnið.
66. Curve.js
Curve.js andar lífið í línur sem gerir þeim "dans" og snúast bara eins og bylgja. Notaðu það til að búa til abstrakt, glæsilegan geometrísk innblásin bakgrunn eða miðpunkt.
67. Animator.js
Animator.js er sagður vera sveigjanlegur, duglegur og léttur. Það býður upp á auðveldasta leiðin til að stjórna keyframes og búa til CSS hreyfimyndir af ýmsum vogum. Það er líka háð áfrýjun.
68. Cel-fjör
Cel-fjör er Sass mixin sem gefur þér stjórn á hefðbundnum keyframes. Þú getur sett SVG eða einhver tegund af HTML þætti í gang.
69. Scrollissimo
Scrollismo var stofnað til að vinna í samstarfi við Greensock kunnáttu og snögga hreyfimyndir á vafra notandans. Með viðbótarfylgjandi JavaScript tappi fyrir græjurnar á snerta skjánum nær það fjölmörgum tækjum.
70. jqClouds
jqClouds er frumstæð viðbót sem býr til og byggir á hönnun með hreyfanlegum skýjum sem svífa yfir viðmótið. Þú getur breytt hugtakinu, skipt skýjum af einhverjum öðrum hlutum, til að gefa truflanir tengi ákveðna dynamic bragð.
71. Litur fjör
Eins og þú hefur giska á, þetta tól er fyrir hreyfimyndir og gagnsæi af bakgrunni, landamærum eða texta. Reyndar virkar það með lit á hvaða hlut sem hefur það sem eign.
72. Flubber
Til að útiloka skyndilegar stökk og róttækar myndbreytingar sem geta komið fram þegar einn hlutur breytist í annað sem þú getur notað Flubber . Tappiinn býður upp á sléttar interpolations milli tveggja stærða. Eina galli er að það virkar aðeins með 2D grafík.
73. Particles.js
Ef þú ert uppi að fjörugur agnir fjör-vinsæll val nú á dögum-þú getur notað þetta handhæga rafall . Það er byggt á hagkvæmu JavaScript bókasafni sem gerir allt verkið. Stilltu óskir eins og lit, númer, lögun, stærð, ógagnsæi osfrv. Og einfaldlega flytja út niðurstöðurnar.
74. 3D línur Animation with Three.js
Þetta er lítið handrit það hefur ekki alla getu framangreinds tappa. Engu að síður bætir það við viðmótið þitt fallegt líflegur bakgrunnur fyllt með hreyfimyndum. Þú getur stillt lit, línur, ógagnsæi og nokkrar aðrar valkostir til að gera það blandað í umhverfið.
75. Three.js
Síðast en ekki síst, Three.js - öflugt og fjölhæfur bókasafn sem stendur fyrir fjölmörgum glæsilegum vefsíðum. Það er hentugur fyrir bæði einföld og flókin verkefni. Það leyfir þér að vinna með
