Категория:
Опубликовано:

Анимация блоков при прокрутке

Все популярнее становятся сайты с анимированными блоками.

Ниже рассмотрим возможность анимации с помощью Animate.css и jQuery Viewport Checker'а.

Качаем библиотеки и подключаем их к сайту:

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> // jQuery для работы Viewport Checker'а
<script src="jquery.viewportchecker.js"></script>

Создадим несколько блоков для иллюстрации, к примеру:

<div class="wrapper">
    <div class="anim-block">Контент</div>
    <div class="anim-block">Контент</div>
    <div class="anim-block">Контент</div>
    <div class="anim-block">Контент</div>
    <div class="anim-block">Контент</div>
    <div class="anim-block">Контент</div>
</div>

Так же нужно добавитьпару стилей в дефолтный CSS-файл сайта:

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

Ok. Теперь приступим к анимированию блоков. Добавляем на страницу следующий код js:

jQuery(document).ready(function() {
  jQuery('.anim-block').addClass('hidden').viewportChecker({
   classToAdd: 'visible animated bounceInLeft',
   offset: 100
  });
});

Из этого:

  • .anim-block - селектор блока, который нужно анимировать.
  • bounceInLeft - тип применяемой анимации (можно выбрать на странице библиотеки)
  • offset: 100 - позиция блока в мониторе. Проще говоря высота блока, на которую он должен выдвинутся для проигрывания анимации. Измеряется в пикселях.

Детали настройки viewportChecker'а.

Все.

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

Комментарии

Вообще не работает в chrome и opera, в чем проблема? В остальных браузерах смотрел, все норм

Приведите примеры кода.

$('div.wrapper_results').each(function (){
$(this).addClass('hidden').viewportChecker({
classToAdd: 'visible animated bounceInRight',
offset: 100
});
});

у меня несколько блоков с классом "wrapper_results", идущих один за одним по вертикали. В mozilla все работает стабильно, блоки анатомируются по очереди как только появляются в зоне видимости. В chrome и opera срабатывает анимация только на первый блок, остальные не появляются никаким образом.

Теперь без each:
$('.anim-block').addClass('hidden').viewportChecker({
classToAdd: 'visible animated bounceInLeft',
offset: 100
});

Админ, я решил эту проблему, думаю вот это исправление нужно внести в статью, я думаю не один с такой проблемой. Нашел решение на англо язычных форумах. Дело в том, что нужно внести изменения в код самого viewportcheker'а. Прикрепляю ссылочку:
]]>https://bugs.chromium.org/p/chromium/issues/detail?id=771790]]>

Спасибо, Иван! Столкнулся с такой же проблемой: в опере часть анимированного контента скрылась. Действительно, проблема была в viewportchecker.js В моём случае помогла такая конструкция:
var scrollElem = document.scrollingElement ? document.scrollingElement : ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'),
viewportTop = $(scrollElem).scrollTop(),
viewportBottom = (viewportTop + windowHeight);

Добавить комментарий