Анимация — это один из трендов в дизайне веб-интерфейсов. Ее популярность непостоянна, но анимация неизменно где-то присутствует как обязательный атрибут каждого сайта.
Это и маленькие, чуть заметные индикаторы загрузки, и целые страницы, на которых вам как будто бы показывают фильм, — анимация попадает во все области дизайна.
У тех, кто желает применять анимацию, большой выбор вариантов: от чисто декоративных элементов, легко украшающих интерфейс, до эффектов, деятельно улучшающих пользовательский опыт. Нижеперечисленные инструменты разрешат вам создавать анимацию различных масштабов и для самых различных целей. Это 75 плагинов и библиотек, с которыми стоит ознакомиться.
Само собой разумеется, вы не станете пользоваться ими всеми и неизменно, но у каждого из этих инструментов имеется собственная определенная задача, и кое-какие совершенно верно придутся вам по душе.
1. Animate.css
Это фундаментальная библиотека анимаций, совместимых со всеми браузерами и подходящих для множества задач. Она содержит все — от хороших подскакиваний и затуханий до уникальных эффектов и последних новинок — и может удовлетворить потребности фактически любого проекта.
2. Magic Animations
Magic Animations концентрируется на необыкновенных эффектах, придающих интерфейсу определенную изюминку.
Эта библиотека не может похвалиться громадным разнообразием, но ее достаточно, дабы обогатить пользовательский опыт.
3. Bounce.js
Это маленькая площадка для опытов с CSS-анимацией. Легко добавьте элемент и выставьте настройки, дабы все ожило, а позже экспортируйте CSS-файл.
4. AnijS
Это интуитивно понятный инструмент для работы с анимацией, разрешающий применять личные категории либо Animate.css, дабы создать что-нибудь увлекательное.
5. Snabbt.js
Известен собственными минималистическим подходом, разрешающим создавать стремительные анимации. Он весит всего 5 килобайт, но способен заметно улучшить любой элемент, вращая его, наклоняя либо масштабируя.
Просматривайте кроме этого: Как легко и скоро создать GIF-анимацию?
6. Kute.js
Это надежный движок для анимации, стремительный и совместимый с различными браузерами благодаря комплекту действенных альтернатив для устаревших браузеров. Kute.js содержит множество плагинов для организации продуктивной рабочей среды.
7. Velocity.js
Velocity.js — непрезентабельный на первый взгляд движок. Но в его арсенал входят все простые типы анимации, он стремителен и свободен от jQuery.
8. Lazy Line Painter
С этим инструментом легко создавать масштабируемую векторную графику. Экспортируйте собственные картинки из Illustrator в формате SVG, загрузите в конвертер, и он сгенерирует файл iQuery, содержащий анимацию. При необходимости вы имеете возможность вносить трансформации прямо в код.
9. SVG.js
SVG.js — это интуитивно понятная среда, в которой вы имеете возможность руководить файлами SVG и анимировать их. Это маленький свободный инструмент с несложной структурой и неспециализированным API. Вы имеете возможность делать все, что захотите: анимировать размер, цвет, текст и позицию, трансформировать компоненты, связывать их между собой и без того потом.
Просматривайте кроме этого: Создание анимационной ячейки в SVG графике
10. Motion UI
В отличие от прошлых примеров, при создании занимательных CSS-анимаций Motion UI опирается на Sass. Инструмент содержит массу заблаговременно эффектов и заданных настроек, каковые возможно применить к любому компоненту HTML. Все трудится во всех популярных браузерах, не считая IE9.
11. Wait! Animate
Wait! Animate позволяет без проблем трудиться с задержками и ожиданием. Посчитайте все нужные временные промежутки на маленькой панели и создайте естественную анимацию без лишней суеты.
12. Dynamics.js
Dynamics.js — это библиотека, трудящаяся на JavaScript и предлагающая 9 стандартных эффектов. Вы имеете возможность задать длительность, частоту, трение, предполагаемый размер и силу, дабы создать реалистичные анимации, основанные на законах физики.
13. Choreographer.js
С данной библиотекой вам больше не нужно будет бояться сложных анимаций, по причине того, что она заберёт все неприятности на себя. До тех пор пока она трудится с ограниченным комплектом анимаций, но разрешает настраивать функции так, как вам комфортно, дабы создавать личные шедевры.
14. Anime.js
Anime.js — это впечатляющий комплект функций, разрешающих связывать множество анимаций, синхронизировать этапы, рисовать линии, изменять форму объектов, создавать личные анимации и т.д.
15. Mo.js
Mo.js стремителен, интуитивно понятен и несложен. Он разрешает создавать вовлекающие тропинки, неожиданные диалоговые изменения, пузыри, взрывные эффекты и другое.
16. Sequence.js
Sequence.js — это фрейм, трудящийся на CSS, для респонсивных пошаговых анимаций, которыми возможно руководить посредством прикосновений. Инструмент совершенен для слайдеров, презентаций, баннеров и других динамических компонентов. Среди премиум-замыслов вы отыщете бесплатный, снабжающий вас личной open-source лицензией.
17. Shifty
Shifty — это движок для построения промежуточных изображений, ставящий во главу угла оптимизацию, стремительную работу сайта, расширяемость и гибкость. Данный инструмент считается хорошей альтернативой GreenSock с значительно более понятным интерфейсом.
18. It s Tuesday
Tuesday — это независимая библиотека анимаций, которой возможно пользоваться вместе с другими библиотеками. Она делает выходы и входы плавными, ровными и элегантными и предлагает множество стандартных эффектов: затухание, расширение, сжатие, падение и т.д.
19. CSS Animate
CSS Animate — это несложная площадка для написания рабочего кода для любой анимации. Задайте имя, класс, фрейма и свойства анимации, руководите временной последовательностью и додавайте маркеры — одним словом, настраивайте все, что вам необходимо, дабы создать стандартную анимацию, основанную на главном кадре.
20. Vivus.js
Vivus.js поддерживает три типа анимации: задержка, открытие и синхронизация одного изображения за вторым, — и разрешает создавать плавные и естественные векторные анимации, так что загрузка контента станет приятным опытом.
Просматривайте кроме этого: Анимация для начинающих: анимация прыгающего мячика
21. Bonsai.js
Bonsai.js — это библиотека JavaScript для важной работы с графикой, с несложным API и визуализацией SVG. Применяйте онлайн-редактор, дабы протестировать инструмент, познакомиться с его структурой а также загрузить кое-какие примеры, с которых возможно начать работу.
22. GSAP by GreenSock
GSAP — это платформа для опытных аниматоров. На ней представлено множество плагинов и утилит, несущих ответственность за различные типы анимации: BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite и другие.
23. Popmotion
Popmotion — еще одна легкая и дешёвая альтернатива GreenSock. Это движок, разрешающий всецело осуществлять контроль любой фрейм, с инструментами для построения промежуточных изображений, других эффектов и цветовых трансформаций, нужных при разработке сложных ответов.
24. Tween.js
Посредством Tween.js сделано много хороших анимаций. Это передовой движок для построения промежуточных изображений со множеством настроек и хорошее ответ для улучшения проектов, трудящихся на Three.js.
25. Hover.css
Библиотеку Hover.css возможно поделить на пара основных категорий: 2D-трансформации, фоновые изменения, анимация иконок, трансформации границ, света и теней, пузыри с текстом и завитки. Используйте эти эффекты к любым элементам собственного дизайна без ограничений.
26. Transit
Перечень функций Transit достаточно мал, но в него входят самые ответственные вещи для 2D и 3D анимации. К примеру, вы имеете возможность задать продолжительность и задержку, добавить размытие, применять относительные размеры и без того потом.
27. Rocket
Rocket — это решение чтобы украсить перемещение объекта из одной точки в другую. В Rocket входят 8 таких эффектов, как вращение и пульсация, придающих перемещению изюминку.
28. Animo.js
Animo.js — это довольно малый инструмент для переходов и анимаций. В него входит комплект таких дополнительных плагинов, как вращение и обратный отсчёт, обогащающих библиотеку и облегчающих достижение нужного результата.
29. Shift.css
Shift.css — это фрейм для анимации в контейнера, разрешающий трудиться и с постоянными, и с адаптивными элементами и содержащий 15 стандартных анимаций, а также перемещение, появление, выход, падение и другие.
30. CSShake
CSShake включает в себя 11 категорий, заставляющих элементы вашего DOM дрожать. Вы имеете возможность выбрать направление (по горизонтали либо по вертикали), тип (зафиксированный, сумасшедший, постоянный, прерывистый), интенсивность (слабо либо очень сильно) либо стандартные настройки.
Просматривайте кроме этого: 6 способов применения анимации без отвлечения от оффера
31. Saffron
Если вы предпочитаете миксины для легкого и стремительного управления анимациями и переходами, Saffron вам определенно подойдет. Это собрание способов многократного применения, написанное на Sass, с возможностью задавать параметры и переменные.
32. CSSynth
CSSynth — это мелкий редактор, в котором вы насладитесь красотой синхронизации. Анимация основана на серии квадратов, количество которых вы имеете возможность задать на панели слева. Выберите эффект, задайте задержку и скачайте итог в формате CSS либо SCSS.
33. Ceaser
Ceaser — ветхий, проверенный временем инструмент с целью проведения опытов с хорошей анимацией затухания, содержащий множество вариантов. Два дополнительных параметра (эффект и продолжительность) окажут помощь довести итог до совершенства.
34. Morf.js
В случае если вам необходимо больше, чем дает Ceaser, вам стоит попытаться Morf.js. Он предлагает переходы, основанные на всецело настраиваемых функциях затухания, и содержит практически 40 готовых вариантов, каковые легко приспособить под собственные потребности.
35. Voxel.css
Voxel.css создан специально для 3D-рендеринга, и простота его использования и установки разрешит освоить 3D направляться кроме того новичкам. Библиотека содержит 4 ответственных категории: сцена, мир, редактор и воксел, — каковые окажут помощь создавать игры и наслаждаться работой.
36. Repaintless.какое количество
Данный инструмент применяет технику FLIP для стремительных и плавных анимаций. Он неидеален, но это хорошее начало для тех, кто особенно заботится о скорости работы собственного сайта либо приложения.
37. MixItUp
MixItUp — это библиотека прекрасных фильтров, сортировок, действий и пересечений, нужных практически всем интерфейсов наподобие галерей, портфолио и т.д. Она независима и обещает высокую скорость работы сайта.
38. Wallop
Wallop рекомендован для прекрасных исчезновения и эффектов появления, и, конечно, с его помощью в большинстве случаев делают слайдеры. Но, никто не мешает вам развивать его потенциал и создавать что-нибудь занимательное и интригующее.
39. Ramjet
Ramjet превращает один элемент в второй с иллюзией перемещения, появляющейся благодаря функции затухания. Инструмент трудится с элементами DOM, векторной графикой, статичными и анимированными изображениями.
40. jQuery DrawSVG
Основанный на движке jQuery, данный плагин прорисовывает части векторной графики совершает картину резкой, но одновременно с этим элегантной. Легко добавьте плагин на страницу, инициализируйте и запустите анимацию.
41. Animatic.js
Это хорошее решение-и кросс, оживляющее все посредством CSS-изменений, 3D-изменений и JavaScript. Его основная задача — уменьшить вам упрочнения при анимировании нескольких объектов сходу. Вы имеете возможность создавать параллельные и последовательные анимации и совершенно верно настраивать длительность, затухание и задержку.
42. Move.js
Move.js — это упрощенный инструмент для стандартных анимаций наподобие масштабирования, вращения, перемещения либо перехода. Каждую анимацию возможно улучшить хорошей функцией затухания.
43. Eg.js
Eg.js — это шепетильно подобранная коллекция разных динамических элементов и эффектов, призванных улучшить сотрудничество с интерфейсом. В ее состав входит 8 замечательных компонентов для главных методов и 6 основных задач для других случаев.
44. GFX
GFX — это занимательная библиотека 3D-анимации для программируемых анимаций на CSS3. Она трудится с jQuery, так что добиться желаемых результатов достаточно легко. Вы имеете возможность «поиграть» с масштабированием, вращением, прочими эффектами и переходами.
45. Stylie
Не смотря на то, что Stylie и считается развлекательным инструментом, он определенно способен впечатлить вас собственными возможностями. Центр управления содержит 4 вкладки, разрешающие настраивать затухание и ключевые кадры, экспортировать варианты и HTML, другими словами легко создавать сложные анимации.
46. Iconate.js
Iconate.js «вдыхает жизнь» в изменение иконок, додавая красивые эффекты и улучшая переходы между двумя объектами. Данный инструмент превосходно трудится не только со шрифтом Font Awesome, но и с Glyphicons, и разрешает самостоятельно задать комплект пиктограмм.
47. AnimateMate
AnimateMate — это компактный инструмент для и экспорта маленьких анимаций из Sketch. Он разрешает трудиться с функциями затухания и ключевыми кадрами, руководить последовательностями и без того потом.
48. CAAT
CAAT — это надежный фрейм, трудящийся в тандеме с JavaScript. В комплект инструментов входят сцены, технологии мульти-рендера, маски, обычный комплект эффектов и второе.
49. Granim.js
Granim.js — это маленькая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это возможно обычный круговой градиент, либо динамический градиент, используемый к фону картины, либо движущиеся градиенты в сочетании с масками.
50. Animista
Animista — это площадка с целью проведения опытов с кучей готовых стандартных и нестандартных анимаций для CSS. Задайте длительность, время, задержку, количество сотрудничеств и другие параметры и взглянуть на итог.
Просматривайте кроме этого: Изучаем нужные особенности и создаем анимации на Android
51. Obnoxious.css
Obnoxious.css содержит 5 неповторимых анимаций, основанных на CSS и заставляющих элементы интерфейса дрожать, вращаться, возрастать, поменять вес шрифта и имитировать строб-импульс. Все, что вам необходимо, — это применить интересующий вас эффект к нужному элементу.
52. Animatelo
Animatelo включает в себя кучу завлекающих внимание динамических эффектов, забранных из известного Animate.css, так что их легче применить. Поддерживается всеми современными браузерами.
53. Foxholder
Foxholder — это пакет с 15 мелкими увлекательными эффектами, созданными специально для улучшения сотрудничеств пользователя с формой. Любой из них выделяет поле для ввода разрешённых: можно сделать его границы бросче, добавить визуальные подсказки, вынудить текст двигаться и т.д.
54. Rhythm.js
Rhythm.js — это библиотека JavaScript с мелкими красивыми анимациями, вдохновленными стилем диско: эффекты имитируют разные танцевальные перемещения. Она содержит практически 20 вариантов, каковые привнесут на ваш сайт мало буги-вуги.
55. Colorido.js
Как и Granim.js, данный плагин для JavaScript создан для управления цветами. Он оказывает помощь динамически изменять прозрачность и тон текста и фона, и создавать нестатичные радиальные, линейные, диагональные и горизонтальные градиенты.
56. Barba.js
Barba.js применяет PJAX (технику, основанную на подходе ajax), дабы избежать резкого переключения страниц. Данный инструмент мягко скрывает ветхий контейнер и заменяет его новым так, что это приятно глазу.
57. ScrollReveal.js
ScrollReveal.js — это популярный инструмент для анимации с прокруткой. Благодаря ему вы имеете возможность руководить несколькими анимациями и всеми их стандартными параметрами. Данный инструмент превосходно трудится и с десктопными, и с мобильными браузерами.
Просматривайте кроме этого: Думаем на тему долгой прокрутки, либо так именуемого скроллинга
58. Scrollanim
Scrollanim — не столь изысканный, но более эргономичный и несложный инструмент. Он рекомендован для CSS, но разрешает применять и JavaScript API, дабы создать анимацию, запускающуюся при прокрутке страницы. Он содержит пара готовых ответов, каковые возможно сразу же применить к собственному проекту.
59. ScrollTrigger
В случае если прошлые два инструмента концентрируются по большей части на классическом вертикальном скролле, то ScrollTrigger создан для разработки сайтов с горизонтальной прокруткой. Он разрешает создавать динамические горизонтальные интерфейсы, наполненные прекрасными CSS-анимациями, и достаточно несложен в обращении.
60. Force.js
Force.js — это компактное ответ, не отличающееся достатком функционала и вариантов. Но оно идеально для таких стандартных задач, как привести объекты в перемещение либо украсить скроллинг, а благодаря эффектам затухания анимация получается чистой и опрятной.
61. AOS
AOS — еще один инструмент для анимации скроллинга с кучей готовых эффектов, запускаемых прокруткой. Если вы желаете сделать на своем сайте красиво появляющиеся секции, но не желаете закапываться в код, AOS подойдет вам.
62. Rellax
Rellax разрешает поработать с параллакс-эффектом. Это легкая универсальная JavaScript-библиотека для придания интерфейсу количества.
63. Tilt.js
Tilt.js формирует интригующий эффект наклона, основанный на параллаксе. Данный инструмент разрешает наклонить объект, имитируя 3D в стандартной 2D-плоскости. Вы имеете возможность отрегулировать ось, и сделать объект блестящим либо парящим.
64. Transform-when
Transform-when — это хорошее ответ для опыта, основанного на сторителлинге, стремительное и поддерживающее мобильные устройства. Оно строится на двух крайне важных параметрах: позиция и время скроллинга, — так что вы имеете возможность чутко осуществлять контроль сотрудничество пользователя с вашим интерфейсом. Ответ трудится и с векторной графикой, и с простыми элементами HTML.
65. CSS3 Animation
Это генератор стандартной CSS3-анимации с возможностью просмотра превью. CSS3 Animation включает в себя простой центр управления, где вы имеете возможность задать продолжительность перехода, количество повторений, хронометраж и без того потом. Задайте настройки, скопируйте оказавшийся код и засуньте его в собственный проект.
66. Curve.js
Curve.js вдыхает жизнь в линии, заставляет их танцевать, кружиться и переливаться. Применяйте данный инструмент для элегантных геометрических орнаментов.
67. Animator.js
Animator.js эластичен, действен и стремителен. Это несложный метод руководить главными кадрами и генерировать CSS-анимации разных масштабов. К тому же, это независимый инструмент.
68. Cel-animation
Cel-animation — это миксин для Sass, разрешающий руководить главными кадрами. Вы имеете возможность сделать подвижным любой элемент HTML либо векторную графику.
69. Scrollissimo
Scrollissimo был создан, дабы вместе с Greensock анимировать объекты при скроллинге. При помощи дополнительного JavaScript-плагина для устройств с сенсорным экраном данный инструмент трудится на большинстве девайсов.
Просматривайте кроме этого: Анимация при скроллинге может стоить вам конверсии
70. jqClouds
jqClouds — это простой плагин, что генерирует парящие тучи, дабы придать статичному интерфейсу динамичный вид. Вы имеете возможность заменить облака любыми вторыми объектами.
71. Color animation
Color animation — это инструмент для анимирования прозрачности и тона фона, текста и границ. Трудится с цветом любого объекта.
72. Flubber
Дабы не допустить резкие метаморфозы и внезапные скачки, случающиеся, в то время, когда один объект преобразовывается в второй, вы имеете возможность применять Flubber. Единственный минус инструмента в том, что он трудится лишь с 2D-графикой.
73. Particles.js
В случае если вам нравится популярная сейчас анимация частиц, вам стоит воспользоваться Particles.js. Данный генератор основан на библиотеке JavaScript, которая берет всю работу на себя. Задайте интересующие вас параметры: цвет, количество, форма, размер, прозрачность и другое, — и просто экспортируйте итог.
74. 3D Lines Animation with Three.js
Это маленький скрипт, не владеющий всеми возможностями плагинов, обрисованных выше. Однако, он додаёт к вашему интерфейсу прекрасный фон с анимированными частицами. Вы имеете возможность задать цвет, линии, прозрачность и другие параметры, дабы фон сочетался с остальными элементами вашего сайта.
75. Three.js
Three.js — широкая, многоцелевая библиотека, на которую опирается множество сайтов. Она подойдет и для несложных, и над сложных проектов. Она разрешает трудиться с , , CSS3D и WebGL, дабы создавать впечатляющие 3D-анимации.
Высоких вам конверсий!
По данным: webdesignerdepot.com.
Случайные статьи:
«Основы анимации для веб-дизайнера»
Подборка похожих статей:
-
7 Инструментов оптимизации конверсии, которые повысят доходность вашего бизнеса
Эксперты в области оптимизации конверсии довольно часто грешат тем, что, ведя разговор о итогах собственной работы, предпочитают оперировать безликими и…
-
Таймер: инструмент оптимизации конверсии, который почти никто не использует
Как вычисляете, может ли одна маленькая строки текста на странице вашего товарного лендинга привести к значительному повышению числа продаж? Быть может,…
-
Сервисы и инструменты, которые переконвертируют ваш дизайн в код
Не все обожают тратить время на то, дабы переконвертировать собственный дизайн в код. К счастью, существует большое число хороших компаний, каковые…
-
8 Трендов digital-маркетинга, которые нужно срочно ловить
Виталий Попов Управляющий директор, Екатеринбург Внедрите эти технологии в собственных компаниях в 2017 году, дабы опередить соперников! Длительность…