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

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

Похожие публикации

33 комментария

  1. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

    3. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  5. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  6. Дмитрий Давыдов

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

  7. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  8. Дмитрий Давыдов

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

  9. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  10. Дмитрий Давыдов

    интересный пример анимации

    1. Дмитрий Давыдов

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

  11. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

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

  12. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

      Попробуй в 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/ для изображения орла, лошади и прочих элементов.

    1. Дмитрий Давыдов

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

  14. Дмитрий Давыдов

    Вот здесь посмотри __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 дня), как и что правильно взаимосоединить. Прошу вашей помощи или совета.

    Спасибо.

    1. Дмитрий Давыдов

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

  16. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  17. Дмитрий Давыдов

    Статья супер , в видео объяснены принципы работы. Спасибо, как раз нужно реализовать такое на своем сайте. Благодарю

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности