Създаването на анимация за превъртане на фона на текст е уникален начин за добавяне на цветни анимирани текстури към вашия текст. уеб сайт докато потребителят превърта страницата. С Divi процесът е изненадващо лесен, след като научите няколко ключови техники.
В този урок ще използваме само мощта на вградените настройки на Divi, за да създадем 3 уникални дизайна, които се отличават с цветна анимация за превъртане на фона на текста. Дори ще ви покажем как да създадете тъмна версия на всеки дизайн за изцяло нов вид.
Нека да започнем!
Възможен резултат
Ето един поглед върху проектите, които ще изграждаме днес.
Дизайн 1: Текстилен градиент на фона с ефект на хоризонтално превъртане
Този първи дизайн ще включва хоризонтален скролиращ ефект, който анимира цветния разделителен модул зад текстов модул с екранния филтър.
Добавете колона
За да започнете, добавете ред с една колона към раздела по подразбиране.
Добавете текстов модул
След това добавете нов текстов модул в колоната.
Съдържание
за съдържание колона, поставете следния HTML код в полето съдържание:
Форматиране на текста
След това актуализирайте дизайна на текст, както следва:
- Цвят на фона: #ffffff
- Текст на шрифта на текста: TT
- Цвят на текста: # 000000
- Размер на текста: 100 px (десктоп), 40 px (телефон)
- Разстояние между текстовите букви: 0.15ем
- Височина на реда на текста: 1em
- Подравняване на текста: център
- Шрифт на заглавието: Merriweather
- Тегло на шрифта на заглавието: удебелен
- Стил на шрифта на заглавието: TT
- Подравняване на заглавния текст: Център
- Цвят на заглавния текст: # 000000
- Размер на заглавния текст: 200px (работен плот), 80px (телефон)
- Разстояние между заглавните букви: 0.15ем
- Височина на заглавния ред: 1em
Подложка и филтър
Сега трябва да добавим малко подложка и филтър на екрана към текстовия модул. Филтърът е необходим, за да работи този дизайн, тъй като той позволява цветовете на фона / модовете да се показват зад текста.
За да добавите запълване и филтър, актуализирайте следното:
- подплънки: 15px високо, 20px ниско
- Режим на смесване: Екран
Забележка: Режимът на смесване на екрана работи най-добре с черен текст на бял фон. Ако искахме да използваме бял текст на черен фон, бихме използвали режима на смесване Multiply.
Горен и долен разделител
След като текстовият ни модул е завършен, нека добавим някои разделители (отгоре и един под текстовия модул) за допълнителен дизайн елемент.
Добавете долен разделител
Добавете нов модул за разделяне под текстовия модул.
По-високи настройки за разделяне
Отворете настройките на разделителя и изберете НЕ за показване на разделителя.
След това актуализирайте фона и дайте на разделителя същия режим на смесване като текстовия модул, както следва:
- Цвят на фона на левия градиент: # 000000
- Цвят на градиентния фон вдясно: #ffffff
- Посока на градиента: 90deg
- Начална позиция: 48%
- Крайна позиция: 0%
- Режим на смесване: Екран
След това актуализирайте височината на разделителя на екрана на телефона, както следва:
- Височина: 15px (телефон)
Добавете горен разделител
За да създадете горния разделител, дублирайте предишния долен разделител и го плъзнете над текстовия модул, като използвате областта за показване на слоевете.
След това обърнете цветовете на градиентния фон.
Актуализиране на параметрите на реда
След като нашите горни и долни разделители са на място, актуализирайте параметрите на реда, както следва:
- Ширина на улука: 1 (за премахване на долните граници между модулите)
- Максимална ширина: 600 пиксела (за запазване на съгласуван дизайн на работния плот и таблета)
- Подравняване на линията: в центъра
- Подплащане: 0px високо, 0px ниско
- Хоризонтално преливане: скрито
- Вертикално преливане: скрито
Създайте разделител за цвета на фона на анимирания текст
Последният елемент от този първи дизайн е разделителят, който ще използваме, за да анимираме цвета на фона на текста на свитъка. За целта добавете нов модул за разделяне под долния разделител.
След това изберете НЕ, за да се покаже разделителят.
Настройки на фоновия делител
Актуализирайте разделителя с градиентен фон, както следва:
- Цвят на фона на левия градиент: # e02b20
- Десен фон на градиента на фона: # 8300e9
- Посока на градиента: 90deg
- Начална позиция: 30%
- Крайна позиция: 70%
Искаме височината на разделителя да бъде достатъчно висока, за да оцвети целия ни текст в текстовия модул и горните и долните разделители. За този дизайн задайте височината на 400px.
- Височина: 400px
След това дайте на разделителя абсолютна позиция, за да го позиционирате директно над останалите модули. Използвайте Z индекса, за да поставите разделителя зад останалите модули.
- Позиция: Абсолютна
- Z индекс: -1
Ефекти на превъртане на фоновия делител
След като разделителят е на мястото си, всичко, което трябва да направим, е да го преместим зад текста, използвайки ефектите за превъртане на Divi. За този дизайн просто ще добавим хоризонтално движение на превъртането.
Актуализирайте следните елементи:
Под раздела Хоризонтално движение ...
бюро
- Активирайте хоризонтално движение: ДА
- Стартово изместване: 6 (при 20%)
- Средно компенсиране: 0 (при 40% -60%)
- Крайна компенсация: -6 (при 80%)
Тел
- Старт компенсира: 3
- Крайна компенсация: -3
Също така, не забравяйте да зададете спусъка за ефекта на движение в средата на клипа:
- Задействане на ефекта на движението: Средата на елемента
Добавете разстояние между секциите
За да създадете временно място за превъртане, за да тествате дизайна, добавете следното към секцията:
- Марж: 80vh отгоре, 80vh отдолу
Заключителни мисли
Показаните в тази статия дизайни за анимация на текстов фон всъщност биха работили добре като статичен дизайн без добавяне на движение на превъртането. Допълнителните скролиращи ефекти обаче наистина извеждат дизайна на съвсем ново ниво. Чувствайте се свободни да експериментирате с повече цветове и ефекти!
Нямам търпение да се чуем в коментарите.
За вашето здраве!
