Как сделать анимацию при скроле?

Question

[catssss]

Подскажите, как реализовать анимацию на сайте при прокрутке страницы на чистом js? Для анимации использую animate.css b хочу сделать так чтобы при скроле вниз анимация срабатывала один раз. Всем заранее спасибо.

P.S. Суть задачи сделать на чистом js подобное без использования jq

Comments

[Rustam Bainazarov]

Библиотека Wow.js.

[catssss]

Рустам Байназаров, она стала платной)) да и суть у меня сделать такое без jq, но информации в сети очень мало удалось найти

[Rustam Bainazarov]

catssss, в каком месте она платная? Она была платной, а стала бесплатной уже давно:

Более того, почему это она оказалась jQuery-зависимой?

https://wowjs.uk/

[catssss]

Рустам Байназаров, не знал, что сделали опять бесплатным))) Просто задача все же сделать на чистом js такое))) вот и думаю в какую сторону копать)))

[Rustam Bainazarov]

catssss, следите за событием прокрутки, положением нужных элементов, считайте расстояние до них от верха. По-моему, сейчас есть метод определения нахождения элемента в зоне видимости, делайте троттлинг, чтобы не видеть на производительность. Ну и т. п.

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

Answer 1

[Андрей]

Можно использовать одну из библиотек
https://michalsnik.github.io/aos/
https://wowjs.uk/
https://alexfox.dev/laxxx/
Если очень хочется самому сделать изучай исходный код