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-библиотека для добавления на ваш сайт анимации пульсации.

Данная публикация представляет собой перевод статьи «JavaScript Libraries for Creating Stunning Animations» , подготовленной дружной командой проекта Интернет-технологии.ру