AOS - библиотека анимации с большим разнообразием готовых эффектов. Анимация запускается при прокрутке страницы (скроллинга).
1. Добавление стилей в <head>:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />2. Добавление скрипта непосредственно перед закрытием тега </body>:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>3. Запуск анимации с помощью атрибута data-aos:
<div data-aos="fade-in"></div>Анимация
Исчезающая анимация:
fade (постепенное увеличение)
fade-up (постепенное увеличение)
fade-down (постепенное уменьшение)
fade-left (постепенное увеличение-влево)
fade-right (постепенное уменьшение-вправо)
fade-up-right (постепенное увеличение-вправо)
fade-up-left (постепенное увеличение-влево)
fade-down-right (постепенное уменьшение-вправо)
fade-down-left (постепенное уменьшение-влево)
Анимация переворота:
flip-up (поворот вверх)
flip-down (поворот вниз)
flip-left (поворот влево)
flip-right (поворот вправо)
Анимация слайдов:
slide-up (перемещение вверх)
slide-down (перемещение вниз)
slide-left (перемещение влево)
slide-right (перемещение вправо)
Анимация масштабирования:
zoom-in (увеличение масштаба)
zoom-in-up (увеличение-вверх)
zoom-in-down (увеличение-вниз)
zoom-in-left (увеличение-влево)
zoom-in-right (увеличение-вправо)
zoom-out (уменьшение масштаба)
zoom-out-up (уменьшение-вверх)
zoom-out-down (уменьшение-вниз)
zoom-out-left (уменьшение-влево)
zoom-out-right (уменьшение-вправо)
Размещение якорей:
top-bottom (верх-низ)
top-center (верх-центр)
top-top (верх-верх)
center-bottom (центр-низ)
center-center(центр-центр)
center-top (центр-верх)
bottom-bottom (низ-низ)
bottom-center (низ-центр)
bottom-top (низ-верх)
Функции ослабления:
linear (линейный)
ease (легкость)
ease-in (легкость ввода)
ease-out (легкость вывода)
ease-in-out (легкость ввода)
ease-in-back (легкость вывода)
ease-out-back (легкость ввода-вывода)
ease-in-out-back (легкость ввода-вывода-возврата)
ease-in-sine (легкость ввода-вывода-возврата)
ease-out-sine (легкость ввода-вывода-возврата-вывода)
ease-in-out-sine (легкость в синусе)
ease-in-quad (легкость в квадратуре)
ease-out-quad (легкость в квадратуре)
ease-in-out-quad (легкость в квадратуре)
ease-in-cubic (легкость в кубике)
ease-out-cubic (легкость в кубике)
ease-in-out-cubic (легкость в кубике)
ease-in-quart (разливается в кварту)
ease-out-quart (разливается в кварту)
ease-in-out-quart (разливается в кварту)
Настройки, которые могут быть переопределены для каждого элемента с помощью атрибутов `data-aos-*`:
<div data-aos="fade-up"
data-aos-offset="200" // смещение (в пикселях) от исходной точки запуска
data-aos-delay="50" // задержка от 0 до 3000, с шагом 50 мс
data-aos-duration="1000" // продолжительность от 0 до 3000, с шагом 50 мс
data-aos-easing="ease-in-out" // ослабление анимации AOS
data-aos-mirror="true" // должны ли элементы анимироваться при прокрутке мимо них
data-aos-once="false" // должна ли анимация выполняться только один раз - при прокрутке вниз
data-aos-anchor-placement="top-center" // определяет, какое положение элемента относительно окна должно запускать анимацию
>
</div>
Подробнее: GitHub | View original demo | css-tricks.com
