Создание анимации джава скрипт лекция. Как я разрабатывал скрипт анимации перемещения элемента по кривой Безье на Javascript

Доброе время суток. Перед Вами очень хорошая сборка анимационных фонов для сайта в семи разных вариациях. Анимация в основном связана с передвижением, появлением и исчезновением фигур, слов или рисунков. Я буду описывать каждый эффект по отдельности и внизу каждого анимационного фона будет кнопка "Демо" и кнопка "Скачать", а в низу сайта кнопка для скачивания всех вариаций + бонус: одностраничник, на котором все эти фоны представлены на одно странице. И так, поехали:

Анимационный фон, который я назвал "Кругляшки"

У нас на фоне стоит изображение, которое автоматически подгоняется под разрешение монитора, а на этом фоне "плавают" прозрачные круги разных размеров. Они то появляются, то исчезают. Появление, передвижение и исчезновение абсолютно рандомное. Смотрится стильно, глаз не напрягает и может сделать Ваш сайт более живым. Только прошу - не ставьте такой анимационный фон на все что угодно, так как если сайт чисто информативный и на нем много информации, именно текстовой, то такой фон будет немного отвлекать и рассеивать внимание.

Скачать Demo Анимационный фон "Звездное небо"

Реализация звездного неба с помощью jquery, html и css. Анимация достаточно качественная, можно заменить фоновую картинку на ночное небо и эффект будет еще круче. Пробуйте:))

Скачать Demo Фоновый эффект "Квадратики"

Неплохой эффект 3D, особенно с тем изображением, которое уже стоит в демо версии. Может показаться топорно, но вы всегда можете поэкспериментировать и сделать с помощью css квадраты или другие фигуры и сделать так, как вам нравится. Данный анимационный эффект работает по такой же схеме, как и остальные эффекты.

Скачать Demo Анимация фона треугольниками

Наверное самая неудачная реализация этого эффекта, но кому то может пригодиться!

Скачать Demo Анимационный фон под кодовым названием "Слова"

Пошло что-то новенькое. Здесь реализована анимация слов, которые можно менять в js файле. Смотрится интересно и думаю многим может пригодится. Думаю, что вариантов использовать такой фоновый эффект на сайте масса. Забираем!

Скачать Demo Фоновый эффект с ласковым названием "Пузырьки"

Приятный фоновый эффект, наподобии пузырьков. Они увеличиваются в размерах, а потом пропадают Действительно создается впечатление, что это лопаются пузырьки.

Скачать Demo

Подобно, развивающейся на ветру, ленточке этот фоновый эффект создает впечатление, что эта "фигура" рисуется в онлайн режиме. Красиво переплетаясь, этот рисунок имеет свойство увеличиватся в размерах и примерно через минуту он покроет всю поверхность фона. Смотрите демо и скачивайте!

Скачать Demo

Не думаю, что вы никогда не искали что то подобное, вот мне лично всегда хотелось какие то промо сайты украшать анимационным фоном примерно таким, как "Кругляшки". В этой сборке вы найдете фоновый эффект под себя.

А это как раз то, о чем я говорил. Если вы нажмете на "Демо", то попадете на страницу с полноценным сайтом одностраничником, где представлены все варианты-эффекты анимации фона в этой статье. А если нажмете на кнопку "Скачать", то скачаете архив со всеми вариантами анимационных фонов и плюс шаблон сайта одностраничника. Всего хорошего!

В финальной части будут описаны различные обратные вызовы (callback-функции), используемые для выполнения функций в зависимости от прогресса анимации. Почти в каждом примере в предыдущих статьях использовались свойства CSS, чтобы показать, как работают различные методы и параметры. Возможно, у вас могло создаться впечатление, что библиотека Anime.js больше подходит для анимации CSS-свойств. В этом уроке вы узнаете, что её также можно использовать для анимации SVG-файлов.

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

Callback-функции

Обратные вызовы используются для выполнения функций, основанных на прогрессе анимации. В Anime.js существует 4 функции обратного вызова: begin , run , update и comlete . Каждая из них запускается в определённое время и принимает объект анимации в качестве своего аргумента.

Функция begin() вызывается, когда анимация начинается. Это значит, что если у анимации есть параметр delay со значением 800 миллисекунд, то begin() будет вызвана только через 800 миллисекунд. Можно проверить, запустилась анимация или нет, используя функцию animationName.begin , которая возвращает true (запустилась) или false (не запустилась).

Run используется для выполнения функции в каждом кадре после запуска анимации. Если нужно выполнить функцию в каждом кадре с самого начала анимации, независимо от параметра delay , то используйте callback-функцию update .

Callback-функция complete похожа на begin , только вызывается она после окончания. Чтобы проверить, завершилась анимация или нет, используйте animationName.complete , как и в случае с begin .

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

