Редактор Wix: Применение эффектов фоновой прокрутки к полосе | Справочный центр
Эффекты фоновой прокрутки — это интересный и креативный способ привлечь внимание посетителей и побудить их к дальнейшему изучению вашего сайта.
Узнайте больше о:
- Добавление эффекта прокрутки к полосе
- Доступные эффекты прокрутки
Добавление эффекта прокрутки
Добавьте эффект, чтобы начать творить динамичный опыт для посетителей вашего сайта. Вы можете добавлять различные эффекты к разным полосам, так что экспериментируйте и создавайте захватывающие, уникальные страницы сайта.
Чтобы добавить эффект прокрутки:
- Щелкните полосу в Редакторе.
- Нажмите значок «Эффекты фоновой прокрутки».
- Выберите эффект прокрутки.
- (необязательно) Просмотрите свой сайт, чтобы увидеть эффекты прокрутки в действии.
Доступные эффекты прокрутки
Существует множество живых эффектов, которые вы можете добавить к своим полосам, например, «Поворот» и «Исчезновение».
Выберите вариант ниже, чтобы узнать больше о каждом эффекте.
Параллакс
Добавьте ощущение глубины к изображению или видео с помощью параллакса. Когда посетители прокручивают страницу вниз, ваше изображение/видео движется медленнее по сравнению с остальными элементами, что создает классный эффект.
Показать
Этот эффект постепенно раскрывает ваше изображение или видео, когда посетители прокручивают страницу вверх и вниз. Изображение/видео остается замороженным, а страница перемещается вокруг него, чтобы заинтриговать и заинтересовать ваших посетителей.
Заставьте свое изображение или видео появляться в 3D, когда посетители прокручивают страницу вверх и вниз. 3D добавляет интересный эффект, который придает страницам вашего сайта ощущение глубины.
Создайте динамический эффект, добавив на полосу перекос. Этот эффект заставляет ваше фоновое изображение или видео искривляться в другом направлении по сравнению с вашей страницей, когда посетители прокручивают страницу.
Крупный план
Покажите крупным планом ваше видео/изображение, пока посетители прокручивают страницу вниз. Когда они прокручиваются назад, фон уменьшается.
Fade Back
Сделайте так, чтобы ваш фон уменьшался и исчезал, когда посетители прокручивают страницу вниз, медленно открывая фон вашей страницы. Когда они прокручиваются вверх, изображение или видео исчезают и возвращаются к своим первоначальным размерам.
Pull Back
Этот эффект заставляет ваш полосатый фон отодвигаться, когда посетители прокручивают страницу вниз, медленно открывая больше частей фона. Когда они прокручиваются вверх, изображение/видео снова увеличивается.
Поворот
Добавьте к фоновой полосе эффект вращения с помощью поворота. Этот эффект заставляет ваше изображение или видео поворачиваться под разными углами, когда посетители прокручивают страницу вверх и вниз.
Панорамирование вправо
Добавьте этот эффект для панорамирования фона слева направо, когда посетители прокручивают страницу вниз. Когда они прокручиваются вверх, видео или изображение прокручиваются обратно влево.
Pan Left
Добавьте этот эффект, чтобы перемещать фон справа налево, когда посетители прокручивают страницу вниз. При прокрутке назад видео или изображение прокручиваются вправо.
Увеличить
Увеличивайте изображение/видео по мере того, как посетители прокручивают страницу вниз. Когда они прокручивают вверх, изображение уменьшается.
Уменьшить
Уменьшите масштаб изображения/видео, когда посетители прокручивают страницу вниз. При прокрутке вверх изображение увеличивается.
Fade In
По мере того, как посетители прокручивают страницу вниз, ваш фон исчезает с белого. Когда они прокручивают страницу вверх, изображение, видео или цвет исчезают.
Fade Out
Когда посетители прокручивают страницу вниз, ваш фон становится белым. Когда они снова прокручивают вверх, изображение, видео или цвет исчезают.
Как добавить движение к фоновым изображениям при прокрутке с помощью Divi Встроенные параметры Divi и добавление красивых эффектов движения прокрутки, чтобы вывести ваш дизайн на новый уровень.

