CSS3 Анимация для сайта

В данном примере мы рассмотрим способ добавления CSS3 анимации на страницу, оформленную в стиле Landing Page. Мы не будем писать свои стили анимации, а воспользуемся библиотекой Animate.css данная библиотека предлагает около 70 эффектов крос-браузерной анимации, то есть анимация будет работать в Opera, IE, Chrome, FireFox и т.д.

Проверить совместимость проводников на предмет поддержки CSS3 анимации можно по данной ссылке http://caniuse.com/#search=animation

Установка


В первую очередь скачиваем CSS файл с анимацией с сайта разработчика https://daneden.github.io/animate.css/. После чего в файле вашего шаблона /templates/ваш_шаблон/main.tpl в разделе <head> добавляем подключение скачанного стиля:

<link rel="stylesheet" href="{THEME}/css/animate.css">

не забыв скопировать файл стилей animate.css в папку CSS вашего шаблона. Также можно подключить стиль с CDN хранилища:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Управление Анимацией


Для управления событиями анимации воспользуемся jаvascript скриптом wow.js. Скачать скрипт и почитать документацию на английском можно по адресу https://github.com/matthieua/WOW. Для установки скрипта добавьте код в конец вашей страницы перед закрывающим тегом </body> код:

<script src="{THEME}/js/wow.js" type="text/jаvascript"></script> <script> var wow = new WOW( { boxClass: 'wow', // класс, скрывающий элемент до момента отображения на экране (по умолчанию, wow) animateClass: 'animated', // класс для анимации элемента (по умолчанию, animated) offset: 0, // расстояние в пикселях от нижнего края браузера до верхней границы элемента, необходимое для начала анимации (по умолчанию, 0) mobile: true, // включение/отключение WOW.js на мобильных устройствах (по умолчанию, включено) live: true, // поддержка асинхронно загруженных элементов (по умолчанию, включена) callback: function(box) { // функция срабатывает каждый раз при старте анимации // аргумент box — элемент, для которого была запущена анимация }, scrollContainer: null // селектор прокручивающегося контейнера (опционально, по умолчанию, window) } ); wow.init(); </script>

 

Обратите внимание на путь до wow.js и не забудьте скопировать wow.js в папку js вашего шаблона.

Применяем анимацию к объектам


Для добавления анимации добавьте к объекту который вы желаете анимировать класс с эффектом из списка ссылке https://daneden.github.io/animate.css/ и класс wow для активации скрипта.

Например, у нас есть блок <div> с текстом - добавьте к этому тегу параметр class="fadeInDown wow"

fadeInDown - эффект плавного появления с движением сверху в низ
wow — класс скрипта wow.js, запускает анимацию при прокручивании страницы.

В конечном итоге наш блок должен выглядеть так:

<div class="fadeInDown wow">Ремонт iPhone и Smart Phone всех моделей</div>

Мы также можем управлять дополнительными параметрами:

  • data-wow-duration="1s" — время анимации;
  • data-wow-delay="0.5s" — задержка перед запуском анимации
  • data-wow-iteration="0" — количество повторений анимации;

В конечном итоге наш блок должен выглядеть так:

<div class="fadeInDown wow" data-wow-duration="1s" data-wow-delay="0.5s" >Ремонт iPhone и Smart Phone всех моделей</div>

Анимацию можно применить к тегам <p> <div> <img> и т.д. - все зависит от ваших задач и фантазии.

Добавить комментарий

Оставить комментарий