CSS3-анимация: базовая HTML-разметка и примеры

Основные сведения

Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery . Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...

С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.

Анимация при скроллинге: комбинация

«WOW.js » и «Animate.css »

на WordPress...

* чтобы повторить анимацию, перезагрузите страницу.

Как настроить?

ШАГ 1
Для начала скачайте эти два файла («WOW.js» и «Animate.css»)

ОБНОВЛЕНО (25.июль.2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2
ШАГ 2
Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).

ШАГ 3
Помещаем в эту строку:

* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл - скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂

ШАГ 4
Помещаем в самый низ страницы перед эти строки:

new WOW ().init();

* Тоже укажите правильный путь к файлу и проверьте в браузере.

Определенная информация

ШАГ 6
Продвинутые настройки. Добавляем функции:
data-wow-duration : Меняем продолжительность анимации;
data-wow-delay : Задержка перед началом анимации;
data-wow-offset : Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration : Повторяем анимацию «столько-то раз».

Определенная информация Определенная информация

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

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Введение в CSS-анимацию

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

1. Ключевые кадры

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

Ключевые кадры указываются с помощью правила @keyframes , определяемого следующим образом:

@keyframes имя анимации { список правил }

Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.

@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.

Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.

После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:

H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }

Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).

1.1. Временная функция для ключевых кадров

Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.

Пример

@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }

Пять ключевых кадров указаны для анимации с именем «bounce». Между первым и вторым ключевым кадром (то есть между 0% и 25%) используется функция замедления. Между вторым и третьим ключевым кадром (то есть между 25% и 50%) используется функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по страницу на 50px , замедляясь по мере того, как он достигает своей наивысшей точки, а затем ускоряясь, когда он падает до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.

Временная функция, указанная в ключевом кадре to или 100% , игнорируется.

2. Название анимации: свойство animation-name

Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.

Если несколько анимаций пытаются изменить одно и то же свойство, то выполнится анимация, ближайшая к концу списка имен.

Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис - или символ нижнего подчеркивания _ .

Свойство не наследуется.

Синтаксис

Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;

3. Продолжительность анимации: свойство animation-duration

Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.

Свойство не наследуется.

Синтаксис

Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

4. Временная функция: свойство animation-timing-function

Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.

Свойство не наследуется.

animation-timing-function функции Безье пошаговые функции

Значения:
linear	Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.
ease	Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) .
ease-in	Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) .
ease-out	Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) .
ease-in-out	Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) .
cubic-bezier(x1, y1, x2, y2)	Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации.
step-start	Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start) .
step-end	Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end) .
steps(количество шагов,положение шага)	Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0 , если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1 . Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений: jump-start — первый шаг происходит при значении 0 jump-end — последний шаг происходит при значении 1 jump-none — все шаги происходят в пределах диапазона (0, 1) jump-both — первый шаг происходит при значении 0 , последний — при значении 1 start — ведет себя как jump-start end — ведет себя как jump-end Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end .
initial
inherit

Синтаксис

Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;

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

5. Повтор анимации: свойство animation-iteration-count

Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.

Свойство не наследуется.

Синтаксис

Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

6. Направление анимации: свойство animation-direction

Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .

Свойство не наследуется.

animation-direction

Значения:
normal	Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
reverse	Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
alternate	Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
alternate-reverse	Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1 .

Синтаксис

Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;

7. Проигрывание анимации: свойство animation-play-state

Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover .

Свойство не наследуется.

Синтаксис

Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

8. Задержка анимации: свойство animation-delay

Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms .

Свойство не наследуется.

Синтаксис

Animation-delay: 5s; animation-delay: 3s, 10ms;

9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своих исходным стилям. По умолчанию анимация не влияет на значения свойств, когда анимация применяется к элементу — animation-name и animation-delay . Кроме того, по умолчанию анимация не влияет на значения свойств после ее завершения — animation-duration и animation-iteration-count . Свойство animation-fill-mode может переопределить это поведение.

Свойство не наследуется.

animation-fill-mode

Значения:
none	Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards	После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;).
backwards	В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate).
both	Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.

Синтаксис

Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

10. Краткая запись анимации: свойство animation

Дополнительная информация

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .

11. Множественные анимации

Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:

Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}

| 18.02.2016

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

Color:hover { background:#53ea93; }

2. Появление рамки

Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:

Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }

3. Свинг

Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

• @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
• animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

@-webkit-keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing:hover { -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } 4. Затухание

Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:

Fade { opacity: 1; } .fade:hover { opacity: 0.6; }

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

7. Трансформация в круг

Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:

Circle:hover { border-radius: 70%; }

8. Вращение

Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры

Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Привет. Напомню, что уже писал про , но это были всего лишь базовые принципы. Сейчас же предлагаю ознакомиться с готовым набором свойств анимации в одном файле animate.css. Это не генератор, а библиотека, которая вполне корректно работает во всех популярных браузерах. И вы можете посмотреть вот эти примеры.

Подключение Animate.css

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

Именно таким образом прописывается свойства анимации объектов. , animated — обязательный, а tada — один из эффектов. Но нам нужен непосредственно цикл и сейчас мы это сделаем. Это можно сделать, создав новый класс и прописать к нему специальные свойства или же к уже существующему.

Циклическая анимация Animate.css

.new { animation-iteration-count : infinite ; }

New{animation-iteration-count: infinite;}

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

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

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 – количество повторов анимации

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

Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях;)