AnimateGL Animations for WordPress — Elementor & Gutenberg Blocks Animations v1.4.24

Демо | Документация | Поддержка

Легко добавляйте анимацию CSS и WebGL к любому элементу веб-сайта с помощью плагина AnimateGL.

Добавьте анимацию CSS и WebGL в Elementor, редакторе блоков или любом другом конструкторе. Настройте направление, продолжительность, задержку и замедление для каждой анимации. Выбирайте простые анимации CSS, такие как затухание, скольжение, масштабирование и вытеснение, или творческие анимации WebGL, такие как изгиб, переворот, растяжение или направленное затухание. Создайте собственную анимацию входа с помощью визуального редактора. AnimateGL - легкий, быстрый и простой в использовании инструмент, что делает его идеальным выбором для веб-дизайнеров, стремящихся повысить визуальную привлекательность своего веб-сайта.

Особенности

- Добавить анимацию входа к любому элементу или блоку.

- Входная анимация CSS "Затухание", "Увеличение", "Уменьшение", "Вытеснение", "Показ слайда".

- Входная анимация WebGL: изгиб, переворот, очистка, вытеснение, масштабирование, направленное затухание.

- Полностью настраиваемое направление анимации, продолжительность, задержка и замедление.

- Анимация блоков Гутенберга.

- Элементорная анимация.

- Анимация классов CSS.

- Вложенные анимации.

- Блокировка полосы прокрутки

- Повторите или воспроизведите один раз при первом входе в область просмотра.

- Живой редактор для создания собственной анимации.

- Предустановленные анимации

- Прокручивать анимацию входа, активируемую при входе.

- Простота в использовании

- Легкий

- Отличная производительность

CSS-анимация

Входные анимации CSS ускоряются на графическом процессоре и анимируют непрозрачность свойств CSS, преобразование и путь обрезки в различных комбинациях. CSS-анимацию можно добавить к любому элементу или блоку. Доступные CSS-анимации: "Затухание", "Увеличение масштаба", "Уменьшение масштаба", "Вытеснение" и "Скольжение" с настройками направления, расстояния, продолжительности, задержки и замедления. Комбинируя затухание, масштабирование, направление, замедление и задержку, вы можете создавать неограниченное количество креативных и элегантных анимаций. Скоро появятся новые CSS-анимации.

CSS входная анимация:

- Затухание

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

- Уменьшить масштаб

- Протрите

- Слайд

Анимация WebGL

Анимации WebGL преобразуют любой элемент в изображение с помощью html2canvas.js, а затем применяют к изображению эффекты с помощью пользовательских шейдеров GLSL. Лучше всего использовать простые элементы, такие как заголовок, кнопка или изображение. С помощью WebGL мы можем создавать эффекты, которые невозможно реализовать с помощью CSS, например, 3D-искажения или затухание градиента, и добавлять эти эффекты к любому элементу на странице.

Анимация входа WebGL:

- Затухание

- Слайд

- Растянуть

- Изгиб

- Перевернуть

- Масштаб

- Пил

Легкий

Всего 35 КБ для анимации CSS, дополнительно 45 КБ, если используется анимация WebGL.

Элементорная анимация

Добавьте анимацию входа к любому элементу в Elementor. Выберите тип анимации, направление, расстояние, задержку, продолжительность и замедление на вкладке "Дополнительно".

Анимация блоков Гутенберга

Добавьте анимацию входа в любой блок Гутенберга. Выберите тип анимации, направление, расстояние, задержку, продолжительность и плавность с помощью элементов управления инспектора блоков.

Входная анимация через класс CSS

Если вы не используете блоки Elementor или Gutenberg, вы все равно можете использовать AnimateGL через классы CSS. Добавьте одну из предустановленных анимаций входа или пользовательскую анимацию входа к любому элементу на странице, добавив класс CSS анимации.

Больше анимаций доступно в пакете "Вход":

- Круг (CSS)

- Квадрат (CSS)

- Линия (CSS)

Настройте направление, продолжительность, замедление и задержку для каждой анимации.

Настройте свойства анимации с помощью класса CSS:

- Затухание - с опциями направленного затухания и порога.

- Перевести - с параметрами направления x, y и z.

- Вращение - с опциями для осей x, y и z.

- Искажение углов - для дополнительного разнообразия анимации.

- Продолжительность - настройка продолжительности анимации.

- Задержка - настройка времени начала анимации.

- Замедление - настройка скорости и плавности анимации.

Повторить

По умолчанию анимация входа воспроизводится, когда элемент впервые попадает в область просмотра. Если опция повтора включена, анимация будет воспроизводиться каждый раз, когда элемент попадает в область просмотра.

Привязка к полосе прокрутки

Вместо анимации входа с фиксированной продолжительностью мы можем сделать так, чтобы ход анимации зависел от положения прокрутки элемента. Если элемент находится ниже области просмотра, прогресс анимации будет равен 0. Когда мы прокручиваем страницу вниз и элемент перемещается к середине области просмотра, анимация продолжается. Конец анимации - это когда элемент достигает середины области просмотра. Опцию блокировки полосы прокрутки можно включить для любой анимации.

Эффекты мыши

AnimateGL также предлагает эффекты искажения, управляемые мышью, в том числе:

- Тянуть - с опциями силы, размера, смещения RGB и легкости.

Анимация, запускаемая при прокрутке

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

Порог входа в видовой экран

По умолчанию анимация входа начинает воспроизводиться, когда 70% или 200 пикселей элемента попадает в область просмотра.

Живой редактор

Используйте живой редактор, чтобы создать собственную анимацию входа.

Повысьте визуальную привлекательность вашего веб-сайта с помощью AnimateGL, самого мощного и продвинутого плагина анимации WebGL для WordPress. Благодаря небольшому размеру в 33 КБ и отсутствию зависимостей AnimateGL является быстрым, простым в использовании и идеальным выбором для веб-дизайнеров, желающих добавить в свои проекты уникальные анимации.