Расширение Floating Effect Elementor от Master Addons Pro добавляет плавную, зацикленную анимацию к любому виджету на вашем веб-сайте. с помощью простых настроек, таких как перевод, вращение и масштабирование, вы можете создавать тонкие плавающие движения или динамические 3D эффекты.
В этом уроке мы рассмотрим, как использовать эти параметры настройки, чтобы воплотить ваши элементы в жизнь, и покажем, как расширение позиционирования может помочь точно настроить размещение для идеального образа. к концу вы будете готовы создать привлекательную плавающую анимацию для вашего сайта.
Как использовать расширение Floating Effect Elementor
Прежде чем перейти к параметрам плавающих эффектов, вы должны убедиться, что расширение включено.
Просто перейдите в Мастер-аддоны на панели управления Перейдите на вкладку расширения и переключите расширение Floating Effects. Просто!
После того, как вы включили его, вы можете перейти на вкладку "Дополнительно" любого виджета на вашем сайте и прокрутить вниз, чтобы найти расширение “floating Effects”. Переключить его и, вы увидите следующие параметры настройки.
1. Перевести
Это позвол ет перемещать элемент по ос м X и Y, Регулиру перевод по оси X, элемент будет перемещатьс влево и вправо Аналогично, регулировка оси Y перемещает элемент вверх и вниз Объединение обеих осей перемещает элемент по диагональной линии.
2. Повернуть
С помощью этой опции вы можете вращать элементы по осям X, Y и Z. Это придает вашим элементам более динамичный, вращающийся эффект.
Вы также можете регулировать продолжительность и задержку вращения, позволяя более плавные или более драматичные переходы. если Translate также включен, виджет использует время Translate вместо этого.
3. Масштаб
Эффект масштаба позволяет растянуть или уменьшить элемент вдоль осей X и Y. Это создает анимацию роста/сокращения, заставляя ваши элементы выглядеть расширяющимися или сжимающимися. как и в случае с другими эффектами, вы можете регулировать продолжительность и задержку, чтобы контролировать время анимации.
Объединив эти три варианта настройки, вы можете создавать бесконечные вариации плавающих эффектов, от тонких движений до более сложных, привлекательных анимаций.
Рекомендуем вам проверить функции Out Elementor Pro а также. можно комбинировать Elementor pro и Мастер Аддоны чтобы создать любой тип веб-сайта, который вы хотите.
Объединение эффектов
Одна из самых мощных особенностей Плавающие эффекты расширение - это возможность комбинировать перевод, вращение и масштабирование для уникальной и динамической анимации. накладывая эти эффекты, вы можете создавать что угодно: от тонких плавающих движений до полных трехмерных интерактивных элементов.
Объедините перевод и вращение: Сопряжение перемещения с вращением создает эффект текучести, вращения с движением по экрану. Например, вы можете заставить элемент плавать по диагонали, вращаясь на месте, для более динамичной трехмерной иллюзии.
Объедините перевод и масштаб: Использование как перевода, так и масштабирования позволяет элементу перемещаться и изменять размер одновременно. это может создать расширяющийся или уменьшающийся плавающий эффект, когда элемент дрейфует по экрану.
Объедините все три: Для достижения окончательного эффекта плавания комбинируйте перевод, вращение и масштабирование. Это позволяет создавать сложные анимации, в которых элемент перемещается, вращается и растет/сжимается одновременно, придавая ему привлекательный, многомерный вид.
Возможности безграничны, когда вы экспериментируете с этими комбинациями. играйте с различными значениями продолжительности и задержки, чтобы настроить скорость и время, создавая действительно пользовательскую плавающую анимацию для любого элемента.
Создание плавающего эффекта на изображении
Мы надеемся, что к настоящему времени вы знаете, как настроить различные настройки расширения Floating Effects.
В качестве бонуса покажем, как создать потрясающий раздел с некоторыми изображениями Плавающие эффекты и Расширения позиционирования:
Вы можете следить за видео ниже, где мы покажем вам весь процесс.
Во-первых, выберите изображения, которые мы будем использовать для создания нашего раздела.
Затем мы добавляем Flexbox или сетку полной ширины для 3 столбцов и 2 строк и располагаем все изображения, как показано на следующем снимке экрана, внутри соответствующих полей.
Теперь, давайте сосредоточимся на Позиции и Плавающем Эффекте, Мы рекомендуем начать с позиционирования.Тщательно пересмотреть свой дизайн и расположить все изображения и частицы точно перед реализацией плавающего эффекта.
Мы использовали расширение позиционирования Master Addons для точного позиционирования изображений. Для начала выберите "Относительно" в расширении положения. Затем при необходимости приступите к выравниванию изображений или любых других элементов.
Мы завершили позиционирование всех изображений, и прилагаемый снимок экрана иллюстрирует текущую компоновку.
Наконец, применим эффект плавающей к нужным изображениям Мы применили эффекты перевода X и Y к изображениям в первом и третьем столбцах Эффект поворота Z был применен исключительно к изображению профиля Пожалуйста, обратитесь к следующему файлу GIF, чтобы увидеть текущий визуальный результат.
The Плавающие эффекты расширение (Pro) предлагает бесконечные возможности для анимации элементов на вашем веб-сайте. с простыми, но мощными вариантами настройки для перевода, вращения и масштабирования, вы можете создавать динамические, привлекательные плавающие эффекты, которые привлекают посетителей. Когда в сочетании с Расширение позиционирования, вы имеете полный контроль как над движением и размещением элементов для действительно подгонянного дизайна.
Не бойтесь экспериментировать с различными настройками и комбинациями, чтобы найти идеальный плавающий эффект для вашего сайта. немного креативности, вы можете повысить свой веб-дизайн и создать более интерактивный пользовательский опыт.
Если у вас возникнут какие-либо проблемы с этим расширением, не стесняйтесь комментировать здесь или свяжитесь с нами через наш Контактная форма веб-сайта.
