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. С ней все работает отлично. 

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 32

  1. Николай

    А ты не разбираешься в том, как сделать анимацию, на конструкторе?
    Я использую lpgenerator чтобы сократить свое время. Там написано, что можно использовать css.

    • dimadv7

      Нет, с конструкторами не работал особо, тебе нужен ftp доступ, чтобы загрузить скрипт и библиотеку animate.css. Или придется их хранить на чужом сервере, и подключать от туда.

    • fixbob

      «интеграция любого внешнего HTML-кода и скриптов;» — судя по данному заявлению о Lpgenerator — можно вставить и css и jQuerty

    • dimadv7

      Возможно, но многие пишут, что у них не получается. Как я понял, css и javascript можно дописать непосредственно в html, что это не очень благоприятно для сайта, если скрипт объемный.

  2. fixbob

    А что делать если у меня нет (и не надо) соц.сетей? Дайте ссылку почитать

    • dimadv7

      Убрал социальный замок — больше не буду им пользоваться. Мне и самому не нравится. Спасибо!

  3. fixbob

    Вот за это респект!!! Уважение

  4. fixbob

    С меня релевантные ссылки на сайт

    • dimadv7

      Спасибо и тебе)

  5. Игорь

    Где скачать исходник ЭТОГО УРОКА, тот что на этой странице исходник прошлого урока.

    • dimadv7

      Действительно, спасибо. На днях чистил блог от rar архивов, и случайно удалил. На днях сделаю и исправлю. Пока удаляю ссылку.

  6. Санжар

    Пожалуйста выложите архив урока. Никак не получается повторить урок. Спасибо!

  7. Masteriza

    Добрый день…
    С момента написания статьи скорее всего все работало, сейчас же я столкнулась с проблемой TypeError: $(…).waypoint is not a function… Помогите, решить проблему. Спс.

    • dimadv7

      Добрый вечер. Действительно, плагин Waypoint обновился до версии 3.0 и похоже, что изменения оказались кардинальными. Я особо не следил за проектом, поэтому был не в курсе. Спасибо!!! Выложил исходник с Waypoint 2.0. Теперь все работает 🙂 Еще раз спасибо.

  8. masteriza

    Если у Вас будет возможность и желание переделать урок под версию 3.хх было бы супер)

  9. Илья

    Дмитрий, а как вам уроки по html+css от Охрименко — youtube.com/playlist?list=PLvItDmb0sZw9cJossgyJepu6N9hybEjKU

    • dimadv7

      По html, css — не знаю, а по js хорошие 🙂 Я только по js смотрел, хотя и немного скучновато.

  10. Михаил

    • dimadv7

      Да. Уже попадался когда-то. И не сложный совсем)

  11. Павел

    Все в точности повторил, не работает. Скачал исходники то же не работает. У тебя самого хоть работало?))

    • Катя

      Руки нужно из ж…ы повытаскивать, а исходник тестировать на сервере. После этих болезненных процедур радоваться, что стал лучше, а не писать что, что-то не работает. Вот бесят такие люди, которым лень потратить 10 минут и разобраться, но б….ь пишут везде, что у них не работает. Дмитрий, как ты их терпишь?

    • dimadv7

      Возьми и закинь на сервер, а потом скажешь мне сам, работает или нет… Сейчас проверил — все отлично.

      Р.S. Катя, ну ты чего? Не обижай мальчика, у него все получится)))

  12. Кирилл

    Всё классно! Всё замечательно! Но есть одно НО. При работе этой анимации появляется горизонтальная прокрутка (ширина становится в два раза больше изначальной ширины окна). Попробовал сам поковыряться и исправить это — доковырял до того, что перестало работать совсем))) вернул всё назад, теперь прошу вашей помощи!)

    • Кирилл

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

    • dimadv7

      Попробуй в animate.css изменить эти значения

       @keyframes bounceInRight {
        0% {
          opacity: 0;
          -webkit-transform: translateX(2000px);
          -ms-transform: translateX(2000px);
          transform: translateX(2000px);
        }
      

      Выстави не 2000px а меньше, если используешь bounceInRight, например. То есть измени стартовое положение.

  13. Артем

    Добрый день!

    Подскажите, пожалуйста, как реализовать на сайте механизм появления
    элемента при прокрутке экрана — элемент движется по горизонтальной оси
    (с права налево, или наоборот), в зависимости от прокрутки экрана вверх
    или вниз, при этом используется стиль visibility. Данный механизм
    реализован на сайте: __http://mhmgroup.ae/ для изображения орла, лошади и прочих элементов.

    • dimadv7

      Например так: __http://scrollme.nckprsn.com/. Их десятки разных плагинов.

  14. fixbob

    Вот здесь посмотри __http://markdalgleish.com/projects/stellar.js/

  15. Артем

    Добрый день, dimadv7! Спасибо большое, это то, что было нужно! С вашего позволения спрошу еще один совет: я пытаюсь сделать, чтобы данный скрипт заработал на изображение, которому я присвоил id — solo.
    Для этого я скачал архив с плагином, расположенный в нем файл jquery.scrollme.js я разместил в папке /js/ на сервере (сайт создается на wordpress). Затем прописал в файле functions.php следующий код для исполнения:
    add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_script( 'jquery.scrollme',
    get_template_directory_uri() . '/js/jquery.scrollme.js',
    array ( 'jquery' ),
    true
    );
    });
    Далее в файле footer.php я прописал следующий код:

    <div
    id="#solo"
    data-when="enter"
    data-from="0.5"
    data-to="0"
    data-opacity="0"
    data-translatex="-200"
    data-rotatez="90"

    Все вышеперечисленный действия никак не повлияли на анимацию изображения. Сайт я делаю для себя, по урокам в интернете, но по данному моменту мне с трудом удается найти правильное решение (пытаюсь уже 4 дня), как и что правильно взаимосоединить. Прошу вашей помощи или совета.

    Спасибо.

    • dimadv7

      Ух, я совсем не в курсе как это сделать на wp при помощи function.php

  16. Олег

    Подскажите как сделать чтобы анимация применялась например на КАЖДЫЙ заголовок

    • Олег

      Разобрался, функция each

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