Animate.css: как вызвать анимацию в нужном месте и в нужное время

Зачем нужна анимация на сайте?

В первую очередь для того, чтобы сделать движение элементов приятным для глаз и более плавным.

В жизни ведь никакие действия не происходят одномоментно:

- Под напором ветра деревья плавно машут ветками;
- Плавно машет крыльями птица в полете;
- Двери в квартире закрываются плавно;
- Вы, также, ходите плавно.

Ничего в природе не движется резко или рывками.
Почему же на сайтах все движения происходят именно так?

К сожалению, развитие веб-технологий до последнего времени не позволяло использовать анимацию, но теперь, когда большинство браузеров ее поддерживают, грех этим не воспользоваться.

Анимация элементов на любом сайте выглядит очень уместно, более того, является новым трендом в сайтостроении.

Итак, давайте вместе анимируем ваш сайт!

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

Чтобы любой из, описанных ранее, эффектов срабатывал при загрузке экрана, будем использовать анимацию + javascript.

Содержание:

1. Aнимации текста CSS3 при загрузке экрана
2. Анимация картинки CSS при наведении курсора мыши

Анимация текста или изображений это удачное решение для сайтов со множеством картинок, мастер-классов или пошаговых кулинарных рецептов, а анимация изображений просто приятна глазу.

↑ Aнимации текста CSS3 при загрузке экрана

Как добавить анимацию на сайт:
Часть первая

Чтобы эффект анимации CSS3 проявлялся именно при загрузке экрана нам дополнительно потребуется viewportchecker.js.

И добавление к файлу стилей следующих строк:

.hidden {opacity:0;}
.visible {opacity:1;}

Скрипт viewportchecker.js можно скачать здесь - https://github.com/dirkgroenen/jQuery-viewport-checker

Поместите его в папку js, а подключите в functions.php.

Для этого, нужно добавить к коду подключения файла animate.css подключение скрипта viewportchecker.js,
вот так:

// register scripts & style
function animate_scripts() {
 if (!is_admin()) {
   wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/animate.css');
   wp_enqueue_style('animate');
 
   wp_enqueue_script('viewportchecker', esc_url(get_template_directory_uri()). '/js/jquery.viewportchecker.js', '', '', true);
 }
}
add_action('wp_enqueue_scripts', 'animate_scripts');

Также, должна быть подключена библиотека jquery.js - но, как правило, она уже работает.

Давайте рассмотрим примеры CSS анимации с использованием скрипта.

Пример 1: Постепенная загрузка изображений или текста - смотрите на примере моей темы All Services:

Демо

Чтобы увидеть эффект, прокрутите страницу вниз.

К блокам, к которым вы хотите применить эффект постепенной загрузки, нужно добавить:

class="box animated fadeIn"

А вызвать этот эффект при загрузке экрана, можно так:

// Animation fadeIn
 jQuery('img').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeIn', 
    offset: 100   
 });

Если хотите, чтобы анимация текста CSS3 работала при прокрутке в обратную сторону, т.е.
прокрутили страницу вниз - анимация работает, прокрутили обратно, блоки снова анимируються, нужно добавить параметр repeat: true, вот так:

// Animation fadeIn
jQuery('img').addClass("hidden").viewportChecker({
   classToAdd: 'visible animated fadeIn', 
   offset: 100,
   repeat: true 
});

Пример 2: Всплывающие блоки

Демо

Чтобы увидеть эффект, прокрутите страницу вниз.

К блокам, к которым вы хотите применить этот эффект, нужно добавить:

class="box animated zoomIn"

А вызвать этот эффект при загрузке экрана, можно так:

// Animation zoomIn
jQuery('.box').addClass("hidden").viewportChecker({
   classToAdd: 'visible animated zoomIn', // Class to add to the elements when they are visible
   offset: 100   
});

Все вместе будет выглядеть так:

<script> 
(function ($) {
  $(document).ready(function ($) {
 
    // Animation fadeIn
    jQuery('img').addClass("hidden").viewportChecker({
       classToAdd: 'visible animated fadeIn', 
       offset: 100,
       repeat: true 
    }); 
 
    // Animation zoomIn
    jQuery('.box').addClass("hidden").viewportChecker({
       classToAdd: 'visible animated zoomIn', 
       offset: 100   
    }); 
 
  });
})(jQuery);
</script>

Вставить этот скрипт можно в файл footer.php.

Напоминаю, что посмотреть все эффекты анимации animate.css можно здесь - https://daneden.github.io/animate.css

А добавить их можно аналогично, вставив в вышеприведенный скрипт вместо fadeIn и zoomIn.

Больше примеров использования Animate.css + jQuery-viewport-checker смотрите здесь - http://www.web2feel.com/freeby/scroll-effects/index.html,
а также здесь - https://daneden.github.io/animate.css

↑ Анимация картинки CSS при наведении курсора мыши

Пример 3 CSS анимации: Добавляем эффект пульсации

Чтобы вызвать этот эффект, нужно добавить к выбранному блоку или изображению:

class="box animated pulse"

А вызвать эффект CSS анимация при наведении можно так:

$('img.animated').hover(
  function() {
    $(this).addClass('pulse'); // Добавляем класс pulse 
  },
  function() {
     $(this).removeClass('pulse'); // Удаляем класс pulse
  }
)

Кстати, к hover эффектам CSS относится и изменение цвета кнопки "Демо", на которую вы нажимали, чтобы посмотреть анимацию. Выполнен он так:

.demo {
width: 120px;
height: 36px;
background: #72aa11;
border: 1px solid #4B7B05;
margin: 10px 0 10px 0;
padding-top: 8px!important;
color: #fff;
text-align: center;
font-size: 16px;
box-sizing: border-box;
}
.demo:hover {
background: #89bd14;
color: #fdfaa9!important;
}