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

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

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

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

Sneak Peek

Вот краткий обзор дизайнов, которые мы создадим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

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

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание текстовой маски с фоновой анимацией в Divi

Добавить ряд

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

Обновить настройки раздела

Перед добавлением каких-либо модулей откройте настройки раздела и обновите цвет фона и отступы следующим образом:

• Цвет фона: # 750046

• Padding: 0px сверху, 0px снизу

Обновить настройки строки

После того, как настройки раздела будут выполнены, откройте настройки для строки и обновите следующие настройки дизайна:

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу

Важно установить ширину желоба на 1 и ширину на 100%, потому что мы собираемся использовать единицу длины vw для нашего текста при создании дизайна текстовой маски. Поскольку единица длины vw зависит от ширины браузера, важно, чтобы родительские контейнеры (секция и строка) имели ту же ширину, что и браузер, что составляет 100%.

Обновить настройки столбца 1

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

Откройте настройки для столбца 1 и обновите следующее:

• Цвет фона: # 750046
• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Создание текстовой маски

Чтобы создать текстовую маску, добавьте текстовый модуль в столбец 1.

Текстовое содержание

Затем добавьте слово «divi» к содержанию основного текста. Мы используем слово из 4 букв, чтобы оно равномерно складывалось для квадратного дизайна.

Текстовый фон

Затем добавьте белый цвет фона к текстовому модулю.

• Цвет фона: #ffffff

Текстовый Дизайн

Затем на вкладке дизайна обновите следующее:

• Шрифт текста: Rubik Mono One
• Стиль шрифта текста: TT
• Цвет текста текста: # 000000
• Размер текста текста: 25vw (рабочий стол), 50vw (планшет и телефон)
• Высота текстовой строки: 0,8 мкм
• Выравнивание текста: по центру

• Набивка: 8vw сверху, 8vw снизу

Режим наложения текста

Чтобы завершить дизайн текстовой маски, добавьте следующий режим наложения:

• Режим наложения: Экран

Пока что четыре ключевых ингредиента для этого эффекта текстовой маски заключаются в следующем:

1. Фон столбца
2. Белый текстовый фон
3. Черный текст
4. Режим наложения экрана в текстовом модуле

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

Добавить фоновое изображение

Чтобы добавить фоновое изображение к текстовой маске, создайте новый модуль изображения и загрузите изображение размером примерно 1700 на 2500 пикселей. Размер изображения важен, чтобы изображение занимало высоту и ширину столбца.

Имидж-дизайн

Затем обновите следующие настройки дизайна:

• Принудительная полная ширина: ДА
• Режим наложения: Экран

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

Положение изображения

Затем придайте изображению абсолютное положение и обновите индекс Z, чтобы оно располагалось за текстовым модулем.

• Позиция: Абсолютная
• Индекс Z: -1

Эффекты прокрутки изображения

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

На вкладке "Вертикальное движение"

• Начальное смещение: -1 (при 0%)
• Среднее смещение: 0 (при 50%)
• Конечное смещение: 1 (при 100%)

На вкладке "Горизонтальное движение"

• Начальное смещение: -0,5 (при 0%)
• Среднее смещение: 0 (при 50%)
• Конечное смещение: 0,5 (при 100%)

На вкладке «Увеличение и уменьшение масштаба» выберите

• Начальный масштаб: 110% (при 0%)
• Средний масштаб: 125% (при 50%)
• Конечный масштаб: 140% (при 100%)

Результат

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

Создание макета текста

В правом столбце добавьте новый текстовый модуль.

Обновите содержимое тела следующим образом:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Затем обновите настройки оформления текста объявления следующим образом:

• Цвет текста: светлый
• Шрифт заголовка 2: Рубик
• Размер текста заголовка 2: 4vw
• Прокладка (рабочий стол): 16vw сверху, 5vw слева, 5vw справа
• Прокладка (планшет): 16vw сверху, 16vw снизу, 5vw слева, 5vw справа

Результат

Дополнительные настройки

Черный фон / белый текст

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

Откройте настройки текстового модуля и измените следующее:

• Цвет фона: # 000000 (черный)
• Цвет текста текста: #ffffff (белый)
• Режим наложения: Умножение

И вот результат ...

Вращающееся изображение PNG

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

Окончательные результаты

Вот еще один взгляд на все дизайны.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!