Анимация при прокрутке страницы


css анимация при прокруткеЗдравствуйте, дорогие друзья! Долго готовил материал сегодняшней статьи и постарался подать его максимально подробно. Надеюсь после прочтения у вас больше не останется вопросов о том, как делается css анимация при прокрутке страницы.

Сразу хочу предупредить: мы не будем сами писать скрипты или что-то подобное (блог ведь рассчитан на новичков, и нам необходимо, чтобы легко подключалось и безотказно работало).

Сss анимация при прокрутке страницы

Для работы нам понадобится скачать несколько инструментов.

CSS анимация при прокрутке страницы

Размер: 0.48 Мб

В первую очередь – это файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/

То есть процесс добавления анимации элементу начинается с того, что я захожу на данный ресурс и выбираю стиль анимации из предложенных вариантов. (Благо там есть из чего выбрать)

анимация при прокрутке страницы

Далее необходимо подключить таблицу стилей. Для этого копируем файл animate.css в папку с таблицами стилей вашего сайта. У меня – эта папка так и называется «css». А в файле «index.html», между тегами head прописываем:

<link rel="stylesheet" media="all" href="css/animate.css">

Теперь необходимо задать класс элементу, который хотим с анимировать, с соответствующим названием, которое выбрали на предыдущем шаге. То есть стиль bounceInRight, показанный на скриншоте выше – будет являться классом для элемента, который будем анимировать. А также класс animated, для того, чтобы анимация проигрывалась. Надеюсь понятно объяснил? Если нет, то на примере ниже — это предельно просто!

Например:

<div class="logo">
  <img src="images/logo.png" class=" bounceInRight animated " alt="Логотип">
</div>
анимация элементов при прокрутке страницы

Теперь, при обновлении страницы будет проигрываться анимация. Можете попробовать нажав кнопку f5.

Правда круто? Но на этом процесс создания анимации не закончен, ведь нам необходимо сделать так, чтобы проигрывание анимации происходило при прокрутке страницы, а не сразу после ее загрузки!

Для этого нам придется воспользоваться готовым скриптом wow.js. Его необходимо поместить в папку js основного каталога вашего сайта. Я выложил только сжатый вариант, потому что он меньше весит и быстрее грузиться. Полностью ознакомиться с проектом можно здесь.

Итак, для того, чтобы анимация элементов происходила при прокрутке страницы, необходимо в файл index.html, между тегами head добавить следующие 2 строки:

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

А также, классу bounceInRight, вместо animated необходимо добавить wow. Должно получиться следующее:

<div id="logo">
<img src="images/logo.png" class="fadeInRight wow" alt="Логотип">
</div>
анимация элементов при прокрутке страницы

Как видите, первая анимация проигрывается сразу после загрузки страницы, а вторая, только при прокрутке, когда ее видит пользователь. В то время как первую – не заметит, если она расположена не на первом экране.
Можно сделать вывод, что процесс создания такой анимации сводиться к 5 минутам потраченного времени. Все что нужно сделать, это:

  • Дописать 3 строчки кода между отрывающимся и закрывающимся тегом head.
  • Скопировать файл animate.css и wow.min.js в соответствующие папки.
  • Добавить класс wow и класс с названием анимации элементу, который хотим с анимировать

И все, ваш сайт будет смотреться гораздо живее и эффектнее. А в случае продажи – дороже.

Но есть дополнительные инструменты управления анимацией. У каждого элемента можно задать несколько специальных атрибутов для более тонкой настройки:

  • data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
  • data-wow-duration: Изменение длительности анимации;
  • data-wow-delay: Задержка перед стартом анимации;
  • data-wow-iteration: Сколько раз повторять анимацию?

Например так:

<div id="logo">
  <img src="images/logo.png" class="fadeInRight wow" alt="Логотип" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">
</div>

А на сегодня все, до встречи на smartlanding. Оставляйте свои комментарии и задавайте вопросы! Пока!

