Анимируйте div при прокрутке мыши с помощью AOS

AOS — это небольшая библиотека для анимации элементов на вашей странице при прокрутке.

AOS позволяет анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите вверх, элементы вернутся в свое предыдущее состояние и будут готовы к анимации снова, если вы прокрутите вниз.

Установка: Установить AOS очень просто:

• Добавьте приведенный ниже тег в тег заголовка веб-страницы.

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

• Добавьте скрипт прямо перед закрытием тега </head> и инициализируйте AOS:

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

Вот и все, теперь вы успешно установили aos в свое веб-приложение.

Установить анимацию с помощью data-aos атрибут :

<div data-aos="fade-in"></div>

Пример: Ниже приведен пример демонстрации эффекта анимации.

Выход: