Хотите создать фон Divi анимация при прокрутке страницы благодаря маскам и узорам? Этот урок для вас...
Добавление анимации прокрутки в Divi а его фоновые маски и узоры — полезный совет по дизайну, который может вдохнуть новую жизнь в ваш фоновый дизайн. Веб-сайт.
В этом уроке мы покажем вам, как создавать и анимировать маски и фоновые узоры, используя параметры прокрутки Divi (пользовательский код не требуется).
Для этого мы создадим плавающий фоновый слой, используя линию Divi который мы будем использовать для анимации масок и фоновых рисунков, когда пользователь прокручивает раздел содержание.
Думаем, вам понравится результат.
Давайте начнем!
обследование
Вот краткая иллюстрация того, как будет выглядеть фоновая анимация прокрутки для этого урока.
концепция
Концепция этого дизайна не должна быть слишком сложной для понимания. Начнем с раздела с градиентным фоном.
Затем мы создаем линию, которая позиционируется (абсолютно) так, чтобы она полностью покрывала секцию (как наложение). Мы можем добавить фоновый узор к ряду.
Далее мы можем добавить фоновую маску к столбцу.
Затем мы добавляем эффекты прокрутки для строки и столбца (например, масштаб и вращение), которые будут анимировать шаблон и маску отдельно на фоне раздела.
Когда мы скрываем переполнение раздела, мы видим только анимацию, содержащуюся в разделе.
Начнем с создания страницы с помощью Divi Builder.
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Divi строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Как создавать прокручивающиеся анимированные фоновые маски и узоры с помощью Divi
Дизайн фона раздела
Во-первых, мы пропустим создание строки и сразу перейдем к редактированию существующего раздела по умолчанию в конструкторе тем.
Чтобы наш фоновый дизайн заполнил браузер, нам нужно добавить вертикальную высоту к разделу. Простой способ сделать это — добавить минимальную высоту секции.
Откройте настройки раздела. Под вкладкой Проект, обновите минимальную высоту и удалите отступы следующим образом:
- Поле: 80 vh (сверху и снизу)
- Отступы: 0px (сверху и снизу)
Создание фонового градиента для раздела
Теперь мы можем добавить собственный фоновый градиент к разделу.
Чтобы добавить первые остановки градиента, убедитесь, что настройки раздела открыты на вкладке Содержание. Затем выберите вкладку Фоновый градиент и нажмите, чтобы добавить новый градиент. Это добавит два цвета градиента по умолчанию. Добавьте следующие точки градиента с цветом и положением следующим образом:
- Остановки градиента:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Затем измените направление линейного градиента:
- Направление градиента: 270 градусов
Добавить строки в раздел
Теперь, когда наш раздел на месте, добавьте в раздел строку с одним столбцом. Эта линия будет использоваться для нашей фоновой маски и анимации прокрутки узора.
Затем продублируйте только что созданную линию. Эта вторая (дублированная) строка будет использоваться для нашего содержание как обычно.
Теперь у вас должна быть верхняя строка для фоновой анимации прокрутки и строка для содержание Normal.
Настроить линию
Теперь, когда у нас есть готовый градиент фона нашего раздела, мы можем обратить внимание на линию, которую мы собираемся использовать для нашей анимации фона при прокрутке.
Откройте настройки линии. Под вкладкой Фильтр, обновите следующее:
- Позиция: Абсолют
Это позволит линии перекрывать раздел, не занимая реального места в документе.
Теперь все, что нам нужно сделать, это обновить высоту и ширину, чтобы они охватывали всю ширину и высоту раздела. Это создаст необходимое нам наложение и наш второй фоновый слой дизайна.
Под вкладкой Проект, обновите параметры размера следующим образом:
- Высота колонн 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
