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 в розділі додаємо підключення скачаного стилю:

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

Управління Анімацією

Для управління подіями анімації скористаємося jаvascript скриптом wow.js. Завантажити скрипт і почитати документацію на англійській мові можна за адресою https://github.com/matthieua/WOW. Для установки скрипта додайте код в кінець вашої сторінки перед закриваючим тегом код:

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();
Зверніть увагу на шлях до wow.js і не забудьте скопіювати wow.js в папку js вашого шаблону.

Застосовуємо анімацію до об’єктів

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

Наприклад, у нас є блок
з текстом – додайте до цього тегу параметр class=”fadeInDown wow”

fadeInDown – ефект плавного появи з рухом зверху в низ
wow — клас скрипта wow.js запускає анімацію при прокручуванні сторінки.

В кінцевому підсумку наш блок повинен виглядати так:
Ремонт iPhone і Smart Phone всіх моделей
Ми також можемо управляти додатковими параметрами:

  • data-wow-duration=”1s” — час анімації;
  • data-wow-delay=”0.5 s” — затримка перед запуском анімації
  • data-wow-iteration=”0″ — кількість повторів анімації;

В кінцевому підсумку наш блок повинен виглядати так:
Ремонт iPhone і Smart Phone всіх моделей
Анімацію можна застосувати до тегам

і т. д. – все залежить від ваших завдань і фантазії.

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

На цьому поки все. Удачі вам і гарного настрою. Підписуйтесь на нашу сторінку в соціальній мережі “Вконтакте” https://vk.com/dlepage
16