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

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

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

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

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

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

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

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

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

Как добавить на сайт 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
  }
)

Как вызвать анимацию CSS3 на сайте с помощью Animate.css и jQuery-viewport-checker

Кстати, к 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;
}

Если этот пост вам помог разобраться с добавлением визуальных эффектов на сайт, кликайте на звездочки рейтинга и социальные кнопки.

Если не справитесь сами, можете заказать эту услугу мне Смайл

Метки записи:  
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(3 голоса, в среднем: 5 из 5)

Комментарии

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 202
Отзывов 4485