JavaScript-библиотеки для создания потрясающей анимации
В этой статье мы хотели бы представить вам некоторые из самых полезных JavaScript-библиотек, которые можно использовать для анимации контента веб-приложений. Данные библиотеки предназначены для создания анимации выпадающих меню, раздвижных элементов, анимации параллакса и даже шрифтов.
И главное - это все на 100% бесплатные ресурсы с открытым исходным кодом, поэтому вы можете использовать их в любом из своих проектов.
1. Dyanamic.js
Просто включите dynamics.js на странице, и после этого вы сможете анимировать свойства CSS для любого элемента DOM. Вы также сможете анимировать свойства SVG.
Dynamics.js содержит собственное свойство setTimeout. Причина в том, что requestAnimationFrame и setTimeout характеризуются разным поведением. Свойство поддерживается всеми объектами JavaScript. Библиотека была протестирована на совместимость с Safari 7+, Firefox, Chrome 35+ 34+, IE10+.
2. Animate Plus
Производительная JavaScript-библиотека, помогающая анимировать свойства CSS и атрибуты SVG.
Animate Plus отлично подходит для организации быстрого взаимодействия всех элементов управления интерфейса, а также длинных последовательностей анимации для стационарных и мобильных устройств.
3. Cta.js
Компактная производительная JavaScript-библиотекадля анимирования любого элемента ("действия") внутри любого другого элемента ("эффект") на странице.
4. Beep.js
Beep.js представляет собой набор инструментов для создания браузерных JavaScript синтезаторов с использованием WebAudio API.
5. Iconate.js
Производительная JavaScript -библиотека анимации и трансформации кроссбраузерных иконок. iconate.js также поддерживает модульные шаблоны AMD и CommonJS.
6. Dom Animator
JavaScript-библиотека для вывода небольших элементов ASCII-анимации в комментариях DOM. Это самостоятельная библиотека, которая использует только JavaScript (анимация выполняется в узлах комментариев, только в DOM).
7. Rainyday
Rainyday.js позволяет с помощью холстов HTML5 и JavaScript создавать реалистично выглядящие эффекты капель дождя на стекле. Библиотека включает в себя расширяемый API и встроенное средство обнаружения ошибок.
Rainyday.js использует возможности HTML5, поэтому она поддерживается большинством современных браузеров.
8. Anima.js
Anima.js позволяет использовать задержки и продолжительности, даже для анимации на CSS. Библиотека использует для создания анимации CSS-преобразования и 3d-трансформацию с включением Javascript. Вы сможете запускать, останавливать, отменять анимацию и даже создавать зависимые от событий эффекты.
9. blinkTitle.js
blinkTitle.js может создавать мигающий HTML-заголовок, предупреждение или уведомление в заголовке.
10. Snabbt.js
Javascript-библиотека предназначена для перемещения элементов, смещения, вращения, масштабирования, наклона, а также изменения размера. Благодаря операциям умножения матриц, преобразования могут объединяться в любых комбинациях по вашему желанию. Затем конечный результат задается с помощью матриц преобразования CSS3.
11. Vivus
Vivus - это компактный JavaScript-класс (без зависимостей) для анимации SVG путем прорисовки. Vivus содержит множество различных эффектов анимации, реализована возможность создания пользовательского скрипта.
12. Impulse
JavaScript-библиотека для построения динамических взаимодействий на основе реальной физики, с акцентом на мобильные устройства. Вместо свойств анимации, задающих период времени, Impulse изменяет положение и скорость. Она не содержит большого количества зависимостей. Не требует наличия JQuery, но может прекрасно взаимодействовать с ним.
13. Ani.js
AniJS - это декларативная JavaScript-библиотека для обработки CSS-анимации. Она полностью задокументирована, проста в работе.
14. Bounce.js
Инструмент для создания красивых keyframes анимации на базе CSS3. Добавьте компонент, выберите вариант и получите короткий URL-адрес или экспортируйте код в CSS.
15. Sticker.js
Sticker.js - это JavaScript-библиотека, которая позволяет создавать эффекты отклеивания стикеров. Библиотека работает в большинстве популярных браузеров, которые поддерживают CSS3 (в том числе IE10+). Распространяется под лицензией MIT License.
16. Wow.js
WOW.js выводит CSS-анимацию во время прокручивания страницы вниз. По умолчанию вы должны использовать это действие, чтобы запустить animate.css, но вы можете легко изменить эти настройки.
17. Parallax.js
Parallax.js - это компактное решение для создания эффектов параллакса. Библиотека также работает на смартфонах и планшетах (с гироскопом или аппаратным детектором движения). Parallax.js имеет несколько параметров для настройки эффекта с помощью "атрибутов данных" или через JavaScript. Библиотека может работать автономно или как плагин JQuery и Zepto (существуют две версии).
18. RippleButtons.js
RippleButtons.js - это компактная автономная JavaScript-библиотека для добавления на ваш сайт анимации пульсации.