Хотите создать фон Divi Хотите создать анимированную прокрутку страниц с помощью масок и узоров? Этот урок для вас...
Добавление анимации прокрутки к Divi Использование фоновых масок и узоров — полезный дизайнерский приём, способный вдохнуть новую жизнь в оформление фона вашего сайта.
В этом уроке мы покажем вам, как создавать и анимировать фоновые маски и узоры, используя параметры прокрутки Divi (без необходимости написания собственного кода).
Для этого мы создадим плавающий фоновый слой, используя линию Divi, который будем применять для анимации фоновых масок и узоров при прокрутке пользователем раздела контента.
Думаем, вам понравится результат.
Давайте начнем!
обследование
Вот наглядная иллюстрация того, как будет выглядеть анимация прокрутки фона в этом уроке.
концепция
Концепция этого дизайна не должна быть слишком сложной для понимания. Начнем с раздела с градиентным фоном.
Далее мы создаём линию, которая позиционируется (абсолютно) так, чтобы она полностью закрывала секцию (как наложение). К строке можно добавить фоновый узор.
Далее мы можем добавить фоновую маску к столбцу.
Затем мы добавляем эффекты прокрутки к строке и столбцу (подобно масштабированию и вращению), что позволит анимировать узор и маску отдельно на фоне раздела.
Когда мы скрываем переполнение раздела, мы видим только анимацию, содержащуюся внутри этого раздела.
Начнем с создания страницы с помощью Divi Builder.
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Как создавать анимированные маски и узоры с прокруткой фона с помощью Divi
Фоновое оформление раздела
Сначала мы проигнорируем создание новой строки и сразу перейдем к изменению существующего раздела по умолчанию в конструкторе тем.
Чтобы наш фоновый дизайн заполнял весь экран браузера, нам нужно добавить вертикальную высоту к этому разделу. Простой способ сделать это — добавить минимальную высоту к разделу.
Откройте настройки раздела. На вкладке Дизайн, обновите минимальную высоту и удалите отступы следующим образом:
- Поле: 80 vh (сверху и снизу)
- Отступы: 0px (сверху и снизу)
Разработка фонового градиента для данного раздела.
Теперь мы можем добавить в этот раздел пользовательский градиентный фон.
Чтобы добавить первые точки градиента, убедитесь, что настройки участка открыты на вкладке. КонтентДалее выберите вкладку Фоновый градиент и нажмите, чтобы добавить новый градиент. Это добавит два цвета градиента по умолчанию. Добавьте следующие точки градиента с цветом и положением следующим образом:
- Остановки градиента:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Затем измените направление линейного градиента:
- Направление градиента: 270 градусов
Добавить строки в раздел
Теперь, когда наш раздел готов, добавьте в него строку с одной колонкой. Эта строка будет использоваться для фоновой маски и анимации прокрутки узора.
Далее, дублируйте строку, которую вы только что создали. Эта вторая (дубликатная) строка будет использоваться для нашего контента, как вы это обычно делаете.
Теперь у вас должна быть верхняя строка для анимации прокрутки фона и строка для обычного содержимого.
Настроить линию
Теперь, когда градиент фона нашего раздела готов, мы можем обратить внимание на линию, которую будем использовать для анимации прокрутки фона.
Откройте настройки линии. На вкладке Фильтр, обновите следующее:
- Позиция: Абсолют
Это позволит линии перекрывать раздел, не занимая при этом никакого фактического пространства в документе.
Теперь нам нужно лишь изменить высоту и ширину так, чтобы они покрывали всю ширину и высоту раздела. Это создаст необходимое нам наложение и второй фоновый слой дизайна.
Под вкладкой Дизайн, обновите параметры размера следующим образом:
- Высота колонн Aquasize: ДА
- Ширина: 100%
- Максимальная ширина: 100%
- Высота: 100%
- Отступы: 0px (сверху и снизу)
Сейчас вы, возможно, не видите эту линию, но она идеально закрывает фон всего участка.
Создайте фоновый узор для линии.
В этом примере мы добавим шаблон Конфетти в качестве фона линии.
Откройте настройки линии. В разделе «Параметры» Предыстория, выберите вкладку Фоновый узор и обновите следующее:
- Фоновый узор: Конфетти
- Шаблон :
- Цвет: #f6bef7
- Размер: Изготовленный на заказ размер
- Ширина: 35 vw
- Повторить начало: центр
ЗАМЕТКА Использование единицы измерения длины VW гарантирует масштабирование рисунка в соответствии с размерами браузера, обеспечивая единообразие и адаптивность дизайна.
Добавить эффекты прокрутки к строке
Теперь, когда фоновый узор готов, мы можем добавить к линии эффекты прокрутки.
Перейти на вкладку ФильтрВ рамках выбранного варианта Эффекты прокрутки, обновите следующее:
Выберите вкладку Горизонтальное движение и обновите следующее:
- Включить горизонтальное движение: ДА
- Начальное смещение: 0,5 (при 0%)
- Среднее смещение: 0 (от 40% до 60%)
- Конечный сдвиг: -0,5 (при 100%)
Это сместит фоновый рисунок линии на 50 пикселей влево и на 50 пикселей вправо.
Выберите вкладку «Масштабирование вверх и вниз» и обновите следующие данные:
- Включить масштабирование вверх и вниз: ДА
- Начальная шкала: 150% (при 0%)
- Средняя шкала: 100% (от 40% до 60%)
- Конечная шкала: 150% (при 100%)
Это позволит изменять фоновый рисунок линии по мере прокрутки.
Выберите вкладку "вращающийся " и обновите следующее:
- Включить вращение: ДА
- Начальное вращение: 10 градусов (при 0%)
- Среднее вращение: 0 градусов (от 40% до 60%)
- Конечный поворот: -10 градусов (при 100%)
КЛЮЧЕВОЙ СОВЕТ: Следует свести вращение к минимуму, иначе есть риск появления пробелов там, где линия не выходит за пределы сечения. Хорошее эмпирическое правило — увеличить масштаб, если вы хотите увеличить вращение. Это позволит линии вращаться над сечением, не обнажая его края.
Добавьте к столбцу фоновую маску с эффектом прокрутки.
После того, как наша строка будет готова, мы можем добавить фоновую маску с эффектом прокрутки к столбцу в той же строке. Для начала добавим фоновую маску.
Для этого откройте настройки столбца. На вкладке Фоновая маска, обновите следующее:
- Маска: Слой-клякса
- Цвет: #ffffff
- Преобразование маски: горизонтальное отражение, инверсия
Добавить эффекты прокрутки в столбец
Теперь, когда фоновая маска на месте, мы можем добавить эффекты прокрутки к столбцу. Имейте в виду, что эффекты прокрутки уже унаследованы от родительской строки.
Все, что мы собираемся сделать, это повернуть столбец в направлении, противоположном ряду, чтобы добиться большего разделения маски и шаблона на время прокрутки.
Перейти на вкладку Фильтр. Под опциями Эффекты прокрутки, выберите вкладку Ротатиng и обновите следующее:
- Включить вращение: ДА
- Начальное вращение: -15 градусов (при 0%)
- Среднее вращение: 0 градусов (от 40% до 60%)
- Конечный поворот: 15 градусов (при 100%)
Скрыть переполнение раздела
В настоящее время линия остается видимой, даже если при прокрутке она выходит за пределы указанного раздела.
Чтобы это исправить, нам нужно скрыть переполнение раздела. Для этого откройте настройки раздела. На вкладке Фильтр, обновите параметры видимости следующим образом:
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Теперь выглядит лучше.
Смотрите также: Divi: 12 комбинаций масок и фоновых рисунков
Добавление контента в строку, созданную для этой цели
На этом этапе фоновая маска и анимация прокрутки узора готовы. Все, что нам нужно сделать, это добавить желаемый контент в строку, которую мы создали ранее для контента.
В этом примере мы добавили фиктивный заголовок, чтобы увидеть, как будет выглядеть фоновая анимация со статическим текстом.
Конечный результат
Давайте посмотрим на конечный результат нашего проекта.
Скачайте DIVI прямо сейчас!!!
Заключение
Удивительно, как легко создавать такие красивые фоны с помощью настроек фона в Divi. Более того, добавление анимации с помощью эффектов прокрутки в Divi вдыхает новую жизнь в эти дизайны.
Для создания другого эффекта вы можете попробовать разные маски и узоры на каждом слое. Если вам нужна дополнительная информация о том, как использовать... маски и узоры Для получения более подробной информации см. эти ссылки. 12 фоновых масок и комбинаций узоров
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...