Кто-то из вас, уже читал статью о том, как сделать css анимацию при прокрутке страницы. Многим этот материал понравился, но дело в том, что анимация проигрывалась только при прокрутке вниз. Многим, как и мне, хотелось, чтобы эта анимация проигрывалась при скролле как вниз, так и вверх. Например, при скролле вниз, какой-нибудь элемент плавно появлялся, а при дальнейшей прокрутке, точно также плавно исчезал. И в обратную сторону все происходило таким же образом.
Я уже говорил, что плохо знаю javascript (в процессе изучения), и самому реализовать данный функционал мне не удалось. Но к счастью я нашел готовое решение на другом сайте. Придумал его Артем Анашев, один из авторов на блоге loftblog.ru. Там материал, по этой теме, представлен исключительно в видеоформате, я же попробую описать все в текстовом и выложить свой исходинк. Если вам удобнее смотреть именно видеоматериал, то в конце статьи можете ознакомиться с оригиналом.
Как и в прошлый раз скачиваем и подключаем библиотеку animate.css, там же можно подбирать тип анимации в удобном визуальном исполнении.
В данной статье я буду использовать не оптимизированную версию библиотеки 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/jquery.waypoints.js"></script>
Waypoints вы можете скачать по этой ссылке или взять из исходника (как и другие файлы, необходимые для реализации данного эффекта).
Как и в видео ниже, предлагаю сделать такую структуру, чтобы три элемента, расположенные друг за другом (в ряд), плавно появлялись с небольшой задержкой, а затем, также плавно исчезали. Я создал небольшой макет с крупными иконками, которые и будут анимироваться:
Внимание! Тестировать эффект необходимо на локальном или внешнем сервере. В противном случае анимация не будет проигрываться.
Анимация при скролле в обе стороны – 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“, в котором буду хранить свои изображения.
.box{
width: 200px;
height: 200px;
margin-left: 50px;
float: left;
}
Здесь нет ничего особенного, просто задаю ширину и высоту области, в которой буду хранить иконки. Делаю отступ слева 50px и выравниваю по левому краю. Этот блок сугубо индивидуален и можете не обращать на него внимание. Просто под мой макет лучше всего подходили именно эти параметры. Идем дальше.
Для того, чтобы проигрывалась анимация необходимо добавить класс 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>
Обратите внимание на строки:
.removeClass('fadeOutDown')
.addClass('fadeInUp');
В них мы добавляем и удаляем классы, отвечающие за стили анимации, которые будут проигрываться при прокрутке. В данном случае fadeInUp и fadeOutDown. Вы можете выбрать любые виды анимации, представленные на официальной страничке библиотеки animate.css.
Чтобы изменить момент, в который должна начать проигрываться анимация – изменяйте значение offset. В данном случае задано 80%. Как я понял, это расстояние от верхней точки экрана, до блока, который анимируем.
Меня несколько раз спрашивали о том, есть ли возможность задать расстояние до старта анимации в процентах, так как мониторы у всех разные. В прошлом варианте исполнения данного эффекта не было возможности сделать этого в процентах. Из-за этого возникали определенные проблемы.
В данном случае – эта проблема решена. Первый offset отвечает за старт анимации. А второй за исчезновение блоков. То есть, когда становится не видно 50 пикселей анимированого контента. Попробуйте! На примере вы все поймете.
Рекомендую вам посмотреть видео. В нем автор более подробно объяснит все тонкости реализации данного метода.
А на сегодня – все.
Источник