English
В данном примере мы рассмотрим способ добавления 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"><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/javascript"></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>Применяем анимацию к объектам
Для добавления анимации добавьте к объекту который вы желаете анимировать класс с эффектом из списка ссылке 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>В результате выше описанных действий, вы можете получить например следующую анимацию на своем сайте:
На этом пока все. Удачи вам и хорошего настроения. Подписывайтесь на нашу страницу в социальной сети "Вконтакте" https://vk.com/dlepage
Комментарии