75 Nástroje pro animaci na webu, které musíte vyzkoušet
Animace je jedním z trendů, který má své drápy do webových rozhraní. Jeho popularita se mění, ale je tam vždy někde, jako základní součást nějakého webu.
Z malých, stěží viditelných, nakládacích rolích, přes celou stránku přechází jako zážitek z filmu, animace se dostává do každé oblasti našich návrhů.
Pro designéry, kteří chtějí zahrnout animaci, je k dispozici mnoho možností. Z čistě dekorativních přechodů, které prostě rozšiřují rozhraní, na smysluplné efekty, které zlepšují uživatelské zkušenosti, naše kolekce pokrývá nástroje, které vám umožní vytvářet animace různých velikostí a pro různé účely. Zde je 75 pluginů a knihoven, které si budete chtít vyzkoušet; nebudete je používat vždy, ale každý má ideální pouzdro a některé budete používat znovu a znovu ...
1. Animate.css
Animate.css je základní knihovna čistých cross-browserových animací, které jsou základem řady řešení. Od klasických skoků a vyblednutí až po moderní změny a jedinečné efekty je schopen uspokojit potřeby téměř jakéhokoli projektu.
2. Magické animace
Kouzelné animace se zaměřuje na mimořádné efekty, které poskytují rozhraní zvláštní koktejl. Ačkoli se knihovna nemůže pochlubit obrovskou rozmanitostí, stačí obohatit uživatelskou zkušenost.
3. Bounce.js
Bounce.js je malé hřiště, kde můžete provádět experimenty s animacemi založenými na CSS. Stačí přidat součást a naladit nastavení, aby vše žilo. A nakonec exportujte soubor css.
4. AnijS
AnijS pomáhá při manipulaci s animací intuitivním způsobem pomocí jednoduchých instrukcí, jako je například Pokud, On, Do, To. Skvělá věc je, že můžete používat své vlastní třídy nebo dokonce Animate.css (zmíněné dříve), abyste vytvořili něco úžasného.
5. Snabbt.js
Snabbt.js je proslulý svým minimálním přístupem, který přináší rychlé animace. To váží pouze 5kb; je však schopen poskytnout jakýkoli komponent viditelnou podporu při překládání, otáčení, zkosení, zmenšení velikosti nebo změně velikosti jeho tvaru.
6. Kute.js
Kute.js je šterlinkový animační motor, který poskytuje vynikající výkon. Je to rychlá a kompatibilní v různých prohlížečích díky souboru životaschopných záloh, které zpracovávají starší prohlížeče. Dodává se s mnoha pluginy, které poskytují efektivní pracovní prostředí.
7. Velocity.js
Velocity.js je animační stroj, který na první pohled může vypadat nereprezentativně. Jeho arzenál však obsahuje všechny běžné typy animací, jako je morfování, smyčka, uvolňování, posouvání atd. Je to rychlá a nezávislá na jQuery.
8. Lazy Line Painter
SVG animace cesty jsou snadné Lazy Line Painter . Vezměte si kresbu čáry z aplikace Illustrator ve formátu SVG a nahrajte ji do konvertoru. Ta druhá generuje soubor jQuery, který zpracovává proces animace. Pokud je to nutné, můžete provést změny přímo uvnitř kódu.
9. SVG.js
SVG.js nabízí intuitivní prostředí, kde můžete manipulovat a animovat SVG. Je malý a nezávislý s čistou syntaxí a jednotným rozhraním API. Dělejte, co chcete, animovat velikost, barvu, pozici, textové cesty; transformační komponenty; vázání událostí atd.
10. Pohybové uživatelské rozhraní
Na rozdíl od předchozích příkladů, Motion UI využívá výhodu SASS k vytváření zajímavých animací CSS. Existuje celá řada předdefinovaných přechodů a efektů, které lze aplikovat na libovolnou komponentu HTML. Vše funguje ve všech populárních prohlížečích kromě IE9.
11. Počkejte! Animovat
Počkejte! Animovat umožňuje operovat zpoždění a čeká v animacích jednoduchým způsobem. Vypočtěte všechny požadované časové intervaly v malém panelu a vytvořte přirozenou animaci bez shonu.
12. Dynamics.js
Dynamics.js je knihovna s podporou jazyka JavaScript, která nabízí 9 standardních efektů. Můžete určit dobu trvání, frekvenci, tření, velikost očekávání a sílu předvídání pro dosažení skutečných animací založených na fyzice.
13. Choreographer.js
S Choreographer.js na dosah ruky byste se neměli bát komplexních animací, jelikož tato knihovna JavaScript provádí všechny těžké zvedání. I když se jedná o omezené množství animací, přesto vám umožní pracovat s vlastními funkcemi, abyste mohli vytvářet vlastní mistrovská díla.
14. Anime.js
Přichází s působivou sadou funkcí, která umožňuje spojování více animací, synchronizaci různých instancí, kreslení čáry, morfování objektů, vytváření jednotlivých animací apod. JavaScript engine animace vás překvapí svým potenciálem.
15. Mo.js
Mo.js znamená pohyb po webu. Je to neuvěřitelně rychlá a zároveň intuitivní a jednoduchá. Vytvářejte poutavé trasy, neočekávané modální přechody dialogu, rozvržení bublin, roztržené animace a mnoho dalšího.
16. Sequence.js
Sequence.js je CSS-řízený rámec pro vytváření citlivých dotykových aktivních krokových animací. Je ideální pro vytváření posuvníků, prezentací, bannerů a dalších druhů dynamických komponent. Mezi několika prémiovými plány najdete bezplatnou licenci, která vám uděluje osobní licenci open-source.
17. Shifty
Shifty je doplňovací motor se silným zaměřením na optimalizaci, rychlý výkon, flexibilitu a rozšiřitelnost. To je považováno za životaschopnou alternativu k GreenSock ještě s mnohem jednodušším rozhraním.
18. Je úterý
úterý je samostatná animační knihovna, která může být použita v tandemu s ostatními knihovnami. To dělá vstupy a výstupy vypadat hladce, jemně a elegantně. Nabízí celou řadu standardních efektů, jako jsou vyblednutí, rozšíření, zmenšení, drop-in atd.
19. CSS Animate
Animace CSS je primitivní hřiště, které vytváří platný a nepořádekový kód pro každou běžnou animaci. Nastavit název, třídu, vlastnosti animace, vlastnosti rámce; manipulujte s časovou osu a přidáváte značky: jedním slovem upravte vše, co potřebujete k vytvoření běžné animace založené na klíčovém snímku.
20. Vivus.js
Doprava se třemi typy animací: zpoždění, synchronizace a odhalení po jednom, Vivus.js bude čerpat SVG hladkým a přirozeným způsobem, díky čemuž bude vznik komponentu krásným zážitkem. Můžete přejít na předdefinované animace nebo použít vlastní funkce.
21. Bonsai.js
Bonsai.js je knihovna jazyka JavaScript pro pokročilé manipulace s grafikou. Má velmi jednoduché vykreslování API a SVG. Použijte jeho on-line editor pro testovací jednotku, seznamte se se syntaxí a dokonce si stáhněte některé ukázky, abyste mohli začít.
22. GSAP GreenSock
GSAP je výkonná animační platforma zaměřená na profesionální animace. Má řadu pluginů a nástrojů, které jsou zodpovědné za různé typy animací. Skládá se z BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite atd.
23. Popmotion
Popmotion je další lehká a šikovná alternativa k naší firmě Greensock. Jedná se o pohyblivý motor s plnou kontrolou nad každým rámem. Má pokročilé doplnění, barevný mix a spoustu funkcí a akcí pro vytváření komplexních řešení.
24. Tween.js
Spousta neuvěřitelných věcí se dělá za pomoci Tween.js . Jedná se o špičkový tweeningový motor s mnoha parametry, díky nimž je animace pod kontrolou. Je také vynikajícím řešením pro posílení projektů, které řídí Three.js.
25. Hover.css
Hover.css 'knihovna lze rozdělit do několika základních kategorií: 2D přechody, přechody na pozadí, animace ikon, hraniční přechody, přechody stínů a záře, bubliny řeči a kudrlinky. Aplikujte tyto efekty na libovolný prvek vašeho návrhu bez omezení.
26. Tranzit
Seznam funkcí Tranzit je spíše krátký, ale obsahuje nejdůležitější věci pro budování 2D a 3D transformací. Můžete například zadat zpoždění a trvání, přidat funkci uvolnění, použít relativní hodnoty a další.
27. Raketa
Raketa je řešení pro precizování pohybu objektu z jednoho místa na druhé. Existuje 8 speciálních efektů, jako je pulzace nebo rotace, které dávají této cestě krásnou chuť .
28. Animo.js
Animo.js je poměrně malý nástroj pro získání zvládnutí přechodů a animací. Má sadu doplňkových pluginů, jako je odpočítávání, otáčení a animace, které obohacují knihovnu a usnadňují dosažení požadovaného efektu.
29. Shift.css
Shift.css je rámec pro vytváření animací uvnitř kontejneru, který ovlivňuje vnořené i adaptivní prvky. Existuje 15 typů standardních animací, včetně pohybu, vkládání, ukončení, pádu a dalších.
30. CSShake
CSShake přichází s 11 třídami, které nutí prvky vašeho DOM, aby se otřásly. Můžete zvolit směr (vodorovný nebo svislý), typ (pevný, bláznivý, konstantní, kus), intenzita (pomalá nebo tvrdá) nebo jen pro výchozí volbu.
31. Šafrán
Pokud dáváte přednost použití mixin, abyste mohli snadno a rychle manipulovat s animacemi a přechody Šafrán je jistě pro vás. Jedná se o kompilaci opakovaně použitelných metod, které jsou napsány v Sass, kde můžete nastavit proměnné a parametry.
32. CSSynth
CSSynth je malý editor, kde si můžete vychutnat krásu synchronizace. Animace je založena na rozmezí čtverců, které můžete zadat na levém panelu. Vyberte efekt, nastavte zpoždění a zvolte, zda chcete stáhnout kód výsledku ve formátu CSS nebo SCSS.
33. Ceaser
Ceaser je starý, osvědčený nástroj pro provádění experimentů s klasickým uvolňováním animace. Existuje řada variant, které začínají od lineární a končí s vlastní. Dva další parametry (trvání a účinek) pomohou vylepšit výsledek.
34. Morf.js
Chcete-li výše uvedený nástroj ještě trochu dále, můžete se pokusit Morf.js . Nabízí přechody založené na vlastních uvolňovacích funkcích. Existuje téměř 40 předdefinovaných možností, které lze rychle přizpůsobit projektu.
35. Voxel.css
Voxel.css byl vytvořen speciálně pro 3D vykreslování. Jeho jednoduchá implementace umožňuje i nováčkům, aby získali uchopení 3D CSS. Knihovna má 4 důležité třídy: Scéna, Svět, Editor a Voxel, které pomáhají vytvářet hry a užívat si akce.
36. Repaintless.css
Repaintless.css používá technologii FLIP, aby animaci rychle a hladce. Ačkoli to vyžaduje nějaké zlepšení; nicméně je to perfektní start pro ty, kteří věnují zvláštní pozornost výkonu.
37. MixItUp
Smíchat to je knihovna pro zkrášlující filtrování, třídění, vkládání a další standardní akce, které jsou vlastní většinovým rozhraním, jako jsou portfolia, galerie atd. Je to závislost a slibuje, že poskytuje vysokou úroveň výkonu.
38. Wallop
Jak uvádí název, Pecka je pro ukázání a skrytí věcí příjemným způsobem; jeho všeobecné použití spočívá v budování jezdců. Nicméně, nikdo vás nezastaví ve využívání svého potenciálu a při vytváření něčeho zajímavého a zajímavého.
39. Ramjet
Ramjet transformuje jeden prvek do druhého s iluzí pohybu, která se uskutečňuje pomocí funkce uvolnění. Je schopen pracovat s prvky DOM, SVG, statickými obrázky nebo animovanými obrázky.
40. jQuery DrawSVG
Na základě výkonného animačního nástroje jQuery efektivně čerpá všechny cesty uvnitř SVG, což dává fotografii dramatický a současně elegantní vstup. Postup je jednoduchý: přidání plugin na stránku, inicializujte ji a spusťte animaci.
41. Animatic.js
Animatic.js je skvělé řešení pro prohlížeče s integrovanými fyzikálními pravidly, které využívají transformace CSS, 3D transformace a JavaScript, aby vše přivedlo k životu. Jeho hlavním úkolem je snížit vaše úsilí o animaci mnoha objektů najednou. Můžete vytvářet paralelní i sekvenční animace, které pečlivě upravují funkci trvání, zpoždění a uvolnění.
42. Move.js
Move.js je zjednodušený nástroj pro vytváření pravidelných animací, jako je škálování, zkosení, pohyb nebo překlady. Každá animace může být zdokonalena funkcí klasické snadnosti.
43. Např
Např je pečlivě sestavená sbírka různých efektů a dynamických prvků, jejichž cílem je zvýšit interakce v rozhraní. Existuje 8 výkonných komponent, které vymezují základní úkoly a 6 hlavních metod a událostí pro jiné účely.
44. GFX
GFX je přesvědčivá 3D animační knihovna pro vytváření animací CSS3 programovým způsobem. Pracuje s nástrojem jQuery, čímž je mnohem jednodušší vytvořit požadovaný výsledek. Můžete hračku s měřítkem, rotací, překlady, skewing a další věci.
45. Stylie
I když se to říká Stylie je nástroj pro zábavu, přesto vás jistě zapůsobí svým schopností. Řídicí centrum obsahuje 4 karty, které vám umožňují naladit klíčové snímky, uvolnění, možnosti exportu a HTML, takže složité animace jsou snadné.
46. Iconate.js
Iconate.js vkládá život do transformací ikon, což zlepšuje přechod mezi dvěma položkami příjemným doprovodným efektem. Funguje to skvěle nejen s Font Awesome, ale také s Glyphicons a dokonce i vlastní vlastní sadu piktogramů.
47. AnimateMate
AnimateMate je malý nástroj pro vytváření a export malých animací z prostředí vašeho náčrtu. Není to něco fantazie, přesto vám umožňuje hrát s klíčovými snímky, přidávat funkce uvolnění, řídící sekvence a další.
48. CAAT
CAAT (což znamená Canvas Advanced Animation Toolkit) je rámec šterlinků, který tvoří výkonný tandem s JavaScriptem. Jeho sada nástrojů obsahuje scény, technologie více renderů, ořezové masky, standardní balíček chování atd.
49. Granim.js
Granim.js je malá knihovna jazyka JavaScript pro vytváření rozhraní s interaktivními středovými prvky založenými na gradientu. Může se jednat o standardní animaci radiálního gradientu, dynamické gradienty aplikované nad pozadí pozadí nebo pohyblivé přechody v kombinaci s obrazovými maskami.
50. Animista
Vytvořil Ana Travas, Animista je hřiště pro provádění experimentů s množstvím konvenčních a neobvyklých předdefinovaných CSS animací. Zvolte dobu trvání, funkci časování, zpoždění, počet iterací a některé další možnosti, abyste mohli výsledek zkontrolovat.
51. Obnoxious.css
Obnoxious.css přichází s 5 jedinečnými animacemi založenými na CSS, které vynucují prvky rozhraní, které se protřepávají, otáčejí, zvětšují, napodobují efekt stroboskopu nebo mění váhu písma. Vše, co musíte udělat, je použít preferovanou třídu na požadovanou div.
52. Animatelo
Animatelo obsahuje celou řadu zajímavých dynamických efektů, které byly vypůjčeny ze slavné a výkonné Animate.css a poskytují tak snadnější způsob, jak je aplikovat. Díky rozhraní Web Animations API polyfill je podporováno všemi moderními prohlížeči.
53. Foxholder
Foxholder je balíček 15 hezkých malých efektů, které byly vytvořeny speciálně pro zlepšení interakcí uživatele s formulářem. Každá metoda zdůrazňuje vstupní pole svým vlastním způsobem: může vytvářet hranice jasnější, přidávat vizuální stopy, nastavit text pohybu a mnohem více.
54. Rhythm.js
Rhythm.js je to o hravých malých animacích inspirovaných diskotikou. Tato knihovna jazyka JavaScript obsahuje efekty, které napodobují určitý druh tanečních pohybů. Existuje téměř 20 možností, které přidá boogie-woogie na vaše webové stránky.
55. Colorido.js
Stejně jako Granim.js, tento plugin s podporou jazyka JavaScript byl vytvořen pro manipulaci s vlastností barvy. Pomáhá dynamicky měnit tóny a opacitu pozadí a textu, stejně jako vytvářet nestatické radiální, lineární, diagonální a vodorovné přechody.
56. Barba.js
Barba.js využívá technologie PJAX (technika založená na metodě ajax), která ulehčuje uživatelům tzv. tvrdé obnovování přepínání mezi stránkami. Právě skrývá starý kontejner a zobrazuje nový kontejner jemným oko.
57. ScrollReveal.js
ScrollReveal.js je populární nástroj pro vytváření scroll animací. Pomocí metody main reveal () můžete spravovat různé animace a ovládat všechny jejich standardní aspekty. Skvělá věc je, že funguje dobře jak s webovými, tak mobilními prohlížeči.
58. Scrollanim
Scrollanim je méně sofistikovaný a ještě jednodušší a jednodušší nástroj, než použít předchozí příklad. Ačkoli to favorizuje CSS3, ale umožňuje přidávat animace pomocí API jazyka JavaScript pro vytváření animací vyvolaných posunem. Má řadu předem připravených řešení, která se můžete rychle projevit v projektu.
59. ScrollTrigger
Zatímco předchozí dvě řešení se soustředí hlavně na tradiční vertikální posouvání, toto je pro budování dlouhých horizontálních webových stránek. Umožňuje vybudovat dynamická rozhraní v rovině osy x osazené krásnými animacemi CSS3 pomocí poměrně primitivní syntaxe.
60. Force.js
Force.js je malé řešení, které je zbaveno obrovské funkčnosti a bohatosti možností. Je však ideální pro běžné úkoly, jako je nastavení objektů do jemného pohybu nebo protisměrného posouvání. Jak je obvyklé, uvolnění leží v jeho jádru, což činí animaci čistou a čistou.
61. AOS
AOS znamená animaci na rolovacím panelu. Dělá to, co říká - poskytne vám spoustu živých předdefinovaných efektů, které jsou vyvolány rolováním. Chcete-li dát úsekům dramatický vstup bez hlubokého kopání do kódu, pak je to určitě pro vás.
62. Rellax
Rellax je pro krásnou paralaxu. Jedná se o lehkou vanilkovou JavaScriptovou knihovnu, která dává jemný nádech 3D rozměru na rozhraní.
63. Tilt.js
Tilt.js produkuje zajímavý efekt naklonění paralaxy. Objekty budou přesunuty do skloněné polohy napodobující 3D v základní 2D rovině. Osu můžete upravit tak, aby byl efekt více atraktivní a zajímavý, nebo obnovit nějaký vzhled nebo plovoucí pocit.
64. Transformace-kdy
Transformovat-kdy je skvělé řešení pro vytváření zkušeností s vyprávěním příběhů s vysokou výkonností a nativní podporou mobilních zařízení. Sází na dva důležité parametry: čas a pozice pro posouvání, čímž uživatelské dobrodružství přes rozhraní bdělě kontroluje vaše strana. Pracuje jak s SVG, tak s běžnými prvky HTML.
65. Animace CSS3
Tento je generátor staré školy s živým náhledem pro vytváření základních animací CSS3. Existuje standardní řídicí centrum, kde můžete nastavit dobu přechodu, počet iterací, časových funkcí apod. Rutina je jednoduchá: nastavte vše, zkopírujte výsledné HTML a CSS kódy a vložte je do projektu.
66. Curve.js
Curve.js dýchá život do linií, které je "tančí" a točí se stejně jako vlna. Použijte jej k vytvoření abstraktního elegantního geometricky inspirovaného pozadí nebo středů.
67. Animator.js
Animator.js se říká, že je flexibilní, efektivní a lehký. Nabízí nejjednodušší způsob správy klíčových snímků a vytváření animací CSS různých stupnic. Je to také závislost zdarma.
68. Cel-animace
Cel-animace je Sass mixin, který vám dává kontrolu nad tradičními klíčovými snímky. Můžete spustit SVG nebo libovolný typ prvků HTML.
69. Scrollissimo
Scrollismo byl vytvořen pro práci v partnerství s Greensockem dovedně a hladce animovat objekty na navigačním panelu uživatele. S doplňkovým doprovodným pluginem plug-in pro dotykový displej pokrývá celou řadu zařízení.
70. jqClouds
jqClouds je primitivní plugin, který vytváří a načrtává návrh s pohyblivými oblaky, které se přes rozhraní překrývají. Můžete změnit koncept, který nahradí mraky jiným objektem, a dát statickému rozhraní zvláštní dynamickou chuť.
71. Barevná animace
Jak jste si mysleli, tento nástroj je pro animaci tónu a průhlednosti pozadí, okraje nebo textu. Ve skutečnosti funguje s barvou jakéhokoli objektu, který má jako vlastnost.
72. Flubber
Chcete-li vyloučit náhlé skoky a drastickou metamorfózu, ke které může dojít při převedení jednoho objektu do jiného, který můžete použít Flubber . Plugin nabízí hladké interpolace mezi těmito dvěma tvary. Jedinou nevýhodou je, že pracuje pouze s 2D grafikou.
73. Particles.js
Jste-li na animace hravých částic - oblíbenou volbou v dnešní době - můžete je použít tento praktický generátor . Je založen na životaschopné knihovně JavaScript, která dělá všechnu práci. Nastavte předvolby jako barva, číslo, tvar, velikost, krytí atd. A jednoduše exportujte výsledek.
74. Animace 3D linek s třemi hodnotami
Toto je malý skript který nemá všechny možnosti výše uvedených pluginů. Nicméně přidává do vašeho rozhraní krásné animované pozadí plné animace částic. Můžete konfigurovat barvy, čáry, neprůhlednost a některé další možnosti, aby se změnila ve vaše prostředí.
75. Three.js
V neposlední řadě, Three.js - výkonná a všestranná knihovna, která stojí za četnými působivými webovými stránkami. Je vhodný pro jednoduché i složité projekty. Umožňuje vám pracovat