Давайте приступим.
- 1
Предварительный просмотр
- 1.1 Фоновое изображение в движении #1
- 1,2 Фоновое изображение в движении № 2
- 2 Загрузите макеты движущегося фона БЕСПЛАТНО
- 3 Скачать бесплатно
- 4 Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
- 5
Общие шаги
- 5.1 Добавить новый раздел
- 5.2 Добавить новую строку
- 5.3 Добавить модуль изображения в столбец 1
- 5.4 Добавить модуль делителя в столбец 1
- 5,5 Добавить текстовый модуль в столбец 1
- 5.
6 Добавьте текстовый модуль № 1 в столбец 2.
- 5.7 Добавьте текстовый модуль № 2 в столбец 2.
- 5,8 Добавить модуль кнопки в столбец 2
- 6
Добавьте движущийся фон № 1 в модуль изображения
- 6.1 Вертикальное движение
- 6.2 Горизонтальное движение
- 6.3 Масштабирование вверх и вниз
- 7
Добавьте движущийся фон № 2 в модуль изображения
- 7.1 Горизонтальное движение
- 7.2 Затухание и исчезновение
- 7.3 вращающийся
- 8
Клонировать строку столько раз, сколько нужно
- 8.1 Изменить фоновое изображение
- 8.2 Изменить содержимое
- 9
Предварительный просмотр
- 9.1 Фоновое изображение в движении #1
- 9.2 Фоновое изображение в движении № 2
- 10 Последние мысли
Предварительный просмотр
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на разных размерах экрана.
Фоновое изображение в движении #1
Рабочий стол
Мобильный
Фоновое изображение движения #2
Рабочий стол
Мобильный
Скачать макеты движущегося фона БЕСПЛАТНО
Чтобы заполучить фоновые макеты со свободной анимацией, вам сначала нужно загрузить их, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку, используя форму ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписываться» или получать дополнительные электронные письма.
Общие шаги
Добавить новый раздел
Начните с добавления нового раздела Divi на страницу, над которой вы работаете.
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
Размер
Пока не добавляя никаких модулей, откройте настройки строки и позвольте строке занимать всю ширину раздела.
- Использовать пользовательскую ширину желоба: Да
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
Интервал
Далее удалить все стандартные верхние и нижние отступы.
- Верхний отступ: 0px
- Нижний отступ: 0px
Интервал между столбцами 2
Затем откройте настройки столбца 2 и добавьте некоторые пользовательские значения заполнения.
- Верхняя обивка: 10vw
- Нижняя прокладка: 10vw
- Левая прокладка: 5vw
- Правая прокладка: 5vw
Добавить модуль изображения в столбец 1
Оставить окно изображения пустым
Время добавлять модули! Чтобы добавить фоновое изображение в наш первый столбец, мы будем использовать пустой контейнер модуля изображения. Размещение фонового изображения в отдельном контейнере модуля поможет нам добавить эффекты прокрутки только к этому элементу. Позже в этом руководстве мы разместим другие модули сверху, используя абсолютную позицию Divi. Убедитесь, что вы оставили поле изображения модуля изображения пустым.
Градиентный фон
Вместо этого добавьте градиентный фон.
- Цвет 1: RGBA(255,255,255,0)
- Цвет 2: #000000
- Тип градиента: Линейный
- Направление градиента: 185 градусов
- Разместить градиент над фоновым изображением: Да
Фоновое изображение
Вместе с фоновым изображением по вашему выбору.
Интервал
Увеличьте высоту модуля, добавив некоторые пользовательские значения отступов.
- Верхняя обивка: 21vw
- Нижняя прокладка: 21vw
Добавить модуль делителя в столбец 1
Видимость
Следующий модуль, который нам нужен в столбце 1, — это модуль делителя. Убедитесь, что опция «Показать разделитель» включена.
- Разделитель шоу: Да
Строка
Далее измените цвет линии модуля.
- Цвет линии: #ffffff
Размер
Измените также настройки размера.
- Вес разделителя: 6 пикселей
- Ширина: 100%
Интервал
Затем добавьте немного верхнего поля для разных размеров экрана.- Верхнее поле: 30 пикселей (настольный компьютер), 20 пикселей (планшет и телефон)
Позиция
И переместите модуль делителя, используя абсолютную позицию Divi.
- Позиция: Абсолютная
- Расположение: Центр
Добавить текстовый модуль в столбец 1
Добавить содержимое h3
Следующий модуль, который нам нужен в первом столбце, — это текстовый модуль с некоторым содержимым h3.
Настройки текста h3
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста h3:
- Шрифт заголовка 2: Raleway
- Вес шрифта заголовка 2: полужирный
- Цвет текста заголовка 2: #ffffff
- Заголовок 2 Размер текста: 70 пикселей (настольный компьютер), 50 пикселей (планшет), 40 пикселей (телефон)
- Цвет тени заголовка 2: rgba(0,0,0,0,95)
Интервал

