SergeyChunkevich.com

Анимация элемента при скроллинге | Комбинация animate.css и wow.js

Published · Updated

Анимация элемента при скроллинге | Комбинация animate.css и wow.js

Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery. Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...

С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.

Анимация при скроллинге: комбинация
«WOW.js» и «Animate.css»
на WordPress...

RuBizPanel 2.0 - Скрытая эффектная ниндзя CSS3 панель для блоггера, инфобизнесмена и инфомаркетера.

RuBizScrollToID - Установи секретный якорь для модального окна

* чтобы повторить анимацию, перезагрузите страницу.

Как настроить?

ШАГ 1
Для начала скачайте эти два файла («WOW.js» и «Animate.css»)

СКАЧАТЬ «WOW.js» и «Animate.css»

ОБНОВЛЕНО (25.июль.2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2

ШАГ 2
Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).

ШАГ 3
Помещаем в <head></head> эту строку:

<link rel="stylesheet" type="text/css" href="wow-animation/animate.min.css">

* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл — скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂

ШАГ 4
Помещаем в самый низ страницы перед </body> эти строки:

<script src="wow-animation/wow.min.js"></script>
<script>
    new WOW().init();
</script>

* Тоже укажите правильный путь к файлу и проверьте в браузере.

ШАГ 5
Добавляем два класса для любого элемента, где:
класс wow — подключение элемента к скрипту;
класс fadeInRight — определенный стиль для анимации элемента.
Часто используют: fadeInRight (Left/Up/Down) и bounceInRight (Left/Up/Down)
Все стили Вы можете посмотреть здесь: Animate.css: Примеры анимаций

<div class="wow fadeInRight">
    Определенная информация
</div>

ШАГ 6
Продвинутые настройки. Добавляем функции:
data-wow-duration: Меняем продолжительность анимации;
data-wow-delay: Задержка перед началом анимации;
data-wow-offset: Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration: Повторяем анимацию «столько-то раз».

<div class="wow slideInLeft" data-wow-duration="3.5s" data-wow-delay="1s" data-wow-offset="120">
    Определенная информация
</div>

<!-- Вы можете использовать ЛЮБОЙ тег, как пример: -->

<h1 class="wow slideInLeft" data-wow-duration="3.5s" data-wow-delay="1s" data-wow-offset="120">
    Определенная информация
</h1>
Подробная видеоинструкция:
Поделиться или сохранить:
8
Поделились

Также интересно...

