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

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

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

    Спасибо, очень пригодилось, так как надоело постоянно с 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. В таком случае есть рецепт, что делать?)))) Заранее спасибо!

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

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

    Ответить
  • 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 не забыли же указать в классе?

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

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

    Ответить
  • 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

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

    Ответить
  • JoshuaAgorn

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

    Ответить
  • Stephenlok

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    сорри
    mobile: false

    Ответить
  • олег

    Мб глупый вопрос, но….
    Если мне нужно определенное действие js, то могу ли я как-то подключить wow.js для этого? Например, у меня есть скрипт, который увеличивает значение счетчика от 0 до нужного числа. И как подвязать wow.js, чтобы скрипт начал работать только когда пользователь доскроллит до счетчика?

    Ответить
  • dimadv7

    На этой или следующей неделе сделаю статью, там без wow.js только. Все проще))

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

    тс вообще красава! по существу, без воды, и то что надо!

    Ответить
  • Anton

    Добрый день. А подскажите пожалуйста, как сделать так, чтобы анимация повторялась через определённые интервалы. Мне нужно чтобы shake срабатывал, допустим через каждые 20 сек, т.е. например чтобы кнопа подёргивалась!
    нашёл в скрипте функцию setInterval, но не знаю как её применить именно к shake

    Ответить
  • бодян

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

    Ответить
  • бодян

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

    Ответить
  • dimadv7

    Скачайте исходник, проверьте, что он отрабатывает правильно. Постепенно добавляйте свои элементы, проверяя каждый этап, а потом перенесите на основной сайт. Следите в консоли за ошибками и исправляйте их

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

    большое спасибо

    Ответить
  • Роман

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

    Ответить
  • dimadv7

    В конце статьи есть ссылка.

    Ответить

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

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