CSS анимация при скролле в обе стороны

Всем привет. Кто-то из вас, уже читал статью о том, как сделать 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 пикселей анимированого контента. Попробуйте! На примере вы все поймете.

Рекомендую вам посмотреть видео. В нем автор более подробно объяснит все тонкости реализации данного метода.

А на сегодня - все. Надеюсь данная статья была вам полезна и создание лендинг пейдж превратиться в удовольствие :) Пока!

Скачать исходник

P.s. Waypoint обновился до версии 3.0, поэтому качать с Github смысла нет. Я не вникал, но похоже изменения оказались настолько кардинальными, что данный скрип не работает корректно с новой версией. Поэтому в исходнике лежит версия 2.0. С ней все работает отлично. 

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