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

Question

[aeprotsyuk]

Добрый день!

Подскажите пожалуйста, как для этих 4 элементов (div c картинкой и параграфом) сделать последовательное появление на JS? Надо каждому задавать свой класс и к нему обращаться или есть более простой способ?

Answer 1

[vıtalıyırtlach]

Вы можете использовать простую библиотеку aos:
в теге head:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

перед закрытием тега body:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

https://michalsnik.github.io/aos/

Comments

[aeprotsyuk]

А если цель стоит использовать ванильный js ?

[vıtalıyırtlach]

Тогда ориентируйтесь на событие scroll у window

[aeprotsyuk]

vıtalıyırtlach, а нет случайно библиотеки, с помощью которой эту последовательную анимацию можно реализовать, но прокрутки экрана нет. Просто загружается страница и спустя секунду допустим выезжают последовательно блоки.

[vıtalıyırtlach]

ui kit есть там вроде такое
https://getuikit.com/

[aeprotsyuk]

vıtalıyırtlach, справился библиотекой AOS, благодарю)