Главная страница / Блог / CSS3 Анимация для сайта
апрель 12 2017

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

celsoft 12 апреля 2017 Блог 8 433
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/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 вашего шаблона.

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


Для добавления анимации добавьте к объекту который вы желаете анимировать класс с эффектом из списка ссылке 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> и т.д. - все зависит от ваших задач и фантазии.

В результате выше описанных действий, вы можете получить например следующую анимацию на своем сайте:



На этом пока все. Удачи вам и хорошего настроения. Подписывайтесь на нашу страницу в социальной сети "Вконтакте" https://vk.com/dlepage

Комментарии

У данной публикации еще нет комментариев. Вы можете быть первым!

Информация

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

Календарь

«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031

Опрос на сайте

Совершаете ли вы покупки в интернет?