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

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

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

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

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

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

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

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

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

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

ШАГ 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>

Подробная видеоинструкция:

Понравилась статья? Поделись с друзьями:

Понравилась статья? Поделись с друзьями:


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

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

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

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

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

      + никакого jQuery.

    • Александр:

      Да, будет!

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

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

      • xxx:

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

  2. Светлана:

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

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

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

  4. Madest:

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

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

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

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

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

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

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

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

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

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

          .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. Ник:

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

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

  9. NaIra:

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

  10. Алексей:

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

  11. Юзя:

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

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

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

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

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

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

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

  12. Александр:

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

    • Александр:

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

  13. Виталий:

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

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

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

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

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

  14. Вася:

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Есть вопросы?