Animate on Scroll v1.0.7

Анимируйте любые элементы при прокрутке с помощью популярной библиотеки AOS JS, просто добавляя имена классов.

Этот плагин поможет вам легко интегрироваться с библиотекой AOS JS и добавить любую анимацию AOS (анимацию при прокрутке) в WordPress.

Он должен хорошо работать с собственными базовыми блоками Gutenberg или любым конструктором страниц (протестирован с помощью GenerateBlocks и Elementor), который предоставляет поле ввода для добавления пользовательских имен классов к элементам.

Об АОС

AOS - это небольшая библиотека JavaScript, созданная Михалом Сайногом, которая позволяет добавлять анимированные эффекты к элементам HTML, когда они появляются в поле зрения при прокрутке веб-страницы пользователем. AOS предоставляет набор предопределенных анимаций с использованием CSS, которые можно легко применять к элементам с помощью простых атрибутов данных в HTML-коде.

Ознакомьтесь с демо-версией и документацией AOS.

Как добавить анимацию?

Просто добавьте нужную анимацию AOS к имени класса вашего элемента с префиксом "aos-", и плагин добавит соответствующий атрибут aos в тег элемента.

Затухание анимации:

- затухание: aos-fade

- постепенное увеличение: aos-fade-up

- постепенное затухание: aos-fade-down

- постепенное исчезновение влево: aos-fade-left

- постепенное исчезновение: aos-fade-right

- постепенное увеличение вправо: aos-затухание вправо

- постепенное исчезновение влево: aos-fade-up-left

- Fade-Down-Right: aos-Fade-Down-Right

- постепенное исчезновение влево: : aos-fade-down-left

Перевернуть анимацию:

- переворот: aos-переворот

- перевернуть вниз: aos-перевернуть вниз

- перевернуть влево: aos-flip-left

- флип вправо: aos-флип вправо

Слайд-анимация:

- слайд вверх: aos-слайд вверх

- слайд вниз: aos-слайд вниз

- слайд влево: aos-слайд влево

- слайд вправо: aos-слайд вправо

Увеличение анимации:

- Увеличение: aos-увеличение

- Увеличение масштаба: aos-увеличение

- уменьшение масштаба: aos-увеличение-уменьшение

- увеличение влево: aos-увеличение влево

- Увеличение вправо: aos-Увеличение вправо

- уменьшение масштаба: aos-уменьшение

- уменьшение масштаба: aos-уменьшение масштаба

- уменьшение-уменьшение: aos-уменьшение-уменьшение

- уменьшение масштаба влево: aos-уменьшение масштаба влево

- уменьшение вправо: aos-уменьшение вправо

Настройки анимации

По умолчанию глобальные настройки анимации:

- смещение: -100

- продолжительность: 1100

- смягчение: легкость

- задержка: 0

- один раз: правда

вы можете изменить это с помощью фильтра:

add_filter("aos_init", function($aos_init) {
вернуться "
вар aoswp_params = {
"offset":"200",
"duration":"1800",
"easing":"eeasing-in-out",
"задержка":"0",
"один раз": ложь};
";
});

или добавьте к элементу дополнительные классы ниже для индивидуальных настроек. Плагин добавит в тег соответствующий атрибут aos.

Однажды поведение:

- Once=true: aos-once-true

- Once=false: aos-once-false

Функции смягчения:

- линейный: aos-easing-linear

- легкость: aos-easing-ease

- легкость: aos-easing-ease-in

- легкость: aos-easing-ease-out

- легкость выхода: aos-easing-ease-in-out

- легкость в спине: aos-easing-ease-in-back

- легкость выхода назад: aos-easing-ease-out-back

- легкость входа назад: aos-easing-easy-in-out-back

- легкость-синус: aos-easing-ease-in-sine

- easy-out-sine: aos-easing-ease-out-sine

- легкость-в-выход-синус: aos-easing-ease-in-out-sine

- легкость в четырехугольнике: aos-easing-ease-in-quad

- easy-out-quad: aos-easing-ease-out-quad

- легкость входа в квадрат: aos-easing-ease-in-out-quad

- легкость в кубическом: aos-easing-ease-in-cubic

- easy-out-cubic: aos-easing-ease-out-cubic

- легкость-в-выход-куб: aos-easing-ease-in-out-cubic

- легкость в кварте: aos-easing-ease-in-quart

- легкость-выход-кварт: aos-easing-ease-out-quart

- легкость выхода из кварты: aos-easing-ease-in-out-quart

Продолжительность анимации:

- 100 мс: продолжительность aos-100

- 200 мс: продолжительность aos-200

- 300 мс: продолжительность aos-300

- 400 мс: продолжительность aos-400

- 500 мс: продолжительность aos-500

- 600 мс: aos-duration-600

- 700 мс: aos-duration-700

- 800 мс: aos-duration-800

- 900 мс: продолжительность aos-900

- 1000 мс: продолжительность aos-1000

- 1100 мс: продолжительность aos-1100

- 1200 мс: продолжительность aos-1200

- 1300 мс: продолжительность aos-1300

- 1400 мс: продолжительность aos-1400

- 1500 мс: продолжительность aos-1500

- 1600 мс: продолжительность aos-1600

- 1700 мс: продолжительность aos-1700

- 1800 мс: продолжительность aos-1800

- 1900 мс: продолжительность aos-1900

- 2000 мс: aos-duration-2000

- 2100 мс: продолжительность aos-2100

- 2200 мс: продолжительность aos-2200

- 2300 мс: продолжительность aos-2300

- 2400 мс: продолжительность aos-2400

- 2500 мс: продолжительность aos-2500

- 2600 мс: продолжительность aos-2600

- 2700 мс: продолжительность aos-2700

- 2800 мс: продолжительность aos-2800

- 2900 мс: продолжительность aos-2900

- 3000 мс: продолжительность aos-3000

Задержка анимации: (*новое, добавлено в версии 1.0.2)

- 100 мс: aos-delay-100

- 200 мс: aos-delay-200

- 300 мс: aos-delay-300

- 400 мс: aos-delay-400

- 500 мс: aos-delay-500

- 600 мс: aos-delay-600

- 700 мс: aos-delay-700

- 800 мс: aos-delay-800

- 900 мс: aos-delay-900

- 1000 мс: aos-delay-1000

- 1100 мс: aos-delay-1100

- 1200 мс: aos-delay-1200

- 1300 мс: aos-delay-1300

- 1400 мс: aos-delay-1400

- 1500 мс: aos-delay-1500

- 1600 мс: aos-delay-1600

- 1700 мс: aos-delay-1700

- 1800 мс: aos-delay-1800

- 1900 мс: aos-delay-1900

- 2000 мс: aos-delay-2000

- 2100 мс: aos-delay-2100

- 2200 мс: aos-delay-2200

- 2300 мс: aos-delay-2300

- 2400 мс: aos-delay-2400

- 2500 мс: aos-delay-2500

- 2600 мс: aos-delay-2600

- 2700 мс: aos-delay-2700

- 2800 мс: aos-delay-2800

- 2900 мс: aos-delay-2900

- 3000 мс: aos-delay-3000

**Чтобы отключить Анимати