Запуск анимации только когда человек доскролил?

Question

[DeniSidorenko]

Добрый день, есть бесконечная анимация. Т.е она повторяется бесконечное кол в раз. Но проблема в том что пока пользователь доскроллит до нее, половина анимации уже пройдет, ведь запуск анимации идет с запуском страницы. Подскажите как можно сделать запуск анимации только тогда когда пользователь доскроллил до страницы. Заранее спасибо. прошу без wow.js, если есть другие способы?

Answer 1

[Роман]

Вот вариант без сторонних библиотек. Для просмотра демки перейдите во вкладку [Result] и покрутите на нем колесико мышки вверх и вниз.

Comments

[Stalker_RED]

Вообще круто, но возможно пора уже переходить на intersection observer (в хроме уже работает) и полифилл.
Ну или хотя-бы throttle прикрутить. При большом количестве отслеживаемых элементов этот ваш код может заметно подтормаживать.

[Роман]

Stalker_RED, если много, то может и притормаживать:)
intersection observer - пока все еще экспериментальный а вот прикрутить throttle - вполне здравая мысль, если не поленюсь - прикручу. А сейчас спать, пол ночи игрался с гравитацией в этом вопросе:)

[alex-1917]

этот варик не пашет если прокрутить страничку и обновить её))) визуально тот самый элемент будет перед глазами, а анимации никакой не будет...

[Роман]

alex-1917, потому что не сработает событие window.onscroll, проблема решается одной строчкой в конце скрипта:
window.onscroll();

[alex-1917]

Роман, мне кажется чтотаки нет

[Роман]

alex-1917, тестируй

[alex-1917]

Роман, внатури! ок, былнеправ.

Answer 2

[alex]

https://github.com/camwiegert/in-view

inView('.element').once('enter', runAnimation);

Answer 3

[Flying]

В современных браузерах задача решается нативно через IntersectionObserver, для более старых есть polyfill.

Answer 4

[DeniSidorenko]

Спасибо за ответы, все варианты хороши,но я использовал waypoint.js так как уже был установлен