35 комментариев

  1. blank Марат:
    15.10.2015 в

    Будет ли такая анимация сказываться на скорости загрузке сайта?

    Ответить
    • blank Сергей Чункевич:
      15.10.2015 в

      Марат, сами проверьте у меня 🙂

      Сам скрипт — «пушинка», да и стили для анимации тоже ОЧЕНЬ легкие.

      + никакого jQuery.

      Ответить
    • blank Александр:
      30.08.2016 в

      Да, будет!

      В такой конфигурации загрузки скрипта wow.min.js -пока не загрузится скрипт, вся страница не отрендерится и как минимум пользователю обеспечено моргание элементов, предназначенных для анимирования на экране. А учитывая, что нам советуют ставить сам скрипт в конец документа и туда же его инициализацию, отрисовка страницы в лучшем случае произойдет через 2-3 секунды...

      Почитайте инфу по теме «неблокирующая загрузка скриптов».

      Ответить
      • blank xxx:
        05.07.2017 в

        вообще я использовал этот скрипт в карточке товара все бешено лагать стало=((

        Ответить
  2. blank Светлана:
    15.10.2015 в

    Крутая штука. Все понятно расписано, особенно после видео поняла как классы ставить.

    Одно но — папочки не качаются. Страничка обновляется и усё...

    Ответить
  3. blank Сергей:
    16.10.2015 в

    На самом деле подобная анимация оживит сайт. Хорошо, что имеется много настроек, которые внесут разнообразие. Спасибо за видео — с его помощью легче разобраться что и как надо делать.

    Ответить
  4. blank Madest:
    16.11.2015 в

    Спасибо большое. Помогло

    Ответить
  5. blank Тимофей:
    28.12.2015 в

    Спасибо большое! Долго искал подобное, у ВАС чётко и понятно, прям для меня, первоклассника

    Ответить
  6. blank Марк:
    11.01.2016 в

    Супер Сергей! А подскажите, как реализовать двухстороннюю анимацию к центру слева и справа, как у вас на картинках с коробками курсов выше?

    Ответить
    • blank Сергей Чункевич:
      11.01.2016 в

      Привет, Марк!

      Для левого элемента указываем «slideInLeft»,

      а для правого «slideInRight».

      И все по инструкции.

      Ответить
      • blank Марк Тимофеев:
        11.01.2016 в

        Я так и делаю, мне нужно вот что, Чтобы это реализовалось в Одну Строчку, а так как я пробую, выходит первый элемент скажем справа, а следующий слева, Но ПОД первым. Меня интересует в ОДНУ строчку, так, чтобы они Состыковались в одну строчку Надеюсь поняли меня)

        Ответить
        • blank Сергей Чункевич:
          12.01.2016 в

          Тут есть несколько решений...

          Самое обычное, это прописать такие свойства для этих двух элементов:

          .element1, .element2 {
    float: left;
    width: 50%;
    display: inline;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

          Можно для первого указать float: left;, а для второго float: right;

          Если у элементов есть рамки, или просто хотите отступ между элементами, то с 50% уменьшаем до 48.5%, но тогда для второго точно указываем float: right;. Хотя, все можно решить простыми (padding) отступами внутри элемента.

          Проценты относятся к адаптивному дизайну. Ведь можно и указать точные размеры в пикселях.

          Главное, чтобы ширина двух элементов в сумме не превышала ширину элемента в котором они находятся.

          Если все еще второй элемент под первым, то регулируйте проценты.

          А сразу после этих двух элементов в HTML ставим эту стоку:

          <div style="clear: both;"></div>

          Есть еще вариант clearfix, но и это тоже пойдет.

          ПРИМЕР:

          <div class="module1">
    <div class="element1 wow slideInLeft">...</div>
    <div class="element2 wow slideInRight">...</div>
</div>

<div style="clear: both;"></div>

  7. blank Ник:
    02.02.2016 в

    Сергей, подскажите пожалуйста, и конечно у себя на сайте тоже создайте пример, будет полезно всем, как заставить данную анимацию повторять циклы... Например в слайдере. В слайдере анимация отлично работает, но только один цикл, и все! Пробовал вставлять animation-direction: infinite; куда только можно, и в классы, и в дивы, и в css, и все без толку... Информация всюду разная и не полная и противоречащая, к тому же данная функция animation везде прописывается по разному! Может я что не так делаю? Буду Вам признателен, если подскажете на том же примере, что Вы делали выше, так как все классы и дивы прописаны в таком же варианте! Заранее благодарен, с уважением!

    Ответить
  8. blank andrgame.net:
    21.02.2016 в

    jQuery плагин нашей разработки. При прокрутке страницы позволяет зафиксировать блок в сайдбаре . Подходит для адаптивных сайтов. При перестраивании контента, когда колонка «прыгает» под основной контент, липкий эффект отключается.

    Ответить
  9. blank NaIra:
    01.07.2016 в

    Большое спасибо! Все отлично получилось. Информация изложена очень доступно и понятно.

    Ответить
  10. blank Алексей:
    11.07.2016 в

    Как подружить плагины WOW.js и jquery.fullPage.js? По отдельности все работает, вместе подключить — пропадает анимация WOW.js. Пробовал решение из зарубежных форумов — не помогло. Может кто-нибудь сталкивался с подобным?

    Ответить
  11. blank Юзя:
    02.11.2016 в

    Есть проблема данной анимации на мобильных устройствах. То есть при быстром пролистывании видим просто пустые места!!! Чтобы анимация активировалась, надо в мобильном устройстве остановиться на таком пустом месте и только после она активируется и начинает выполняться. А так при быстром пролистывании видим просто пустые места в сайте, жуть...

    Как решение, вижу просто отключать ее на мобильных/медленных устройствах. Но тут не знаю как определять такие устройства (чтобы им просто отключить подключение css и javascript). Надеюсь подскажете решение. Спасибо.

    Ответить
    • blank Сергей Чункевич:
      02.11.2016 в

      Здравствуйте! По сути, тут нет проблемы, поскольку я замечал такое же у самого Google Plus, когда быстро скролил наверх на iPhone-е. Но это длилось буквально 0.2-0.5 сек. (У него тоже анимация снизу вверх, но сейчас не знаю...кто его вообще использует? :))

      Вы еще порегулируйте секунды в параметре задержки (data-wow-delay="1s") — поставьте 0.2 сек., что значит срабатывать будет чуть ли не сразу.

      Все еще зависит от скорости и-нета, а также тяжелых картинок на сайте, которые не дают сайту быстрее грузиться. Ведь есть еще скрипты, которые подгружают картинки только тогда, когда скролишь наверх и они оказываются на видимой части окна браузера — это практикуют тяжелые сайты (порталы и т.д. ) Оптимизируйте ВСЕ (JPG и PNG) картинки тут: tinyjpg.com — ускорит загрузку сайта чуть ли не в 2, а то и в 3-4 раза.

      Да и кто вообще так быстро скролит?

      P.S. Попробуйте еще поместить скрипт вверх страницы, чтобы вначале скрипт загрузился, а потом все остальное,

      Ответить
  12. blank Александр:
    11.01.2017 в

    Как вообще подружить jquery и этот wow.js. В firefox все нормально, а вот в яндекс браузере при скроле колесиком мыши элементы предполагаемые для анимации не появляются вовсе. Если отключить jquery то тогда все нормально и анимация работает правильно. Но jquery я не могу с сайта убрать, что делать?

    Ответить
    • blank Александр:
      11.01.2017 в

      Оказалось что проблема связана не с jquery а конкретно с плагином Select2 Bootstrap 3 CSS, отвечающим за стилизацию элемента select.

      Ответить
  13. blank Виталий:
    22.01.2017 в

    Подскажите. Можно ли использовать wow.js на продающих landing page? Я видел на офф. сайте что нужна лицензия.

    Ответить
    • blank Сергей Чункевич:
      22.01.2017 в

      Оппа! Точно, они сделали продукт платным 🙂 $29 за персон.лиц.

      Хмм... Используйте эту версию, что в архиве, а если докопаются (что мало вероятно), то ссылайтесь на то, что Вы используете еще ту версию, которая была доступна в бесплатном варианте, и не знали, что продукт стал платным 🙂

      Исходя из моральных принципов, так делать нельзя, но и неожиданно делать бесплатный продукт платным — это тоже некоторого рода наглость. Хотя, с другой стороны даже неплохой маркетинг, ведь пользователей бесплатной версии данного скрипта очень много.

      Ответить
    • blank Сергей Чункевич:
      22.01.2017 в

      И еще, для Вашего лендинга рекомендую один из своих проектов: sergeychunkevich.com/usta...rubizscrolltoid/

      Ответить
  14. blank Вася:
    05.09.2017 в

    На деле не все так работает как описано. Все картинки подгружаются сразу а уже потом выводятся со стилями разными . Это бесполезная вещь.

    Ответить
  15. blank Семен:
    23.01.2018 в

    Доброго времени суток.

    Столкнулся с проблемой что если есть закрепленный анимированый блок он уходит за обычные анимированые блоки

    И хотелось бы узнать, можно ли это как нибудь исправить

    Ответить
    • blank Сергей Чункевич:
      23.01.2018 в

      Если я правильно понял, то вы хотите определенный аним.блок выставить на передний план?

      В таком случае, этому блоку нужно дописать два свойства:

      position: relative; /* или absolute */
z-index: 2; /* или число по больше, например 9999 */

      Ответить
  16. blank Петр:
    20.10.2019 в

    Спасибо, пригодится

    Ответить
  17. blank Юлия:
    21.11.2019 в

    Папки скачала, но wow-animation папки нет(Есть куча других. Все закачивать?

    Ответить
    • blank SergeyChunkevich.com:
      22.11.2019 в

      Здравствуйте, Юлия!

      Если Вы нажали на красную кнопку «скачать «WOW.js» и «Animate.css»» выше, то скачать Вам получилось бы только ZIP файл, в котором и есть папка «wow-animation».

      О какой «куче» других папок идет речь?

      Ответить
  18. blank Юлия:
    22.11.2019 в

    Получилось скачать с телефона. С ноута не скачивалось таким образом. Спасибо.

    Ответить
  19. blank Алек:
    08.06.2020 в

    Всё отлично получилось, спасибо Вам БААААЛЬШОЕ!

    Ответить
  20. blank Татьяна:
    30.06.2020 в

    Огромное спасибо за помощь! А видео настоящий ОГОНЬ! Самое доступное объяснение.

    Очень нужные пояснения!

    Ответить
  21. blank Lora:
    02.07.2021 в

    Как установить точку начала анимации не от края окна браузера?

    например 1920 экран

    по центру 1000 контейнер

    и вот чтобы анамация начиналась от левого края этой 1000

    Ответить

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

Ваш адрес email не будет опубликован.