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

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

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

  • Глеб

    Все еще проще чем я думал)

    Ответить
  • dimadv7

    Как есть, рад что смог помочь_))

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

    Спасибо, очень пригодилось, так как надоело постоянно с JS возится!

    Ответить
  • dimadv7

    Рад помочь :)

    Ответить
  • tr0nik

    ну афигеть) как я рад что нашел Ваш сайт)

    Ответить
  • dimadv7

    Спасибо за теплые слова. Это вдохновляет!

    Ответить
  • Денис

    Спасибо большое помогли, а как присоеденить две анимации к одному объекту?

    Ответить
  • dimadv7

    Здравствуйте, рад помочь. Честно говоря, я не уверен что сработает, но можно попробовать задать два класса анимации. Один непосредственно объекту, а второй его обертке. И время (задержку) выставит так, чтоб друг за другом выполнялось. Но это велосипед получается. Попробуйте, если получиться отпишите пожалуйста, буду вам очень признателен :)

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

    У меня странный баг: Когда успользую class=» … wow» анимация срабатывает только если не опускаться вниз по странице, а подниматься. Что это может быть?

    Ответить
  • dimadv7

    Не совсем понял вопрос. У вас анимация срабатывает только при прокрутке страницы вниз? Если да, то так и должно быть. Это не баг :) Возможно в будущем напишу статью о том, как сделать так, чтобы анимация проигрывалась в обе стороны. Но нужно javascript подучить.

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

    все верно написал ;) transformation.webhitecture.com Первый блок срабатывает всегда, так задумано. Но второй и третий блоки не срабатывают. Если опустится до футера и обновить страницу там, а потом начать подниматься, то анимация срабатывает по мере подъема, а не спуска ))))

    Ответить
  • dimadv7

    Может с каким-то другим скриптом конфликтует? У вас просто jquery несколько раз подключается и другие. Это часто приводит к ошибкам. Попробуйте отключить по очереди и выяснить в чем причина.

    Ответить
  • Денис

    Слушай, я себе всю голову сломал как можно сделать такой счётчик как здесь (3-слой) studiya.winlanding.ru/
    Буду очень благодарен!!!

    Ответить
  • dimadv7

    В смысле, а что необычного в этом счетчике? Перезапускается каждые сутки? Вот я писал статью на эту тему

    Ответить
  • Денис

    Не, то. Мне нужен счетчик прямого отсчета. Посмотри на сайте который я скидывал выше. Там циферки считаются типо установленных окон.

    Ответить
  • dimadv7

    Я просто сразу не туда глянул (На таймер посмотрел). Нет, к сожалению не в курсе как такое сделать. Но вот посмотри habrahabr.ru/post/208274/ Тоже нужно будет разобраться и статью написать)

    Ответить
  • Dmitry

    Первый раз вставил данные эффекты при прокрутке на сайт с joomla, все работает шикарно! Спасибо!
    Но при устнаовке на статичный сайт на голом html анимация происходит вся сразу без прокрутки, подулючал все так же, библиотека подключена, вчем может быть дело ума не приложу… помогите пожалуйста. obedserp.ru

    Ответить
  • dimadv7

    Привет. Как раз на голом html и должно работать правильно. Как в прочем и есть у тебя на сайте. Конечно, у тебя все происходит сразу, так как ты и написал. Нужно же задать расстояние до конца экрана. То есть количество пикселей до старта анимации. Я же писал об этом в статье. data-wow-offset=»100". Где 100 — это количество пикселей от конца экрана для старта анимации.

    Ответить
  • Dmitry

    Моя невнимательность… огромное спасибо!!! С удовольствием подписался на все ваши ресурсы.
    Только вот возник все же один вопрос, значение устанавливается в пикселях, но ведь у всех разные разрешения экрана, можно ли установить в процентах?

    Ответить
  • dimadv7

    Да не за что!Не знаю, может быть если скрипт переписать, то можно и в процентах, но я не настолько селен в этом. Вообще, конечно, было бы удобно. Но не знаю как это реализовать!

    Ответить
  • lonyiozdi

    Привет! Классно.

    Ответить
  • dimadv7

    Привет!!! А то!!!

    Ответить
  • Dmitry

    В Opera анимация не воспроизводится
    В IE ко всем DIV кроме первого присваивается visibility:hidden
    В хром и файрфокс полет нормальный

    Ответить
  • Dmitry

    В safari тоже все супер

    Ответить
  • Dmitry

    Так же скрипт не подходит для HTML5 , не указаны единицы измерения и функции имеют неверные (для ХТМЛ5) названия. При пятом доктайпе работать не будет.

    Ответить
  • dimadv7

    а какая версия оперы? У меня 25.0.1614.68 — работает, и 11 explorer тоже не добавляет visibility:hidden

    Ответить
  • dimadv7

    работает все, проверьте))

    Ответить
  • dimadv7

    Я ничего кроме доктайпа html5 не использую уже около года, и все отлично работает. И во всех современных браузерах анимация работает отлично. А на старой опере с движком Presto — не тестировал. Может быть и не работает! А в том, что все работает с html5 можно убедиться, скачав, например, исходник :)

    Ответить
  • Dmitry

    Действительно, в вашем исходнике все супер с доктайпом, странно, почему же на моем голеньком html при пятом доктайпе отказывается, будем разбираться. Про версию оперы и IE не могу ответить к сожалению, так как вчера был у товарища в офисе и там тестировал сайт на разных машинах.

    Ответить
  • dimadv7

    Может что-то упустили? А насчет браузеров, то скорее всего старая версия, и не все свойства css3 поддерживаются еще

    Ответить
  • BU

    Очень интересно, благодарю за разжевывание, может где и сгодится…

    Ответить
  • dimadv7

    Конечно сгодится, эффект же классный получается :)

    Ответить
  • BU

    Поэкспериментировал, смотрим линк. Кста, есть возможность выставлять задержку в миллисекундах т.е. «500ms»

    Ответить
  • dimadv7

    Да, я делал так «.5»

    Ответить
  • denis

    получается ) на основе этого скрипта запилили плагин для adobe muse — так там товарищи прямо это рекомендуют делать — иногда у них получается занятно ))))

    Ответить
  • Дмитрий

    С animated и animation.css всё хорошо (вам спасибо огромное!), а wow не хочет запускаться. :(
    вот ссылка: kardialogos.ru/test.htm
    может поможете разобраться?

    Ответить
  • Дмитрий

    Похоже проблема с DOCTYPE :(

    Ответить
  • dimadv7

    попробуйте добавить блоков, перед тем, в котором происходит анимация, чтобы можно было прокручивать, Затем добавьте wow в сам класс с анимацией. А потом еще раз глянем на ваш код. Должно быть, например, так:

    class="fadeInRight wow"
    Ответить
  • dimadv7

    Уберите animated и сделайте так:

     <img src="res/picto_work.png" class="fadeInright wow" data-wow-offset="170">

    , проверим, получится ли!

    Ответить
  • dimadv7

    У вас неправильная структура doctype :) Сразу не заметил

    Ответить
  • dimadv7

    Попробуйте так:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="styles/animate.css">
    	<script src="js/wow.min.js"></script>
        <script>new WOW().init();</script>
    </head>
    <body>
    	
    </body>
    </html>
    
    

    И уже внутри body опишите вашу страницу

    Ответить
  • Дмитрий

    И так, вот что сделал что бы заработало:
    1. Что бы модификаторы WOW работали полностью, а не частично DOCTYPE должен быть от HTML5.
    2. Все эффекты должны быть прописаны прям как в animate.css.
    Верно — class=»fadeInDown wow»
    Не верно — class=»fadeindown wow»
    3. Animated нормально работает с HTML4. WOW работает, но частично. И это путало больше всего.

    Спасибо огромное за помощь!

    Ответить
  • dimadv7

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

    Ответить
  • Дмитрий

    Вот еще проблема с animation.css это рендер тонких шрифтов. При чем — если это анимация стоящая на месте типа: fadeIn то хоть и в конце рывком, но надпись приобретает нужный вид. А вот если fadeInDown, то рендерит самый тонкий.

    Вот пример с проблемой: kardialogos.ru/test.htm
    Как пример используется google web шрифт Roboto

    Ответить
  • Дмитрий

    Забыл добавить так в Сафари распоследнем. В Firefox и Chrome все ок. Но на сайте Animate.css во всех браузерах все работает хорошо.

    Ответить
  • dimadv7

    Может быть там не тексту задается анимация, а контейнеру, в котором он находится?

    Ответить
  • Дмитрий

    Так и есть отрабатывает но я пробовал и так и так.

    Ответить
  • Дмитрий

    Анимация задается для div но я пробовал и так и так.

    Ответить
  • Дмитрий

    Немного спасает положение если писать style и указывать атрибуты шрифта непосредственно к нужному тексту даже если в классе прописано.

    Еще раз, этот беспередела наблюдается только в Safary.

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

    Здравствуйте!
    Мега-полезная статья для таких лохов, как я.
    Но есть одно НО: у меня нет файла index.html, у меня есть только index.php. В таком случае есть рецепт, что делать?)))) Заранее спасибо!

    Ответить

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