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

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

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

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Календарь
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930 
Опрос на сайте
Совершаете ли вы покупки в интернет?

Популярные новости
Архив новостей
Июнь 2017 (1)
Апрель 2017 (3)
Март 2017 (2)
Февраль 2017 (1)
Январь 2017 (1)
Декабрь 2016 (3)