Представляем на
https://dle9.com/ CSS3 Анимация для любых сайтов, классное оформление в стиле Landing Page, которое можно использовать на сайте DataLife Engine любых версиях. Здесь приведем пример добавления анимации на страницу CSS3, оформление в стиле Landing Page. В описанном примере не нужно писать свои стили анимации, а используем библиотеку Animate.css, в этой библиотеке предлагает около 70 эффектов крос-браузерной анимации, замечательно работающие в Opera, IE, Chrome, FireFox и т.д. и всевозможных CMS
Совместимость проводника можно проверить на предмет поддержки CSS3 анимации
по данной ссылке .
CSS3 Анимация для сайта
DLE, этапы установки :
Для начало скачиваем CSS файл с
анимацией с сайта разработчика, далее в файле вашего шаблона /templates/ваш_шаблон/main.tpl в разделе
<head>
добавляем подключение скачанного стиля:
<link rel="stylesheet" href="/templates/Default/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. Скачать скрипт и почитать документацию на английском можно по адресу
Внимание! У Вас нет прав для просмотра скрытого текста.
. Для установки скрипта добавьте код в конец вашей страницы перед закрывающим тегом
</body>
код:
<script src="/templates/Default/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>
Обратите внимание на путь до wow.js и не забудьте скопировать wow.js в папку js вашего шаблона.
Для добавления анимации добавьте к объекту который вы желаете анимировать класс с эффектом из списка ссылке
Внимание! У Вас нет прав для просмотра скрытого текста.
и класс 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>
и т.д. - все зависит от ваших задач и фантазии.
Любую из 70 анимаций вы можете увидеть на странице примера по ссылке выше, достаточно выбрать из списка название анимации. Скачать один из примеров анимации CSS3 по следующей ссыдке
CSS3-Animaciya-dlya-sayta-DLE.rar [81,45 Kb] (cкачиваний: 108)
Комментарии 2