P.s.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам эту статью

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

  • Александр

    У меня не получилось сделать нормальную анимацию, суть в чем. Анимация есть. Но она происходит сразу после загрузки странички. При скроле анимации нет. Не пойму в чем проблема. Поможете мне?

    Ответить
  • dimadv7

    Привет. WOW не забыл добавить? Скрипт подключился?

    Ответить
  • Mellofon

    Под глубоким впечатлением. Тоже увлекаюсь лендингами, сделал парочку на Adobe Muse — сейчас делаю на joomla.
    Буду применять описанное в этой статье, автору спасибо! Надеюсь не последний раз читаю ваши статьи!

    Ответить
  • Николай

    День добрый! Работаю в web builder, скрипты вставляю между тегами head, все файлы запихиваю в необходимые папки, присваиваю объектам классы — всё, как здесь написано. Но ничего не работает. Абсолютно. Просто ноль. В чем может быть проблема?

    Ответить
  • dimadv7

    Могут пути не правильно к файлам прописанны

    Ответить
  • dimadv7

    Вообще, с билдером не работал никогда.

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

    Такая же проблема с прокруткой. Анимация срабатывает только когда прокручиваешь вверх (листаешь от футера к хеадеру). Вы говорите, что так и должно быть. Но разве идея не в том, что бы сделать анимацию при прокрутке сайта как обычно (т.е. от хеадера вниз к футеру)? установка офсета на теги так же не помогло.. При этом если начинать просматривать сайт, то все элементы, что ниже экрана, сразу отображаются (видимо анимация сразу срабатывает). Я подозреваю, что в вашем скрипте анимация срабатывает на всех элементах, что НИЖЕ офсета. А должно быть наооборот. Но однострочный js, к сожалению, отредактировать не реально :(

    Ответить
  • dimadv7

    Должно быть так, если докрутил до низу и обновил страницу. Тогда при прокрутке вверх будет заново срабатывать анимация. Если у вас срабатывает анимация сразу, то значит сделали что-то не правильно. Можете проверить на примере страницы в блоге или в исходнике. А вообще, попробуйте еще по этой статье сделать

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

    Нет. Проблема в том, что если крутить вниз, то не работает. Только вверх (от конца к началу). Но я решил проблему выставив в css следующую строку:
    body, html {height: 100%;}
    Теперь анимация работает в обе стороны, но это подойдет.

    Ответить
  • тоха

    ты молоток! в чём-то даже монстр!
    грац! удачи

    Ответить
  • Игорь

    Подскажите пожалуйста, почему после добавления анимации на странице появилось пустое пространство снизу и слева? в css прописана строчка body{height: 100% width: 100%} в чем проблема? до добавления страница была ровно по размеру экрана

    Ответить
  • Игорь

    все разобрался, в файле animate css есть строки -webkit-transform значения стоят 2000px, уменьшил до 400px, проблема решилась) автору спасибо!

    Ответить
  • Виктория

    Здравствуйте!
    Вроде бы понятно написано, но у себя в шаблоне не нашла файл index.html. А теги head есть только в файле header. У меня не получается оспроизвести анимацию. Может что-то не так делаю. Заранее спасибо!

    Ответить
  • dimadv7

    Наверное CMS используете. Вставляйте в header. Все будет нормально

    Ответить
  • Виктория

    Еще раз здравствуйте! Добавляю три строчки кода между и . Файлы animated.css и wow.js я загружаю в папку темы вордпресс, которую создала: animate, соответственно прописав другой путь в кодах. По идее должно все работать (анимацию ставлю на картинку как тестовый вариант). Вот этот код я добавляю между тегами head:

    new WOW().init();

    После этого пишу код на странице:

    Картинка на странице появляется, а анимации нет. То есть стоит стационарно. Причем текст перед ней как тестовый стоит, чтобы можно было прокрутить страницу. Заранее спасибо за ответ.
    И такой еще вопрос: если анимацию ставит на текстовый блок, каким образом изменить код, который для картинки: ?

    Ответить
  • Виктория

    img src=»…/winter.png» class=»fadeInRight wow» alt=»winter»/ Вот этот код я добавляю на страницу и картинка стоит стационарно. Код в треугольных скобках

    Ответить
  • dimadv7

    Скиньте адрес страницы, я гляну. Для текста ничего менять не нужно. Все то же самое.

    Ответить
  • Виктория

    Спасибо! Вот адрес страницы. Картинка стоит стационарно. vetbum.ru/?page_id=6951

    Ответить
  • dimadv7

    У вас на странице ничего не подключено, ни animate.css ни wow.min.js. Вы пытались подключить wow.min.js, но ссылка ведет на страницу, а не на скрипт.

    Ответить
  • Виктория

    Разобралась теперь все работает. Чтобы подключить анимацию к сайту WordPress надо помимо загрузки в активную тему двух обозначенных файлов в файл function.php активной темы вставить следующий код:
    //* Enqueue Animate.CSS and WOW.js

    add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );

    function sk_enqueue_scripts() {

    wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.css' );

    wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), », true );

    }

    //* Enqueue script to activate WOW.js

    add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');

    function sk_wow_init_in_footer() {

    add_action( 'print_footer_scripts', 'wow_init' );

    }

    //* Add JavaScript before

    function wow_init() { ?>

    new WOW().init();

    <?php }

    Ничего больше добавлять не нужно. На странице в режиме ТЕКСТ добавить к нужному элементу код, который приведен в этой статье. СПАСИБО АВТОРУ ЗА СТАТЬЮ. Может добавите в нее раздел как добавить анимацию на сайт вордпресс?

    Ответить
  • Екатерина

    В firefox наблюдается баг http://mynameismatthieu.com/WOW/
    обратите внимание на верхнее меню. Как это победить?

    Ответить
  • dimadv7

    А что с ним не так? Не заметил бага.

    Ответить
  • Екатерина

    Вот пример:
    меню: clip2net.com/s/3pzV9kw
    текст: clip2net.com/s/3pzVgzJ
    Такой баг в firefox на винде, версия FF 41, на младших версиях такой же баг.

    Ответить
  • dimadv7

    У меня 41.0.2 версия — и я ничего подобного, как на скриншотах не наблюдаю. Нормально все отображается и выезжает. Даже не знаю в чем может быть причина. Ну хотите, видео запишу? Правда нормально все. Да и должно быть нормально.

    Ответить
  • Екатерина

    Здравствуйте, у меня в конце анимации вылазят какие-то артефакты и исчезают. Что это может быть? Спасибо.

    Ответить
  • Майкл

    Добрый день! На ноутбуке работает все замечательно, а вот на планшете и телефоне есть траблы:
    1. при загрузке страницы она открывается в середине
    2. когда пытаюсь подняться к началу, весь контент сдвигается в лево.
    Буду признателен за помощь

    Ответить
  • dimadv7

    Ну вы уверены, что это именно из-за подключения файла annimate.css у вас страница открывается в середине? Таково быть не может, по идее

    Ответить
  • Наталья

    Спасибо. Благодаря Вам все получилось с первого раза.

    Ответить
  • zaxvatu.net

    Я надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.

    Ответить
  • Вика

    Добрый день!) А меня заинтересовал вопрос о лицензии. Судя по всему для коммерческого проекта надо только покупать за 29 долларов или за 99 долларов для неограниченного использования в комм проектах? Бесплатное использование не прокатит?

    Ответить
  • dimadv7

    Да нет, там же написаны условия использования https://opensource.org/licenses/MIT

    Ответить
  • Вика

    Забыла отметить, что я имела в виду wow, а не animate.css.
    http://prntscr.com/b67z7e
    http://prntscr.com/b67zof

    Ответить
  • dimadv7

    Тогда да, возможно, для использования в коммерческих целях придется приобрести.

    Ответить
  • Mellofon

    Добрый день. Все отлично работает. Но есть одна проблема. При срабатывании анимации, когда элемент выезжает слева или с права, на мобильном устройстве (браузер Chrome) верстка страницы сужается на половину экрана (к примеру это справедливо для bounceInRight).

    Спасибо!

    Ответить
  • Турар

    отдуши благодарю!!!!

    Ответить
  • Саша

    Спасибо огромное! Не думал что это так просто!

    Ответить
  • dimadv7

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

    Ответить
  • Татьяна

    Добрый день! Подскажите, пожалуйста, как в Wow.js сделать такую штуку: если страница перезагружается в проскролленом состоянии, то при скролле вверх анимация не срабатывала и все элементы были статичны. А анимация была только при скролле вниз.
    Не нашла в документации решения этой проблемы :(
    Или подскажите библиотеки типа Wow, в которых это уже реализовано.
    Спасибо.

    Ответить
  • Максим

    А почему контент на который присваиваю класс анимации выводится поверх остального? (меню открывается под элементы с классом анимате)

    Ответить
  • dimadv7

    Наверное, z-index — выше

    Ответить
  • Maksim

    Спасибо! Очень помогло!

    Ответить
  • Stephenlok

    Мужчине, как аналогично обратной области превосходного пола важно быть красиво одновременно стильно в будничной деятельности, тем собственно раскрывая лично персонально вкус и потенциал. Мужская стрижка также бородка — это тренды текущего сезона, и нынешнего сезона, подстрижены усы и волосы вносят легкую брутальность, ну а модная укладка сделает Вас фешенебельным также экстравагантным , потому хочем предложить Вам направить внимательность на разночтении мужских вариантов стрижек и формы усов определенно на специальном сайте модных прически средства для укладки. показанный ресурс посвящен по ухаживанию молодого человека за фейсом, растительностью и щетиной, здесь Вы сможете прочитать всевозможные приемы мужских свежих стрижек соответственно личной образцу лика, отобранные ресурсы касательно уходу также питанию локонов и бородки, познавательные статьи, видео, картинки также ответы парикмахеров , а также об ухаживанием у домодельных обстановке. из нашим порталом читатели скоропостижно установите понравившеюся Вам технику стрижки, получаете выполнимость самостоятельно отпускать щетину и всегда пребывать у тренде стильных мужчинных укладок.

    Ответить
  • Юзя

    Есть проблема данной анимации на мобильных устройствах. То есть при быстром пролистывании видим просто пустые места, текст очень медленно после появляется. При чем задержки нулевые. В общем проблема в не сильно быстрых устройствах. Следовательно как можно определить такие устройства чтобы на них не подключать css и javascript?

    Ответить
  • Ярослав

    ТЫ просто невероятно круто объяснил !!! Успехов тебе !!!

    Ответить
  • КотикЛюбитВискас

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

    Ответить
  • Шаман

    «Для работы нам понадобиТСЯ скачать несколько инструментов.»

    Ответить
  • Мирослава

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

    Ответить
  • Артем

    не работает от прокрутки, анимация происходит до того, как я увидел блок.

    Ответить
  • Артем

    А как отключить на мобильном?
    var wow = new WOW({
    movile: false
    })
    не работает(

    Ответить
  • Артем

    сорри
    mobile: false

    Ответить

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

 

Подписывайтесь на обновления, чтобы ничего не пропустить.