Легко Создайте свой сайт сегодня!

ELEMENTOR — самый простой в мире конструктор блогов!

останавливаться трата времени и много денег платить разработчику, когда вы можете Легко создайте свой веб-сайт или блог WordPress с профессиональным дизайном всего несколько минут ! Никаких технических знаний не требуется.

Хотите создать фон Дива анимация при прокрутке страницы благодаря маскам и узорам? Этот урок для вас...

Добавление анимации прокрутки в Дива а его фоновые маски и узоры — полезный совет по дизайну, который может вдохнуть новую жизнь в ваш фоновый дизайн. Веб-сайт

В этом уроке мы покажем вам, как создавать и анимировать маски и фоновые узоры, используя параметры прокрутки Дива (пользовательский код не требуется). 

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

Думаем, вам понравится результат.

Давайте начнем!

обследование

Вот краткая иллюстрация того, как будет выглядеть фоновая анимация прокрутки для этого урока.

анимированный фон Divi при прокрутке страницы благодаря маскам и узорам

концепция

Концепция этого дизайна не должна быть слишком сложной для понимания. Начнем с раздела с градиентным фоном.

спроектировать анимированный фон Divi при прокрутке страницы с помощью масок и узоров

Затем мы создаем линию, которая позиционируется (абсолютно) так, чтобы она полностью покрывала секцию (как наложение). Мы можем добавить фоновый узор к ряду.

Далее мы можем добавить фоновую маску к столбцу.

Затем мы добавляем эффекты прокрутки для строки и столбца (например, масштаб и вращение), которые будут анимировать шаблон и маску отдельно на фоне раздела.

спроектировать анимированный фон Divi при прокрутке страницы с помощью масок и узоров

Когда мы скрываем переполнение раздела, мы видим только анимацию, содержащуюся в разделе.

анимированный фон Divi при прокрутке страницы благодаря маскам и узорам

Начнем с создания страницы с помощью Divi Builder.

Для начала вам нужно будет сделать следующее:

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

спроектировать анимированный фон Divi при прокрутке страницы с помощью масок и узоров

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

#image_title

Затем нажмите Начать строительство (Построить с нуля)

спроектировать анимированный фон Divi при прокрутке страницы с помощью масок и узоров

После этого у вас будет чистый холст, чтобы начать проектирование в 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%)

Это позволит масштабировать фоновый рисунок строки при прокрутке.

Как анимировать маски и фоновые узоры при прокрутке с помощью Divi

Выберите вкладку « вращающийся  » и обновите следующее:

  • Включить вращение: ДА
  • Начальное вращение: 10 градусов (при 0%)
  • Среднее вращение: 0 градусов (от 40% до 60%)
  • Конечный поворот: -10 градусов (при 100%)

КЛЮЧЕВОЙ СОВЕТ: Вам нужно свести поворот к минимуму, иначе вы рискуете показать пробелы, когда линия не выходит за пределы раздела. Хорошее эмпирическое правило — увеличить масштаб, если вы хотите увеличить вращение. Это позволит линии поворачиваться над секцией, не обнажая края.

Добавить фоновую маску с эффектами прокрутки в столбец

Как только наша строка будет завершена, мы готовы добавить фоновую маску с эффектами прокрутки к столбцу той же строки. Для начала давайте добавим фоновую маску.

Для этого откройте настройку столбца. Под вкладкой Фоновая маска, обновите следующее:

  • Маска: Слой-клякса
  • Цвет: #ffffff
  • Преобразование маски: горизонтальное отражение, инверсия

Добавить эффекты прокрутки в столбец

Теперь, когда наша фоновая маска на месте, мы можем добавить к колонке эффекты прокрутки. Имейте в виду, что столбец уже имеет эффекты прокрутки, унаследованные от родительской строки. 

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

Перейти на вкладку Дополнительно. Под опциями Эффекты прокрутки, выберите вкладку Ротатиng и обновите следующее:

  • Включить вращение: ДА
  • Начальное вращение: -15 градусов (при 0%)
  • Среднее вращение: 0 градусов (от 40% до 60%)
  • Конечный поворот: 15 градусов (при 100%)

Скрыть переполнение раздела

В настоящее время линия остается видимой всякий раз, когда прокрутка приводит к тому, что она выходит за пределы раздела.

анимированный фон Divi при прокрутке страницы благодаря маскам и узорам

Чтобы это исправить, нам нужно скрыть переполнение раздела. Для этого откройте настройки раздела. Под вкладкой Дополнительно, обновите параметры видимости следующим образом:

  • Горизонтальное переполнение: скрыто
  • Вертикальное переполнение: скрыто

Теперь это выглядит лучше.

анимированный фон Divi при прокрутке страницы благодаря маскам и узорам

Смотрите также: Divi: 12 комбинаций масок и фоновых рисунков

Добавление контента в строку, созданную для этой цели

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

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

спроектировать анимированный фон Divi при прокрутке страницы с помощью масок и узоров

Конечный результат

Давайте посмотрим на конечный результат нашего дизайна.

анимированный фон Divi при прокрутке страницы благодаря маскам и узорам

Скачайте DIVI прямо сейчас!!!

Заключение

Удивительно, как легко создавать такие красивые фоны с параметрами фона Divi. Кроме того, добавление анимации с эффектами прокрутки Divi вдохнет новую жизнь в эти проекты.

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

Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.

Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

%d блоггеры, как этой странице: