Как сложить и анимировать текст с помощью эффектов прокрутки Divi

Использование эффектов прокрутки Divi для наложения и анимации текста при прокрутке - это уникальный дизайнерский прием, который можно использовать для оживления заголовков страниц. Хитрость заключается в том, чтобы использовать параметры положения Divi, чтобы расположить буквы таким образом, чтобы они располагались прямо друг на друге. Затем вы можете перемещать буквы по горизонтали и вертикали, используя эффекты прокрутки.

Проверьте это!

Sneak Peek

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

Подпишитесь на наш канал Youtube

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

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

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

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

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

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

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

Как складывать и анимировать текст в Divi

Настройка раздела и строки

Сначала создайте строку из одного столбца для обычного раздела.

Настройки раздела

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

• Цвет фона: rgba (201,245,255,0,35)
• Набивка: 14vw сверху, 14vw снизу

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

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

• Макс ширина: 60%
• Выравнивание строк: по центру
• Высота: 20vw

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

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

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

Начнем с добавления текстового модуля с основным заголовком.

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

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

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

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• Шрифт текста: Bungee Hairline
• Толщина шрифта текста: полужирный
• Размер текста текста: 4vw
• Высота текстовой строки: 1,5 м
• Шрифт заголовка 2: Bungee Shade
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2:
• Размер текста заголовка 2: 12vw
• Ширина: 100%

• Позиция: Абсолютная

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

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

Затем обновите содержимое дублированного текстового модуля, указав первую букву текста заголовка («D»).

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

• Шрифт текста: Bungee Shade
• Толщина шрифта текста: полужирный
• Цвет текста текста: rgba (83,144,193,0,3)
• Размер текста текста: 12vw
• Высота текстовой строки: 1em

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

Текстовый модуль с буквой «D» теперь размещается непосредственно над буквой «D» в первом текстовом модуле. Мы собираемся немного переместить букву при прокрутке, используя комбинацию вертикального и горизонтального движения.

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

На вкладке «Дополнительно» выберите вкладку «Вертикальное движение» и обновите следующее:

• Включить вертикальное движение: ДА
• Начальное смещение: 0 (при 20%)
• Среднее смещение: -0,5 (от 40% до 60%)
• Конечное смещение: 0 (при 80%)

Если вы не знакомы с параметрами эффекта прокрутки в Divi, верхние процентные значения указывают точки местоположения в окне браузера. Каждое процентное значение соответствует приведенным ниже смещениям (начальное, среднее и конечное). Итак, когда пользователь прокручивает, буква «D» начинает анимацию (с начального смещения «0»), когда она достигает 20% от нижней части окна просмотра. Он будет продолжать анимацию (вверх) до тех пор, пока не достигнет 40% от нижней части окна просмотра, а затем будет удерживаться со смещением «-0,5», пока не достигнет 60% от нижней части окна просмотра. Как только он достигнет точки 60%, он начнет анимацию обратно к исходному смещению «0» и прекратит анимацию, когда достигнет 80% от нижней части окна просмотра.

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

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

• Включить горизонтальное движение: ДА
• Начальное смещение: 0 (при 20%)
• Среднее смещение: -0,5 (от 40% до 60%)
• Конечное смещение: 0 (при 80%)

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

Создайте третий текстовый модуль (или букву «D»), скопировав предыдущий текстовый модуль.

Обновить эффекты прокрутки

Затем обновите следующие эффекты прокрутки.

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

• Среднее смещение: -1

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

• Среднее смещение: 1

Обновить цвет текста

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

• Цвет текста текста: rgba (83,144,193,0,5)

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

На этом этапе в представлении рабочего стола выбрать что-то может стать труднее. Разверните режим просмотра каркаса и продублируйте предыдущий текстовый модуль, чтобы создать нашу последнюю букву.

Обновить цвет текста

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

• Цвет текста текста: # 5390c1

Обновить эффекты прокрутки

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

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

• Среднее смещение: -1,5

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

• Среднее смещение: 1,5

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

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

• Маржа: 40vw сверху, 40vw снизу

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

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

Вот он на мобильном телефоне.

Не стесняйтесь экспериментировать с разными шрифтами, используя функцию поиска и замены Divi.

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

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

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

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

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