Var filesScanned = { count: 0, infected: 0 }; var scanCount = document.querySelector(".scan-count"); var infected = document.querySelector(".infected-count"); var scanning = anime({ targets: filesScanned, autoplay: false, count: 100, infected: 8, delay: 1000, duration: 2000, easing: "linear", round: 1, update: function(anim) { if (anim.currentTime < 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });

В примере выше намеренно была добавлена задержка анимации, чтобы можно было заметить разницу во времени выполнения разных функций обратного вызова. Callback-функция update начинает выполняться сразу после создания объекта анимации.

Сама анимация начинается с задержкой в 1000 миллисекунд, и именно в этот момент срабатывает функция begin , которая показывает пользователю сообщение «Starting the Scan…». В то же время run начинает выполняться и обновлять числовые значения объекта после каждого кадра. После окончания анимации функция обратного вызова complete отображает сообщение «Scan Complete…».

Функции плавности

Функции плавности используются для контроля перехода начального значения свойства в конечное. Эти функции можно определить с помощью параметра easing , который может принимать значения как в виде строк, так и в виде пользовательских координат кривых Безье (в виде массива).

Существует 31 встроенная функция плавности. Одна из них называется linear , остальные 30 состоят из разных вариаций easeIn , easeOut и easeInOut . Класc elastic определяет три функции плавности: easeInElastic , easeOutElastic и easeInOutElastic . Вы можете управлять ими с помощью параметра elasticity . Значение этого параметра может находиться только в диапазоне от 0 до 1000.

Использование easeIn ускоряет изменение значения, начиная с нуля. Это значит, что изменяться оно будет сначала медленно, а в конце - быстро. Скорость изменения в начале равна нулю, а в конце - 1000.

Функция easeOut замедляет изменение значения, начиная с максимальной скорости.

easeInOut увеличивает скорость смены значений в начале и замедляет в конце. Это значит, что в середине анимации скорость будет самой высокой. Следующая вставка показывает разницу между этими функциями плавности:

С помощью anime.easings можно создавать собственные функции плавности. Ниже приведён пример создания пользовательских функций плавности:

Anime.easings["tanCube"] = function(t) { return Math.pow(Math.tan(t * Math.PI / 4), 3); } anime.easings["tanSqr"] = function(t) { return Math.pow(Math.tan(t * Math.PI / 4), 2); } var tanCubeSequence = anime({ targets: ".tan-cube", translateX: "75vw", duration: 2000, easing: "tanCube", autoplay: false }); var tanSqrSequence = anime({ targets: ".tan-sqr", translateX: "75vw", duration: 2000, easing: "tanSqr", autoplay: false });

Анимации на основе SVG-файлов

Во всех связанных с движением анимациях, которые были созданы до этого момента, целевые элементы перемещались по прямой линии. В Anime.js можно перемещать элементы по сложным SVG-контурам с большим количеством кривых с возможностью контроля положения и угла анимируемых элементов на контуре. Чтобы переместить элемент по оси X на контуре, используйте path("x") . Подобным образом элементы можно перемещать по оси Y, используя path("y") .

Если контур не представлен в виде прямой линии, то он почти всегда будет формировать угол относительно основной горизонтальной линии. При вращении любого некруглого элемента анимации общая картинка будет выглядеть более естественно, если элемент будет перемещаться по углу контура. Это можно сделать, установив значение свойства rotate равным path("angle") . Ниже представлен пример кода, который анимирует четыре элемента с разными значениями плавности по SVG-контуру:

Var path = anime.path("path"); var easings = ["linear", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime({ targets: ".square", translateX: path("x"), translateY: path("y"), rotate: path("angle"), easing: function (el, i) { return easings[i]; }, duration: 10000, loop: true });

Во вставке ниже видно, что красный квадрат с функцией плавности easeInCubic двигается медленнее всех в начале, но быстрее всех в конце. Похожая ситуация и в случае с оранжевым квадратом - быстрее всего он двигается в начале, но медленнее всех в конце.

Существует возможность анимирования преобразований разных SVG-форм из одной в другую с помощью Anime.js. Единственным условием для преобразования фигур является наличие равного количества опорных точек. Это значит, что треугольники можно преобразовать только в другие треугольники, четырёхугольники - в четырёхугольники и так далее. Попытка преобразования элементов с неравным количеством опорных точек приведёт к резкому изменению формы. Ниже представлен пример трансформаций треугольника:

Var morphing = anime({ targets: "polygon", points: [ { value: "143 31 21 196 286 223" }, { value: "243 31 21 196 286 223" }, { value: "243 31 121 196 286 223" }, { value: "243 31 121 196 386 223" }, { value: "543 31 121 196 386 223" } ], easing: "linear", duration: 4000, direction: "alternate", loop: true });

Одним из наиболее интересных эффектов Anime.js является возможность создания линейных рисунков. Всё, что нужно сделать - предоставить библиотеке контур, который вы хотите использовать для линейного рисунка; предоставить другие параметры, с помощью которых контролируется продолжительность, задержка и плавность. В примере ниже использовалась функция обратного вызова complete , чтобы сделать заливку рисунка якоря из Font Awesome жёлтым цветом.

Var lineDrawing = anime({ targets: "path", strokeDashoffset: , easing: "easeInOutCubic", duration: 4000, complete: function(anim) { document.querySelector("path").setAttribute("fill", "yellow"); } });

Используя знания всех изученных понятий, вы сможете создавать более сложные линейные изображения с гораздо лучшим контролем над тем, как они рисуются. Ниже приводится пример отрисовки имени с помощью SVG:

Var letterTime = 2000; var lineDrawing = anime({ targets: "path", strokeDashoffset: , easing: "easeInOutCubic", duration: letterTime, delay: function(el, i) { return letterTime * i; }, begin: function(anim) { var letters = document.querySelectorAll("path"), i; for (i = 0; i < letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) { document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); } if (anim.currentTime >= 2 * letterTime) { document.querySelector(".letter-o").setAttribute("fill", "#3F51B5"); } if (anim.currentTime >= 3 * letterTime) { document.querySelector(".letter-n").setAttribute("fill", "#8BC34A"); } if (anim.currentTime >= 4 * letterTime) { document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); } if (anim.currentTime >= 5 * letterTime) { document.querySelector(".letter-y").setAttribute("fill", "#795548"); } }, autoplay: false });

Небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.

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

В этой серии обучающих статей вы узнаете обо всех функциях Anime.js и сможете применять библиотеку в своих проектах.

Примечание Если вы совсем новичок в JavaScript, предлагаем вам ознакомиться с по этому языку программирования.

Установка библиотеки

Для установки можно использовать команды npm или bower:

Npm install animejs bower install animejs

Вы также можете загрузить библиотеку и включить в свой проект или ссылаться на её последнюю версию через CDN.

После успешной установки вы сможете использовать Anime.js для добавления интересных анимаций к вашим элементам. Давайте начнём с базовых возможностей библиотеки.

Определение целевых элементов

Для создания анимации с помощью Anime.js нужно вызвать функцию anime() и передать ей объект с парами ключ-значение, которые определяют целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключевое слово targets , чтобы дать библиотеке понять, что вам нужно анимировать. Это ключевое слово может принимать значение в разных форматах.

CSS-селекторы : вы можете передавать один или более селекторов в виде значений для ключевого слова targets .

Var blue = anime({ targets: ".blue", translateY: 200 }); var redBlue = anime({ targets: ".red, .blue", translateY: 200 }); var even = anime({ targets: ".square:nth-child(even)", translateY: 200 }); var notRed = anime({ targets: ".square:not(.red)", translateY: 200 });

В первом случае Anime.js будет анимировать все элементы с классом blue . Во втором - blue или red . В третьем случае Anime.js будет анимировать все дочерние чётные элементы с классом square . А в последнем случае библиотека будет взаимодействовать со всеми элементами с классом square , у которых нет класса red .

DOM-узлы (DOM node) или коллекция узлов (NodeList): вы можете также использовать DOM-узел или NodeList в качестве значения для ключевого слова targets . Посмотрите на пример использования DOM-узла для targets .

Var special = anime({ targets: document.getElementById("special"), translateY: 200 }); var blue = anime({ targets: document.querySelector(".blue"), translateY: 200 }); var redBlue = anime({ targets: document.querySelectorAll(".red, .blue"), translateY: 200 }); var even = anime({ targets: document.querySelectorAll(".square:nth-child(even)"), translateY: 200 }); var notRed = anime({ targets: document.querySelectorAll(".square:not(.red)"), translateY: 200 });

В первом случае использовалась функция getElementById() , чтобы обратиться к определённому элементу. Функция querySelector() использовалась для обращения к элементу с классом blue . А функция querySelectorAll() применялась для обращения ко всем элементам внутри документа, которые соответствуют группе определённых селекторов или же, наоборот, не входят в неё.

Существует множество функций, которые вы также можете использовать для выбора целевого элемента. Например, вы можете обратиться к элементам с определённым классом, используя функцию getElementsByClassName() . Или к элементам с определённым тегом, используя функцию getElementsByTagName() .

Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения targets в Anime.js.

Объект: вы можете использовать объекты JavaScript в качестве значения для targets . Ключ этого объекта используется в качестве идентификатора, а значение - в качестве числа, которое нужно анимировать.

Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.

Var filesScanned = { count: 0, infected: 0 }; var scanning = anime({ targets: filesScanned, count: 1000, infected: 8, round: 1, update: function() { var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count; var infectedCount = document.querySelector(".infected-count"); infectedCount.innerHTML = filesScanned.infected; } });

Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из AAA в BOY будет выведено сообщение об ошибке.

Кроме того, в коде использовалась функция обратного вызова ключа update , который вызывается на каждый кадр во время выполнения анимации. Здесь она использовалась для обновления количества сканированных и заражённых файлов. Однако вы можете пойти дальше и показать пользователям сообщение об ошибке, когда количество заражённых файлов превысит определённый порог.

Массив: возможность указывать массив JavaScript в качестве значения targets будет полезна, если вам нужно анимировать множество элементов, которые относятся к разным категориям. Например, если вы хотите анимировать DOM-узел, объект и множество других элементов, основанных на CSS-селекторах, то можно это сделать, поместив их в массив, а затем определить массив в качестве значения для targets . Пример ниже должен прояснить ситуацию.

Var multipleAnimations = anime({ targets: , translateY: 250 });

Какие свойства можно анимировать с помощью Anime.js

Теперь вы знаете, как определить разные элементы, которые нужно анимировать. Пришло время узнать, какие свойства и атрибуты могут быть анимированы при использовании библиотеки.

Свойства CSS

К таким, например, относятся ширина, высота и цвет для разных целевых элементов. Финальные значения разных анимируемых свойств вроде background-color определяются с использованием lowerCamelCase. Таким образом background-color превращается в backgroundColor . Код ниже иллюстрирует анимацию положения объекта left и цвета фона (backgroundColor) целевого объекта.

Var animateLeft = anime({ targets: ".square", left: "50%" }); var animateBackground = anime({ targets: ".square", backgroundColor: "#f96" });

Свойства могут принимать разные виды значений, которые они бы приняли при использовании обычного CSS. Например, свойство left может иметь такие значения: 50vh , 500px или 25em . Вы также можете не указывать единицу измерения после числа, но в таком случае ею станет px по умолчанию. Аналогичные действия можно выполнить с background-color , указав цвет в виде шестнадцатеричного значения или при помощи кода RGB или HSL.

CSS-трансформирование

Преобразование по осям X и Y достигается с помощью свойств translateX и translateY . Аналогичным образом можно масштабировать, наклонять или вращать элемент вдоль определённой оси, используя свойства: scale (масштабирование), skew (наклон) или rotate (поворот), соответствующие этой конкретной оси.

Существует возможность определения разных углов или в градусах, или с помощью свойства turn . Значение turn, равное 1, соответствует 360 градусам. Это позволяет сделать вычисления проще, так как вы знаете, на сколько нужно повернуть элементы относительно своей оси. В примере ниже показано, как происходит анимация масштабирования, перехода или поворота как единичного свойства, так и всех сразу.

Var animateScaling = anime({ targets: ".square", scale: 0.8 }); var animateTranslation = anime({ targets: ".square", translateX: window.innerWidth*0.8 }); var animateRotation = anime({ targets: ".square", rotate: "1turn" }); var animateAll = anime({ targets: ".square", scale: 0.8, translateX: window.innerWidth*0.8, rotate: "1turn" });

Атрибуты SVG

Единственное условие заключается в том, что значение атрибутов должно быть числовым. Способность анимировать разные атрибуты открывает возможности для создания некоторых классных эффектов. Поскольку эта статья ознакомительная, в ней будут приведены простые примеры.

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

WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки.

Как скачать и подключить.

1 шаг. Для работы нам понадобиться скачать скрипты wow.js и animate.css

Файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/

2 шаг. Подключаем скрипты

Тег script необходимо всегда добавлять в конец body. Это делается для быстроты загрузки страницы. Каждый раз, когда браузер доходит до тега script, загрузка и рендеринг всего сайта замораживается, пока скрипт не будет загружен. От этого зачастую мы видим сайты, которые долгое время просто белый лист. А так же, если скрипт размещён в конце body, у вас есть гарантия что body - ready и скрипт точно отработает.

Шаг 3. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:

new WOW().init();

На этом подключение заканчивается, и настает пора второго этапа.

Использование WOW.js

Шаг 1. Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" . В коде ниже, я показал это на примере картинки:

Шаг 2. Выбираем анимацию, и добавляем её дополнительным классом к нашей картинке:

Шаг 3 (не обязательно). Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов:

В коде выше мы указали, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.

Настройки WOW.js анимации через атрибуты

data-wow-duration – указываем время проигрывания анимации

data-wow-delay – ставим задержку перед проигрыванием анимации

data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана

data-wow-iteration – количество повторов анимации

Обращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.

В этой статье мы хотели бы представить вам некоторые из самых полезных 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 (существуют две версии ).