В данной статье я буду использовать не оптимизированную версию библиотеки annimate.css, но вам рекомендую подключать именно animate.min.css, скачанную с github. Так как эта версия меньше весит, а соответственно будет грузиться быстрее. Я поместил ее в папку "css", поэтому получился следующий путь:
<link href="css/animate.css" type="text/css" rel="stylesheet"/>
Теперь необходимо подключить jquery и плагин waypoints, который поможет нам прокручивать анимацию в обе стороны:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/waypoints.min.js"></script>
Как и в видео ниже, предлагаю сделать такую структуру, чтобы три элемента, расположенные друг за другом (в ряд), плавно появлялись с небольшой задержкой, а затем, также плавно исчезали.
Анимация при скролле в обе стороны - html разметка
<div class="box animated boxHidded"><img src="img/1.png"/></div>
<div class="box animated boxHidded delay-05s"><img src="img/2.png"/></div>
<div class="box animated boxHidded delay-1s"><img src="img/3.png"/></div>
.box{
width: 200px;
height: 200px;
margin-left: 50px;
float: left;
}
Для того, чтобы проигрывалась анимация необходимо добавить класс animated. Его свойства прописаны в библиотеке animate.css, которую мы подключили ранее.
Класс boxHidded, нужен для того, чтобы сделать, в начальный момент времени наши иконки полностью прозрачными. Это подразумевает логика нашего скрипта. Ведь иконки, при прокрутке должны плавно появиться, а затем также плавно исчезнуть.
.boxHidded{
visibility: hidden; /* Делаем иконки полностью прозрачными */
}
.fadeInUp, .fadeOutDown{
visibility: visible; /* Делаем иконки полностью не прозрачными */
}
Класс delay-05s и delay-1s отвечает за задержку в проигрывании анимации на 0.5 секунды и 1 секунду соответственно. Давайте рассмотрим свойства, заданные этим классам:
.delay-05s{
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
-o-animation-delay: .5s;
animation-delay: .5s;
}
.delay-1s{
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
На этом работа с таблицей стилей закончена, нам осталось перед закрывающимся тегом body разместить следующий скрипт
<script>
$('.box')
.waypoint( function(dir) {
if ( dir === 'down' )
$(this)
.removeClass('fadeOutDown')
.addClass('fadeInUp');
else
$(this)
.removeClass('fadeInUp')
.addClass('fadeOutDown');
}, {
offset: '80%'
})
.waypoint( function(dir) {
if ( dir === 'down' )
$(this)
.removeClass('fadeInUp')
.addClass('fadeOutDown');
else
$(this)
.removeClass('fadeOutDown')
.addClass('fadeInUp');
}, {
offset: -50
})
</script>
Чтобы изменить момент, в который должна начать проигрываться анимация - изменяйте значение offset. В данном случае задано 80%. Как я понял, это расстояние от верхней точки экрана, до блока, который анимируем.
