Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.
WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.
Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на "первом" экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.
И в первой заметке (ссылка в следующем абзаце), что бы этого не происходило, я показывал вам, как и где прописывать js-коды, что бы анимация проигрывалась на определенном этапе скролла страницы. Это было крайне неудобно, однако работало на ура
Поэтому, перед тем как начать, советую посмотреть урок “ ”. Так как я уже буду подразумевать, что вы умеете пользоваться анимацией на сайте. Заодно вы сразу поймете, насколько wow.js облегчает работу . Ведь теперь нам не надо будет писать и копаться в js-коде. Подключил и забыл
И так, с введением покончено. Теперь давайте ближе к "телу". Я записал видео-урок по этой теме, однако перед просмотром, хочу показать то, что получится у вас, если пройдете урок до конца на практике. Так сказать, для большей мотивации
Ну что, посмотрели? Вот это вы "забабахаете" собственными руками. Поэтому сейчас бегом смотреть видео.
Урок: WOW.js и Animate.CSS - вместе веселее!Дерзайте!
Настройка WOW.js Как скачать и подключить.1 шаг. Скачать скрипты wow.js и animate.css с официальных сайтов (ссылки смотрите выше под видео) и разместить их в папке своего проекта.
2 шаг. Подключаем скрипты простым HTML кодом на странице в теге :
Примечание от подписчика канала Master-CSS:
Тег 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 – количество повторов анимацииОбращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях;)
07.02.2016Привет, друзья! В этой статье я предлагаю Вам ознакомиться с моей подборкой замечательных CSS-библиотек и JS-плагинов, которые помогут реализовать максимально совместимую анимацию на вашем сайте за считаные минуты.
JavaScript плагины для анимацииЕсли Вы хотите создавать анимации, которые запускаются по какому-нибудь событию или действию, то JavaScript плагины для анимации Вам очень сильно в этом помогут. Но стоит заметить, что большинство из этих анимаций написаны на CSS3, а управление ими происходит с помощью JavaScript.
AniJS
Dynamic.js - это JavaScript библиотека для создания анимаций на основе физики.
mo.js
mo.js - отличная библиотека для создания motion-графики. Пример такой графики вы встречали часто, когда Google размещал новый тематический логотип (doodle), который анимировался при наведении или клике.
cta.js
cta.js - JavaScript плагин для создания анимированных призывов к действию. Многие из них выглядят очень эффектно.
animo.js
animo.js - мощный инструмент для управления CSS3 анимациями.
html5tooltips.js
html5tooltips.js - старые добрые подсказки с современным дизайном и анимацией без зависимостей, подключил и используй.
Rocket
Rocket - интересная JS-библиотека, позволяющая анимировать путь элемента к цели.
scrollReveal.js
scrollReveal.js - плагин, позволяющий анимировать элементы при скролле страницы.
Wow.js
Wow.js - еще один javascript плагин для контроля анимации при скролле страницы.
Transit
Transit - jQuery-плагин для сглаживания переходов и трансформаций, предусмотренных в jQuery.
parallax.js
parallax.js - плагин, реагирующий на положение смартфона в пространстве, опираясь на это, управляет отступами, положением и глубиной слоев. Если же, устройство не имеет гироскоп, то вычисления берутся на основе положения курсора мыши. Двумя словами - продвинутый параллакс!
Sly
Sly - JavaScript библиотека для создания однонаправленного скролла с имплементированной поштучной навигацией. На словах может показаться сложным, рекомендую просто посмотреть пример.
Move.js
Move.js - небольшая JavaScript библиотека для создания настроенных CSS3-анимаций.
slidr.js
slidr.js - простая в использовании и легковесная JavaScript библиотека для создания вертикального и одновременно горизонтального слайдера.
CreateJS
CreateJS - это набор модульных библиотек и инструментов, которые могут работать вместе или независимо друг от друга, для обагощения интерактивности контенту. Функционал этих библиотек позволит создавать потрясающие сайты и приложения, обязательно ознакомтесь с демками.
Flippant.js
Flippant.js - JavaScript-плагин для создания элементов с эффектом поворота вокруг своей оси.
jmpress.js
jmpress.js - JavaScript-библиотека с уникальной идеей создания сайта на бесконечном HTML5 canvas"е. Идея достойна внимания.
CSS3 библиотекиОпытные разработчики уже достаточно давно позаботились о том, чтобы создать для нас библиотека с CSS3-анимациями. Теперь мы можем просто брать их и применять в своих проектах, и быть уверенными в их эффективности.
С появлением CSS3-анимаций, HTML-документы стали гораздо привлекательней, и разрабатывать их стало проще. Используя правило @keyframes, вы можете без труда определять различные параметры, включая расположение и размер HTML-элемента. Параметр animation, в свою очередь, отвечает за запуск и перемещение ключевых кадров в зависимости от определенных параметров. Без необходимости использовать javascript и плагины, мы можем без труда создавать даже самые сложные анимации, которые будут работать очень плавно во всех современных браузерах.
Проблемы возникают тогда, когда для разработки CSS3-анимаций вам необходимо использовать javascript. Все мы знаем, что javascript в большинстве случаев – это первая необходимость, которая позволяет нам вычислять отдельные значения или анимационный процесс в целом.
Комбинируем CSS и javascript при помощи нового метода animate()
Новый javascript-метод animate() позволяет нам управлять анимациями посредством скрипта. Конечно же, нам все равно нужно использовать целую пачку CSS-параметров для определения наших ключевых кадров.
{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
В вышеприведенном примере мы прикрепляем метод animate() к элементу. Внутри квадратных скобок определяется столько состояний заданного параметра, сколько нам требуется, и в нашем примере мы будем работать над height. Каждое значение записано в виде буквы объекта, а значения используются лишь для одного отдельного параметра. Комбинации вроде width и height недопустимы. Учтите, что сами значения должны быть обрамлены цитированием, и оформлены синтаксисом, отвечающим требованиям javascript, а это значит, что нужно использовать “backgroundColor” вместо “background-color”. В другой букве объекта, сразу после закрытия квадратных скобок, мы определяем дальнейшую анимацию. Мы хотим изменить длину анимацию посредством duration, частоту повторений посредством iteration и может на усмотрение определить задержку посредством параметра delay, - этот параметр определяет момент, когда должна быть запущена анимация. Все временные значения указываются в миллисекундах.
Управляем набором ключевых кадров и их продолжительностью
Нам нужно запустить метод animate() отдельно от каждого параметра, который нам нужно изменить. Это значит, что при желании изменить как height, так и width, нам нужно будет повторно запускать animate().
Document.getElementById("element").animate([
{width: "0", offset: 0},
{width: "10%", offset, 1/3},
{width: "100%", offset: 1}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
Вы вышеприведенном примере мы изменяем ширину элемента. Ширина должна изменяться, начиная от 0, и поднимаясь до 10 процентов, а затем завершиться при достижении 100 процентов. Все это будет сопровождаться плавной анимацией, естественно. Дополнительный параметр offset определяет, что изменения от 0 до 10 процентов будут занимать 1/3 всего времени, а переход от 10 к 100 займет 2/3 всего времени анимации. И при этом всем, общая продолжительность анимации определяется параметром duration. В данном случае, первая часть будет происходит на протяжении одной секунды, а вторая – на протяжении 2.
Вместо того, чтобы определять значение в виде дробей, вы также можете воспользоваться десятичными числами. Нужно использовать цифры от 0 до 1. К примеру, вместо 1/3 вы можете использовать 0.33.
Больше опций для анимации
Если вы знакомы с CSS3-параметром animation, то наверняка знаете о том, что метод animate() позволяет управлять процессом анимации. Вы можете изменять направление, а также скорость анимации, и ее ускорение. Если вы хотите указать, что после окончания, анимация должна вернуться к началу, то можете сделать это.
Document.getElementById("element").animate([
…
], {
duration: 3000,
iteration: 2,
delay: 1000,
direction: "reverse",
easing: "ease-in",
fill: "forwards"
});
Значение direction содержит в себе информацию о направлении анимации. Если вы установите значение reverse, то анимация будет воспроизведена в обратном направлении. Значение же alternate позволит вам воспроизвести анимацию в стандартном направлении, а затем в обратном. А значение alternate-reverse комбинирует два последних значения.
Значение easing позволяет вам использовать самые распространенные функции модификаций, которые уже хорошо известны по CSS3, так как там можно встречать ease-in, ease-out и так далее. По умолчанию, каждая анимация настроена на линейный ход без ускорения или замедления. Значение fill определяет, что будет представлено после окончания анимации. По умолчанию, анимация должна вернуться к стартовой точке. При использовании значения forward, анимация остановится на последнем ключевом кадре.
Управление анимацией
Применение animate() к переменной позволяет нам управлять анимацией посредством javascript. Мы можем запускать и останавливать ее по собственному усмотрению.
Var animation = document.getElementById("element").animate([
{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
document.getElementById("animation_start").addEventListener("click", function() {
animation.play();
}, false);
document.getElementById("animation_pause").addEventListener("click", function() {
animation.pause();
}, false);
В нашем примере мы прикрепляем анимацию к переменной animation, как это ни странно. Затем мы прикрепляем 2 слушателя событий к элементам с id animation_start и animation_pause. Эти слушатели позаботятся о выполнении определенных функций при клике. Play запускает анимацию, pause уже понятно, что делает, а reverse немедленно перенесет вас к последнему ключевому кадру и полностью остановит анимацию.
Эй, ведь это javascript. Конечно же, у нас есть слушатель событий, который позволяет реагировать на окончание анимации. Мы можем реализовать это при помощи finish. Внутри finish нужно определить соответствующую функцию.
Animation.addEventListener("finish", function() {
alert("The animation has ended.");
}, false);
В вышеприведенном примере мы просто запускаем сообщение о том, что анимация завершена.
Браузерная поддержка
animate() сейчас находится на ранней стадии разработки и сейчас обременена ярлыком «experimental». Поддержка этого параметра появится в Chrome, начиная с 36 версии. Если вы хотите опробовать ее сейчас, то можете скачать и установить Chrome Canary.
Paul is a Design and Perf Advocate
Evangelises Chrome and the mobile web in the Developer Relations team at Google.
В Интернете есть два основных способа создания анимации: с помощью CSS и JavaScript. Какой из них следует выбрать? Это зависит от других характеристик вашего проекта, а также от того, каких эффектов вы стремитесь добиться
TL;DRСамую простую анимацию можно создавать как с помощью CSS, так и с помощью JavaScript, однако объем затрат труда и времени будет разным (см. также статью ). У каждого варианта есть свои достоинства и недостатки, но есть хорошие правила, которым нужно следовать:
Если вы уже используете jQuery или платформу JavaScript, в которой имеются функции создания анимации, возможно, вам будет удобнее пользоваться этими функциями, а не переходить на CSS.
Анимация с помощью CSSАнимация с помощью CSS, без сомнения, является самым простым способом заставить что-то двигаться на экране.
Далее приведен код CSS, который перемещает элемент на 100 пикселей по осям X и Y. Делается это с помощью переходов CSS, для которых задано выполнение в течение 500 мс. При добавлении класса move значение свойства transform изменяется и начинается переход.
Box { -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500ms; transform: translate(0, 0); transition: transform 500ms; } .box.move { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); }
Если, как в приведенном выше фрагменте, для управления анимацией создаются отдельные классы CSS, включать и выключать каждую анимацию можно будет с помощью JavaScript:
Box.classList.add("move");
Это позволит достичь очень хорошей сбалансированности ваших приложений. Основное внимание можно уделить управлению состоянием с помощью JavaScript. В остальном же нужно просто задать соответствующие классы для целевых элементов, а анимацию при этом будет выполнять браузер. Если выбрать этот путь, то можно будет принимать события transitionend для элемента. Однако это не подходит для старых версий Internet Explorer; версия 10 была первой, в которой эти события стали поддерживаться. Все остальные браузеры поддерживают это событие довольно давно.
Код JavaScript, который требуется для приема события окончания перехода, выглядит следующим образом:
Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() { // Handle the transition finishing. }
Помимо использования переходов CSS, также можно использовать анимацию CSS, которая позволяет намного точнее контролировать отдельные ключевые кадры, продолжительность и проходы анимации.
Note: Если анимация для вас дело новое, вам следует знать, что ключевые кадры ― это старый термин, используемый со времен, когда анимацию рисовали вручную. Аниматоры создавали особые кадры для фрагмента действия, которые назывались ключевыми кадрами. В них фиксировались такие вещи, как самая крайняя часть некоего движения, а затем рисовались все отдельные кадры между ключевыми кадрами. Сегодня при создании анимации средствами CSS имеется схожий процесс, когда мы указываем браузеру, какие значения должны быть у свойств CSS в определенных точках, а браузер заполняет промежутки.Например, вы можете точно также анимировать квадрат с помощью переходов, но при этом анимация будет проходить без каких-либо действий пользователя (например, нажатия) и повторяться бесконечно. Кроме того, одновременно можно изменять несколько свойств:
/** * This is a simplified version without * vendor prefixes. With them included * (which you will need) things get far * more verbose! */ .box { /* Choose the animation */ animation-name: movingBox; /* The animation’s duration */ animation-duration: 1300ms; /* The number of times we want the animation to run */ animation-iteration-count: infinite; /* Causes the animation to reverse on every odd iteration */ animation-direction: alternate; } @keyframes movingBox { 0% { transform: translate(0, 0); opacity: 0.3; } 25% { opacity: 0.9; } 50% { transform: translate(100px, 100px); opacity: 0.2; } 100% { transform: translate(30px, 30px); opacity: 0.8; } }
При создании анимации средствами CSS вы определяете саму анимацию независимо от целевого элемента, после чего требуемая анимация выбирается с помощью свойства animation-name.
Анимация с помощью CSS все еще сильно зависит от браузера, пр том что для ее обозначения в Chrome, Safari, Opera, Safari Mobile и Android Browser используется префикс -webkit- . В Internet Explorer и Firefox префиксы не используются. Есть много средств, позволяющих создавать требуемые версии CSS с префиксами, при этом версию без префикса можно написать в исходных файлах.
Анимация с помощью JavaScriptСоздавать анимацию с помощью JavaScript сложнее, чем писать переходы или анимацию средствами CSS, однако JavaScript, как правило, дает разработчику намного более широкие возможности. Обычно используется функция requestAnimationFrame , а затем на каждом кадре анимации вручную определяется значение каждого свойства анимируемого элемента.
Note: В сети можно встретить публикации кода, в котором для анимации используется функция setInterval или setTimeout. Это ужасное решение, поскольку анимация не будет синхронизирована с частотой экрана и поэтому весьма велика вероятность появления дрожания и пропусков изображения. Использовать такой код нежелательно в любых ситуациях, а вместо него рекомендуется использовать функцию requestAnimationFrame, которая синхронизируется надлежащим образом.Function Box () {
var animationStartTime = 0;
var animationDuration = 500;
var target = document.querySelector(".box");
this.startAnimation = function() {
animationStartTime = Date.now();
requestAnimationFrame(update);
};
function update() {
var currentTime = Date.now();
var positionInAnimation = (currentTime - animationStartTime) / animationDuration;
var xPosition = positionInAnimation * 100;
var yPosition = positionInAnimation * 100;
target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)";
if (positionInAnimation