- Верхний отступ: 150 пикселей
- Нижний отступ: 150 пикселей
Позиция
И переместите модуль на вкладке «Дополнительно».
- Позиция: Абсолютная
- Расположение: Центр
Добавить текстовый модуль №1 в столбец 2
Добавить содержимое h4
Переходим к следующему столбцу. Добавьте первый текстовый модуль с любым содержимым h4 по вашему выбору.
h4 Настройки текста
Перейдите на вкладку дизайна модуля и измените настройки текста h4 следующим образом:
- Шрифт заголовка 3: Raleway
- Размер текста заголовка 3: 50 пикселей (настольный компьютер), 35 пикселей (планшет), 30 пикселей (телефон)
- Высота строки заголовка 3: 1,2 em
Интервал
Добавьте немного нижнего поля.
- Нижнее поле: 50 пикселей
Добавить текстовый модуль № 2 в столбец 2
Добавить контент
Добавьте еще один текстовый модуль прямо под предыдущим с описанием по вашему выбору.
Настройки текста
Измените текстовые настройки модуля следующим образом:
- Шрифт текста: Raleway
- Высота текстовой строки: 2,5em
Добавить кнопочный модуль в столбец 2
Добавить копию
Следующий и последний модуль, который нам нужен в столбце 2, — это модуль кнопок. Введите любую копию по вашему выбору.
Настройки кнопок
Стиль кнопки «Далее».
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 25 пикселей
- Цвет текста кнопки: #000000
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: Raleway
- Толщина шрифта кнопки: Жирный
- Показать значок кнопки: Да
- Цвет значка кнопки: #000000
Интервал
И завершите настройку модуля, добавив немного верхнего поля.
- Верхнее поле: 50 пикселей
Добавить движущийся фон № 1 в модуль изображения
Вертикальное движение
Теперь, на этом этапе, вы можете просто добавить любой эффект прокрутки по вашему выбору в модуль изображения в столбце 1. Чтобы воссоздать первый пример, который был показан в предварительном просмотре этого поста, откройте модуль изображения и используйте следующее настройки вертикального движения:
- Включить вертикальное движение: Да
- Начальное смещение: 0
- Среднее смещение: 0 (при 69%)
- Конечное смещение: -2
Горизонтальное движение
Добавьте горизонтальное движение.
- Включить горизонтальное движение: Да
- Начальное смещение: -2
- Среднее смещение: 0
- Конечное смещение: 0
Масштабирование вверх и вниз
Наряду с масштабируемым эффектом прокрутки вверх и вниз.
- Включить масштабирование вверх и вниз: Да
- Начальный масштаб: 70% (при 21%)
- Средняя шкала: 80% (при 39%)
- Конечная шкала: 100% (при 54%)
Добавить движущийся фон № 2 в модуль изображения
Горизонтальное движение
Если вместо этого вы хотите воссоздать второй пример фонового изображения движения, добавьте следующий эффект горизонтального движения:
- Включить горизонтальное движение: Да
- Начальное смещение: -10
- Среднее смещение: -10 (при 40%)
- Конечное смещение: 0 (при 50%)
Постепенное появление и исчезновение
Также используйте эффект плавного появления и исчезновения:
- Включить постепенное появление и исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 0% (при 35%)
- Конечная непрозрачность: 100% (при 45%)
Вращающийся
И завершите настройку эффекта прокрутки модуля, добавив эффект вращения:
- Включить вращение: Да
- Начальное вращение: 30°
- Среднее вращение: 0° (при 40%)
- Конечный поворот: 0° (при 50%)
Клонировать ряд столько раз, сколько нужно
Как только вы закончите ряд со всеми его модулями, вы можете клонировать весь ряд столько раз, сколько захотите.
Изменить фоновое изображение
Изменить фоновое изображение модуля изображений для каждого дубликата.
Изменить содержимое
Вместе с контентом и готово!
предварительный просмотр
Теперь, когда мы выполнили все шаги, давайте в последний раз посмотрим на результат на разных размерах экрана.
Фоновое изображение в движении #1
Рабочий стол
Мобильный
Фоновое изображение движения #2
Рабочий стол
Мобильный
Последние мысли
В этом уроке мы показали вам, как проявить творческий подход с помощью эффектов прокрутки Divi. Мы воссоздали прекрасный пример с нуля, в котором мы добавили эффекты прокрутки к фоновому изображению. Чтобы добиться этого, мы использовали встроенные в Divi настройки абсолютного положения, и вы также смогли бесплатно загрузить файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.