Онлайн сервис анимации AOS + CDN хранилище

Идея, лежащая в основе AOS, проста: следить за всеми элементами и их положением на основе настроек, которые вы им предоставляете. Затем добавьте/удалите класс aos-animate. Конечно, на практике это не всегда так просто, но идея AOS проста. Каждый аспект анимации обрабатывается CSS. 

Вам не нужно беспокоиться о продолжительности или задержке. В CSS вы только:

  • добавить стили для атрибута aosс названием вашей анимации
  • установите transition-property(по умолчанию это all, поэтому он более эффективен и более предсказуем, если вы сузите переход до предполагаемых свойств)
  • добавить свойства после перехода на.aos-animate


Установка  анимации AOS

Шаг 1) добавить CSS:

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

Шаг 2) добавить JavaScript:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

INITIALIZE AOS

<script>

  AOS.init();

</script>

Шаг 3) добавить HTML:

 data-aos="fade-up"

Вот такие маленькие теги добавить в блоки div

Перейти на сервис
Tags: