JavaScript-библиотеки для создания потрясающей анимации

В этой статье мы хотели бы представить вам некоторые из самых полезных JavaScript-библиотек, которые можно использовать для анимации контента веб-приложений. Данные библиотеки предназначены для создания анимации выпадающих меню, раздвижных элементов, анимации параллакса и даже шрифтов.

И главное — это все на 100% бесплатные ресурсы с открытым исходным кодом, поэтому вы можете использовать их в любом из своих проектов.

1. Dyanamic.js

Dynamics.js

Просто включите dynamics.js на странице, и после этого вы сможете анимировать свойства CSS для любого элемента DOM. Вы также сможете анимировать свойства SVG.

Dynamics.js содержит собственное свойство setTimeout. Причина в том, что requestAnimationFrame и setTimeout характеризуются разным поведением. Свойство поддерживается всеми объектами JavaScript. Библиотека была протестирована на совместимость с Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

2. Animate Plus

animate-plus

Производительная JavaScript-библиотека, помогающая анимировать свойства CSS и атрибуты SVG.

Animate Plus отлично подходит для организации быстрого взаимодействия всех элементов управления интерфейса, а также длинных последовательностей анимации для стационарных и мобильных устройств.

3. Cta.js

ctajs

Компактная производительная JavaScript-библиотекадля анимирования любого элемента («действия«) внутри любого другого элемента («эффект«) на странице.

4. Beep.js

beepjs

Beep.js представляет собой набор инструментов для создания браузерных JavaScript синтезаторов с использованием WebAudio API.

5. Iconate.js

iconatejs

Производительная JavaScript -библиотека анимации и трансформации кроссбраузерных иконок. iconate.js также поддерживает модульные шаблоны AMD и CommonJS.

6. Dom Animator

dom-animator


JavaScript-библиотека
для вывода небольших элементов ASCII-анимации в комментариях DOM. Это самостоятельная библиотека, которая использует только JavaScript (анимация выполняется в узлах комментариев, только в DOM).

7. Rainyday

rainydayjs

Rainyday.js позволяет с помощью холстов HTML5 и JavaScript создавать реалистично выглядящие эффекты капель дождя на стекле. Библиотека включает в себя расширяемый API и встроенное средство обнаружения ошибок.

Rainyday.js использует возможности HTML5, поэтому она поддерживается большинством современных браузеров.

8. Anima.js

animajs1

Anima.js позволяет использовать задержки и продолжительности, даже для анимации на CSS. Библиотека использует для создания анимации CSS-преобразования и 3d-трансформацию с включением Javascript. Вы сможете запускать, останавливать, отменять анимацию и даже создавать зависимые от событий эффекты.

9. blinkTitle.js

blinktitlejs

blinkTitle.js может создавать мигающий HTML-заголовок, предупреждение или уведомление в заголовке.

10. Snabbt.js

snabbt

Javascript-библиотека предназначена для перемещения элементов, смещения, вращения, масштабирования, наклона, а также изменения размера. Благодаря операциям умножения матриц, преобразования могут объединяться в любых комбинациях по вашему желанию. Затем конечный результат задается с помощью матриц преобразования CSS3.

11. Vivus

vivusjs

Vivus — это компактный JavaScript-класс (без зависимостей) для анимации SVG путем прорисовки. Vivus содержит множество различных эффектов анимации, реализована возможность создания пользовательского скрипта.

12. Impulse

impulse

JavaScript-библиотека для построения динамических взаимодействий на основе реальной физики, с акцентом на мобильные устройства. Вместо свойств анимации, задающих период времени, Impulse изменяет положение и скорость. Она не содержит большого количества зависимостей. Не требует наличия JQuery, но может прекрасно взаимодействовать с ним.

13. Ani.js

anijs

AniJS — это декларативная JavaScript-библиотека для обработки CSS-анимации. Она полностью задокументирована, проста в работе.

14. Bounce.js

bounce-js1

Инструмент для создания красивых keyframes анимации на базе CSS3. Добавьте компонент, выберите вариант и получите короткий URL-адрес или экспортируйте код в CSS.

15. Sticker.js

stickers

Sticker.js — это JavaScript-библиотека, которая позволяет создавать эффекты отклеивания стикеров. Библиотека работает в большинстве популярных браузеров, которые поддерживают CSS3 (в том числе IE10+). Распространяется под лицензией MIT License.

16. Wow.js

wowjs1

WOW.js выводит CSS-анимацию во время прокручивания страницы вниз. По умолчанию вы должны использовать это действие, чтобы запустить animate.css, но вы можете легко изменить эти настройки.

17. Parallax.js

parallaxjs

Parallax.js — это компактное решение для создания эффектов параллакса. Библиотека также работает на смартфонах и планшетах (с гироскопом или аппаратным детектором движения). Parallax.js имеет несколько параметров для настройки эффекта с помощью «атрибутов данных» или через JavaScript. Библиотека может работать автономно или как плагин JQuery и Zepto (существуют две версии).

18. RippleButtons.js

ripplebuttonjs

RippleButtons.js — это компактная автономная JavaScript-библиотека для добавления на ваш сайт анимации пульсации.

Перевод статьи «JavaScript Libraries for Creating Stunning Animations» был подготовлен дружной командой проекта Сайтостроение от А до Я.