Фоновой графике на вашем веб-сайте можно дать новую жизнь, добавив движение прокрутки к фоновым маскам и узорам в Divi . Вы уже видели, как творчески смешивать параметры фона Divi, в том числе как сделать два слоя фонового рисунка. Но на данный момент настройки фона Divi теперь включают движение прокрутки.
В этом руководстве мы покажем, как использовать параметры прокрутки Divi для разработки и анимации фоновых масок и узоров (специальный код не требуется). Чтобы добиться этого, мы будем использовать строку Divi для создания плавающего фонового слоя (аналогично тому, что мы сделали здесь), который мы будем использовать для анимации фоновых масок и шаблонов, когда пользователь прокручивает фрагмент текста. Надеюсь, вам это понравится.
Предварительный просмотр дизайна
Вот краткий пример того, как будет выглядеть анимация прокрутки фона в учебнике.
Процедура проектирования
Фон раздела
Для начала мы не будем создавать строку; вместо этого мы обновим раздел конструктора по умолчанию, который уже существует. Нам нужно увеличить вертикальную высоту раздела, чтобы наш дизайн фона заполнил браузер. Добавление минимальной высоты в раздел — простой способ добиться этого.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасОткройте настройки раздела. Обновите отступы и минимальную высоту на вкладке «Дизайн» следующим образом:
- Минимальная высота: 50vw
- Отступы: 0px сверху, 0px снизу
Фоновый градиент для раздела
Теперь мы можем придать сегменту уникальный фоновый градиент. Для этого градиента мы добавим три довольно равномерно расположенных цветовых маркера градиента. Чтобы сосредоточиться на создании анимированных фонов для ряда, мы оставим его базовым.
Перед добавлением первых остановок градиента убедитесь, что настройки раздела открыты на вкладке содержимого. Нажмите, чтобы создать новый градиент после выбора вкладки градиента. Эти два предустановленных цвета градиента будут добавлены. Добавьте следующие точки градиента, каждая со своим цветом и положением:
- Остановка градиента #1: #4158d0 (0%)
- Остановка градиента #2: #c850c0 (при 50%)
- Остановка градиента #3: #ffcc70 (при 100%)
- Направление градиента: 270 градусов
Добавить строки
Добавьте строку из одного столбца в наш раздел, когда он готов. В этом ряду будут использоваться наша фоновая маска и движение прокрутки шаблона.
скопируйте строку, которую вы только что сделали после этого. Мы будем использовать наш материал во втором (дублированном) ряду так же, как обычно. Анимация фоновой прокрутки теперь должна быть в верхнем ряду, а обычный контент — в нижнем ряду.
Настройка строки
Мы можем сосредоточиться на строке, которую мы будем использовать для анимации фоновой прокрутки, теперь, когда градиент фона нашего раздела завершен. Запустите настройки строки. Обновите следующую информацию на вкладке «Дополнительно»:
- Позиция: Абсолют
Таким образом, строка сможет покрыть раздел, не занимая места на странице. Осталось только обновить высоту и ширину, чтобы они полностью охватывали ширину и высоту раздела. В результате будет создано необходимое наложение и наш второй слой дизайна фона.
Обновите параметры размера на вкладке «Дизайн» следующим образом:
- Выровнять высоту столбцов: ДА
- Ширина: 100%
- Максимальная ширина: 100%
- Высота: 100%
- Отступы: 0px сверху, 0px снизу
Строка теперь правильно перекрывает фон всего раздела, даже если вы больше не сможете его видеть.
Фоновый узор
В этом примере мы применим шаблон конфетти в качестве фона строки.
Запустите настройки строки. Обновите следующую информацию на вкладке шаблонов параметра фона:
- Фоновый узор: Конфетти
- Цвет узора: #f6bef7
- Размер узора: нестандартный размер
- Ширина узора: 35vw
- Происхождение повторения шаблона: Центр
Добавить эффекты прокрутки
Установив шаблон фона, теперь мы можем добавить к ряду эффекты прокрутки.
Активируйте вкладку «Дополнительно». Обновите следующее в параметрах эффектов прокрутки:
- Включить горизонтальное движение: ДА
- Начальное смещение: 0,5 (при 0%)
- Среднее смещение: 0 (от 400x025 до 600x025)
- Конечное смещение: -0,5 (при 1000x025)
- Включить масштабирование вверх и вниз: ДА
- Начальный масштаб: 150% (при 0%)
- Средний масштаб: 1000x025 (от 400x025 до 600x025)
- Конечный масштаб: 1500x025 (при 1000x025)
Добавьте фоновую маску
Как только наша строка будет завершена, мы можем перейти к столбцу в той же строке и применить фоновую маску с эффектами прокрутки. Начнем с добавления фоновой маски.
Для этого откройте настройки столбца. Обновите следующее на вкладке маски:
- Маска: блог слоя
- Цвет маски: #ffffff
- Преобразование маски: горизонтальное отражение, инвертирование
Прокрутите эффекты до столбца
Установив нашу фоновую маску, теперь мы можем применить эффекты прокрутки к столбцу. Помните, что эффекты прокрутки родительской строки уже отправлены в столбец. Чтобы еще больше отделить маску от шаблона во время движения прокрутки, все, что нам нужно сделать, это повернуть столбец в направлении, противоположном строке.
Активируйте вкладку «Дополнительно». Обновите следующую информацию, выбрав вкладку «Вращение» в параметрах эффектов прокрутки:
- Включить вращение: ДА
- Начальное вращение: -15 градусов (при 0%)
- Среднее вращение: 0 градусов (от 400x025 до 600x025)
- Конечный поворот: 15 градусов (при 100%)
Скрыть переполнение раздела
Всякий раз, когда движение прокрутки приводит к тому, что строка проходит мимо раздела, он все равно будет виден.
Мы должны скрыть переполнение раздела, чтобы это выглядело лучше. Для этого откройте настройки раздела. Обновите параметры видимости следующим образом на вкладке «Дополнительно»:
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Теперь у нас есть более привлекательный дизайн.
Как только вы добавите контент в соответствии с вашими интересами в раздел, он будет выглядеть намного лучше. Вот как выглядит наш дизайн после добавления контента.
Заключительные слова
Удивительно, но варианты фона Divi упрощают создание таких прекрасных фонов. Кроме того, анимация прокрутки этих дизайнов вместе с эффектами прокрутки Divi дает им новую жизнь.
Для получения дополнительной информации см. наш соответствующий учебник по Divi .
