Создайте анимацию движущихся фоновых изображений с помощью бесплатного конструктора страниц Elementor

Создание движущейся анимации фонового изображения с помощью Free Elementor page builder кажется мне сейчас очень простым Здесь вам нужно добавить немного CSS-кода внутри страницы Существует способ добавить CSS-код бесплатно Elementor тоже.

Я собираюсь поделиться чем-то удивительным с фоновым изображением. Было действительно весело создать что-то потрясающее, что кажется привлекательным. Вот два источника о разных типах Фон страницы Элементор и Элементор искаженный фон Обязательно проверьте это, если вы хотите творчески расположить фон своей страницы или разделов элементов. Если вы предпочитаете повернуть несколько фотографий за разделом, чем развернуть одно изображение, бесплатно слайдер фона расширение в Master Addons делает это без каких-либо CSS.

Что такое анимация движущегося фонового изображения?

А анимация изображения движущегося фона является зацикленной CSS анимацией, которая медленно скользит широкий фоновый образ за содержимым вашей страницы, поэтому раздел чувствует себя живым без загрузки видео файла.В Elementor вы строите его с полноразмерным разделом, двумя прокладками, несущими идентификаторы CSS бг и наложение, и короткий блок CSS @keyframes код вставлен в HTML-виджет — лицензия Elementor Pro не требуется. Это один из самых легких виджетов Эффекты анимации элементара вы можете добавить, потому что браузер анимирует одно преобразование вместо воспроизведения мультимедиа.

А как именно это выглядит, сначала посмотрим на следующем видео.

Этот раздел доступен в Библиотека шаблонов Master Addons бесплатно. Вы можете легко импортировать это на свою веб-страницу, если вы являетесь Добавление Master Addons — Elementor Page builder пользователь плагина. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

Проверять как установить и активировать плагин Master Addons

Создать страницу или опубликовать и отредактировать ее с помощью elementor.Вы увидите значок библиотеки шаблонов главных дополнений. 

Нажмите на библиотеку MA Tempalte и подождите несколько секунд, чтобы загрузить данные Вы увидите “Ready Page” и “Sections”. Нажмите на вкладку разделов и подождите несколько секунд. теперь вы увидите анимацию изображения “Moving Background. 

Теперь нажмите на значок масштабирования, чтобы просмотреть его. Затем вы увидите кнопку вставки. Нажмите на эту кнопку “insert”, чтобы получить этот шаблон в один клик. после этого вы можете свободно редактировать контент.

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

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

Учебник по анимации движущегося фонового изображения

Краткий ответ: построить одноколонный раздел Elementor, установленный на “Fit to screen”, добавить прокладку с идентификатором CSS бг над вашим контентом и второй прокладкой с идентификатором наложение ниже него, затем вставьте код CSS анимации ниже в HTML виджет и поменяйте местами в собственных URL-адресах изображений. вам нужны три актива — широкое фоновое изображение, наложение PNG и наложение SVG — и вся сборка занимает около десяти минут на бесплатном конструкторе страниц Elementor.

Активы, которые вам нужны: 

1. Изображение размером 1500 на 500 пикселей
2. Изображение наложения PNG
3. Изображение наложения SVG

Теперь добавьте структуру из одного столбца и сделайте его высотой “Fit для screen”. 

Просто добавьте свой контент прямо сейчас. Я собираюсь поделиться информацией о типографике демо-контента здесь. 

Название (элемент заголовка по умолчанию Used Elementor): Семейство шрифтов: Source Sans Pro, Размер шрифта: 120px, Вес шрифта: 900, Высота строки: 140, Расстояние между буквами: -5, Цвет: Черный

Текст (используемый элемент текстового редактора по умолчанию): Семейство шрифтов: Source Sans Pro, Размер шрифта: 30px, Вес шрифта: 400, Высота строки: 40, Цвет: Черный

Социальный (используемый социальный элемент по умолчанию): Форма: Круг, Выравнивание: Центр, Цвет: Пользовательский, Первичный Черный: rgba (175,175,175,0), Вторичный Цвет: Черный, Размер: 40, Пространство: 30, Тип границы: Твердый, Ширина границы: 2, Цвет границы: Черный

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

Поместите z-индекс=1 в каждый элемент с помощью вкладки "Дополнительно". Просто нажмите на каждый элемент и перейдите на вкладку "Дополнительно". Проверьте следующее изображение. 

(Если вы пропустите это, то вы столкнетесь с проблемой редактирования содержимого элементов после добавления движущегося фонового кода CSS изображения. вам придется использовать систему Elementor Navigator для редактирования контента, если вы не поместите здесь z-индекс.)

Теперь Добавьте два спейсера. один находится вверху заголовка, а другой - внизу значка в социальных сетях. 

Поместите “BG” в качестве ID в верхнюю прокладку. И поместите “overlay” в качестве ID в нижнюю прокладку. 

Добавление идентификатора BG в верхнюю прокладку

Добавление идентификатора наложения в нижнюю прокладку

Добавить “HTMLэлемент ”” под значком в социальных сетях или в верхней части второго проставки. 

Изменение ссылки на изображение BG и наложенное изображение

Помните ли вы о наших активах анимации изображений Moving BG? Теперь пришло время загрузить их на свой сайт. Загрузите фоновое изображение, наложение PNG и наложение изображения SVG. Затем скопируйте эти 3 ссылки и перечислите их в своем редакторе кода или блокноте. 

Скопируйте следующий код в вашем редакторе кода. и измените ссылку на фоновое изображение, PNG и ссылку на наложение изображения SVG. Я добавил два снимка экрана, где вы можете легко найти, какие ссылки вам следует изменить. 

Нажмите на каждое изображение, чтобы увидеть версию с высоким разрешением. 

Изменить URL-адрес фонового изображения

Изменить URL-адрес наложения изображений

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

Теперь скопируйте свой отредактированный код с помощью Bg и накладывайте изображения. Затем вставьте его в элемент HTML. Вы увидите результат мгновенно. если вы знаете, как работать с CSS, вы также можете настроить анимацию.

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

Все дело в создании анимации движущихся фоновых изображений с помощью плагина конструктора страниц. Вы можете стилизовать свой контент, используя наш Плагин Master Addon также. это будет фиксированный фон для вашей страницы. если вы хотите установить движущийся фон для раздела, то просто измените позицию на “абсолютный“. 

Не стесняйтесь комментировать здесь, если вы столкнулись с какой-либо проблемой. Я буду направлять вас для настройки анимации движущегося изображения BG.

Часто задаваемые вопросы