Smartlanding

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


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

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

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

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

Скачать исходник

В первую очередь – это файл 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.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам эту статью

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

161 комментарий

  • Елена

    Да и не только для лохов, вообще для всех))) извините, поняла, что могло прозвучать грубо…. ничего такого не имела в виду))))

    Ответить
  • dimadv7

    Здравствуйте. Я думаю вы наговариваете на себя :) И от того, что у вас файл index.php — суть не меняется. Все тоже самое!

    Ответить
  • Елена

    хм….ну мой файл индекс.пхп выглядит так:

    render('theme');

    некуда тут добавлять вышеуказанные строчки…))

    Ответить
  • Елена

    что=то не хочет код вставляться((( ладно, буду разбираться)

    Ответить
  • dimadv7

    У вас CMS — какая?

    Ответить
  • dimadv7

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

    Ответить
  • Fargal

    А скажите пожалуйста, каким образом можно изменить начальные и финальные координаты анимации ? Вот чтоб допустим она выезжала не к центру, а скажем в 200px от правого края экрана ну или что-то подобное. Как изменить позиционирование анимации в принципе? Как быть, если я хочу, чтобы она была ниже, выше или выезжала не из-за края экрана? Заранее спасибо )

    Ответить
  • dimadv7

    Ну это же готовая библиотека. Черный ящик с готовыми анимациями. Если вы хотите самостоятельно отредактировать анимацию, то нужно открыть файл animate.css, найти стили схожей с вашими потребностями анимации и подправить их.

    Ответить
  • Fargal

    Ну вот дело в том, что я уже там все, что можно пробовал изменять, в animate.css. Ничего не изменяется. Причем без комментариев, очень сложно понять, что именно выполняет данная строка кода. Вы могли бы фрагмент css, там где идет класс .bounceInRight выложить на pastebein там. Просто самому очень сложно разобраться.

    Ответить
  • dimadv7
       @keyframes bounceInRight {
      0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);
      }
    
      60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
      }
    
      80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
      }
    
      100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
      }
    }
    

    transform: translate перемещает элемент на указанное количество px влево и вниз при положительных значениях.
    opacity — прозрачность.
    Суть: добавляем прозрачность, и перемещаем элемент на определенное расстояние.

    Ты раньше спрашивал о позиционировании анимации. Ты не саму анимацию позицианируй, а элемент позиционируй, помести его в нужное место, а потом добавь ему анимацию.

    Ответить
  • Fargal

    Примерно понял, спасибо )

    Ответить
  • Сергей

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

    Ответить
  • Сергей

    А, все решено)) data-wow-offset=»1000" помогло))

    Ответить
  • Igor

    Отличный блог! Однозначно в закладки!

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

    Привет. Поможете?
    У меня есть DIV(Навигация) который прилипает к верхнему краю браузера. И я реализовал эту анимацию, всё хорошо.
    Но если слишком быстро крутить то во время анимации, анимированная картинка перекрывает DIV(навигации).
    Как сделать так что бы анимации проходила под определенным DIV?

    (п.с. на этой странице тоже видно эту фичу когда лого пролетает над кнопками «Поддержать»

    Ответить
  • dimadv7

    Привет. Задай divу z-index максимальный, который есть на странице. То есть z-index у дива с навигацией должен быть больше, чем у остальных, если он есть.

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

    Спасибо, так и сделал.

    Ответить
  • Михаил

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

    Ответить
  • Михаил

    А как поступить если элементу уже присвоен другой class, а его хочется сделать еще и анимированным?

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

    Я не знаю как это называется но вот как

    DIV class=»test» для такой записи в класс css начинается с точки .test {описание}
    Я просто меняю css c .test{} на test{} и в html пишу

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

    Я просто меняю css c .test{} на test{} и в html пишу вместо (div class=test) (test class=animation)(/test)

    Ответить
  • Михаил

    Не совсем понял, но попробую разобраться и поэкспериментировать. А еще такой вопрос появлился. Как сделать анимацию циклической, но с паузами. Допустим я анимировал классом «shake», сделал повторение 1000 раз, но хочу чтобы он не непрерывно анимировался, а периодически, с задержкой, например, в 1-2 секунды.

    Ответить
  • Михаил

    Все понял. Попробовал, и оказалось, что все гораздо проще, чем я думал. Не надо никакой огород городить. Просто через пробел к любому классу можно добавить дополнительные. То есть, например, к классу «blk blk_text» можно добавить «blk blk_text rotateIn wow» и он станет анимированным.

    Ответить
  • dimadv7

    Все верно, просто через пробел дописывай нужные классы)))

    Ответить
  • Виталий

    Добрый вечер! Возможно ли применение данного инструмента на страницах сделанных на платформах, например на Wix? Как подключить таблицу стилей, где ее найти? Спасибо?

    Ответить
  • Михаил

    И всё таки интересно, как зациклить анимацию, но с паузами?

    Ответить
  • dimadv7

    Никогда не работал с Wix, но, думаю, конечно же можно)

    Ответить
  • dimadv7

    Не знаю, наверное при помощи javascript можно как-то, но я не знаю, как, не разбирался в этом вопросе

    Ответить
  • Андрей

    Здравствуйте, Дмитрий! У меня не получается скачать файл wow.js так как ссылка не работает. Буду признателен, если выложите этот файл или отправите на почту. Спасибо!

    Ответить
  • Андрей

    Прошу прощения, уже нашел :) Было бы удобно если скачать файл wow.js можно было нажав на него в статье. Спасибо! Классный сайт! Вы мне очень помогли.

    Ответить
  • dimadv7

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

    Ответить
  • DOGICA

    СПАСИБО!!!!!!!!!!!!!!!!!!!!!! =)
    вопрос только один —
    КАК ПРИМЕНИТЬ ЭТУ АНИМАЦИЮ СРАЗУ КО ВСЕМ КАРТИНКАМ НА СТРАНИЧКЕ, НЕ ПРОПИСЫВАЯ К КАЖДОЙ КАРТИНКЕ КЛАСС..
    Знаю что возможно одним махом через CSS
    Спасибо за ваше время!

    Кай
    http://www.dogica.com

    Ответить
  • dimadv7

    Здравствуйте, ну да. можно, только мы же пользуемся css библиотекой, которая предусматривает наличие у элементов определенных классов. Таким образом лучше прописать картинкам соответствующие классы. Или при помощи javascript добавить всем картинкам нужный. А через css никак, или только переопределять имена классов фреймворка на твои, но это чушь)

    Ответить
  • DOGICA

    У меня около 500 картинок на каждой страничке.. страничек около 70.. просто нереально физически столько времени убить на прописывание каждой из них класса =((

    «Или при помощи javascript добавить всем картинкам нужный.»
    есть вариант?

    Ответить
  • dimadv7

    Если у картинок есть общий класс,например, box, то можно так:

    <script>
         $('.box') .addClass('annimated fadeInup')
    </script>
    
    Ответить
  • DOGICA

    «Если у картинок есть общий класс,например, box, то можно так:»
    да есть.. но как так? : )

    Ответить
  • dimadv7

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

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

    не все браузеры поддерживают -webkit-animate..
    в том числе IE и Opera

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

    вот здесь поподробней описано _http://xiper.net/learn/css/css-animation/css3-animation-1

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

    Дмитрий, спасибо Вам большое за блог! Очень просто и понятно поясняете!
    Много у Вас подчерпнул знаний!
    Скажиет, касательно wow.js , не появилось информации, можно ли задать data-wow-offset: в процентах?

    Ответить
  • dimadv7

    Опера — давно webkit. А ты проверь, во всех ли сейчас работает код или нет. Я вот утверждаю, что во всех современных браузерах данный способ реализации анимации, — хорошо работает. Да есть огрехи с прорисовкой, но в целом — норм :) Там же не только webkit префиксы, да и они, наверное, для современных версий уже и не нужны

    Ответить
  • dimadv7

    И Вам спасибо, что читаете. Можем на «ты», а то не привычно )) К сожалению, на официальной странички проекта об этом ни слова. Он похоже и не обновлялся ((

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

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

    Ответить
  • dimadv7

    Это правильно. Потом как справочник можно использовать, чтобы не держать все в голове. Да и пока статью пишешь здорово разбираешься в теме. И для того, чтобы писать что-то новое, всегда нужно изучать новый материал, а это и сеть развитие. Все время приходится в чем-то разбираться, чтобы написать хорошую, качественную статью. Это и была одной из причин создания этого блога. У меня препод в универе так и говорил: «Пока других научишь и сам поймешь :)» Так что, удачи тебе. Это хорошее дело.

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

    Здравствуйте! У меня возникла проблема со срабатыванием анимации, аналогично с комментарием 5. Срабатывает одновременно, если отмотать вниз страницы и обновить, анимации будут срабатывать по мере прокрутки страницы вверх. Попробовал, как Вы посоветовали, отключить другие скрипты — ситуация не изменилась, то же самое сохраняется даже на чистой, специально для этого созданной, странице. Подскажите, пожалуйста, как эту проблему решить. Все равно ничего полезнее Вашего блога я на просторах рунета по заданной теме не нашел.

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

    data-wow-offset=»1000" — не помогло, то же самое

    Ответить
  • dimadv7

    Здравствуйте. Я правда не знаю чем вам помочь, ну наверное же так и должно быть, анимация срабатывает, когда расстояние равняется заданному в data-wow-offset. Если нужно чтоб срабатывало только один раз, даже при перезагрузки, это наверное нужно запоминать сессию или в cokies. А вообще, можно сделать проигрывание анимации при прокрутке в обе стороны, мол так и должно быть. Вот статья на эту тему: https://smartlanding.biz/css-animaciya-pri-skrolle-v-obe-storony.html

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

    Между прочим, у Вас классные иконки при публикации сообщений!

    Ответить
  • Владимир

    Подключил css и js, у видимых section происходит анимация, а у тех что за пределами экрана нет, и когда скроллю — у них не меняется их : visibility: hidden; animation-name: none; -webkit-animation-name: none;
    Ставил и убирал класс animate, дописывал data- — толку ноль. Подскажите пожалуйста, в чём может быть дело?

    Ответить
  • dimadv7

    Ну wow не забыли же указать в классе?

    Ответить

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