Как создать эффект прокрутки текста с косой чертой в 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.

Часть 1: Проектирование раздела

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

Фоновый цвет

Для начала добавьте цвет фона в раздел по умолчанию следующим образом:

• Цвет градиента фона слева: # 29c4a9
• Цвет градиента фона справа: # 2b87da

Делитель

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

• Стиль верхнего делителя: см. Снимок экрана
• Цвет разделителя: белый
• Divider Flip: вертикальный

Интервал

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

• Маржа: 80vh сверху, 80vh снизу
• Отступ: 200 пикселей сверху, 200 пикселей снизу.

Тень коробки для дополнительного нижнего пространства

Чтобы получить дополнительный цвет / пространство дизайна в нижней части раздела без ущерба для фактического пространства раздела, мы можем добавить тень блока следующим образом:

• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: 0 пикселей
• Положение прямоугольной тени по вертикали: 100 пикселей
• Цвет тени: # 2b87da

Видимость скрыта

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

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

Часть 2: Создание эффекта косой черты текста

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

Добавить строку для верхней половины текста

Сначала добавим строку из одного столбца.

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

• Ширина желоба: 1
• Padding: 0px сверху, 0px снизу

Видимость столбца скрыта

Затем откройте настройки столбца и обновите переполнение до скрытого:

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

Добавить текстовый модуль

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

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

В области основного содержимого добавьте слово «косая черта».

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

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

• Шрифт текста: B612 Mono
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: TT
• Цвет текста текста: #ffffff
• Размер текста: 150 пикселей (рабочий стол), 100 пикселей (планшет), 60 пикселей (телефон)
• Расстояние между буквами текста: 0,1 м
• Выравнивание текста: по центру

Поле текста

Здесь нам нужно убедиться и добавить нижнее поле, равное половине размера текста.

• Поля: -75 пикселей внизу (рабочий стол), -50 пикселей (планшет), -30 пикселей (телефон)

Добавить строку для нижней половины текста

Повторяющаяся строка

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

Обновить поле текстового модуля

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

• Поля: -75 пикселей сверху (рабочий стол), -50 пикселей сверху (планшет), -30 пикселей сверху (телефон)

Добавить эффекты прокрутки в столбец верхнего ряда

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

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

На вкладке вертикального движения…

• Включить вертикальное движение: ДА
• Начальное смещение: 0 (при 0%)
• Среднее смещение: 0 (при 50%)
• Конечное смещение: -.02 (при 75%)

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

• Включить горизонтальное движение: ДА
• Начальное смещение: 0 (при 0%)
• Среднее смещение: 0 (при 50%)
• Конечное смещение: 0,2 (при 75%)

На вкладке "Поворот"…

• Включить вращение: ДА
• Начальное вращение: 0 (при 0%)
• Среднее вращение: 0 (при 50%)
• Конечное вращение: 1 градус (при 75%)

Теперь наш эффект рубящего текста готов!

Часть 3: Создание движущегося разделителя

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

Вот как это сделать.

Добавить ряд

Добавьте строку из одного столбца под второй строкой.

Добавить модуль разделителя

В столбце добавьте новый модуль разделителя.

Фон разделителя

Затем выберите НЕ, чтобы отображать разделитель. Вместо этого задайте разделителю цвет фона следующим образом:

• Цвет фона градиента слева: прозрачный
• Правый цвет градиента фона: # 29c4a9

Масштаб преобразования

Затем обновите высоту и переместите ее влево, используя опцию трансформации и перевода.

• Высота: 4 пикселя
• Преобразовать преобразовать ось X: -100%

Эффект прокрутки

Теперь добавьте эффект прокрутки, чтобы переместить разделитель вправо.

На вкладке горизонтального движения…

• Включить горизонтальное движение: ДА
• Начальное смещение: -18 (при 25%)
• Среднее смещение: 0 (при 50%)
• Конечное смещение: 13 (при 75%)

Настройки строки

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

• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу
• Позиция: Абсолютная
• Расположение: левый центр
• Индекс Z: 9

Теперь разделитель будет перемещаться слева направо, пересекая середину текста.

Часть 4: Добавление основного текста

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

Добавить ряд

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

Добавить текстовый модуль

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

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

Затем вставьте следующий HTML-код в область тела:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

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

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

• Цвет текста текста: #ffffff
• Цвет текста ссылки: # 121212
• Размер текста ссылки: 20 пикселей

Настройки строки

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

• Ширина желоба: 1
• Максимальная ширина: 400 пикселей
• Позиция: Абсолютная
• Расположение: внизу по центру
• Вертикальное смещение: 20 пикселей (компьютер и планшет), -25 пикселей (телефон)

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

Вот окончательный результат.

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

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

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

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