Как добавить SVG-анимацию кругового текста в ваш дизайн Divi

Опубликовано: 2021-07-07

Идти в ногу с тенденциями в области веб-дизайна - один из лучших способов оставаться в курсе последних событий как веб-дизайнер. Он позволяет создавать современные веб-сайты, которые впечатлят ваших клиентов и помогут вывести ваши навыки на новый уровень. В сегодняшнем руководстве мы покажем вам, как познакомиться с тенденцией, которую вы часто наблюдаете в наши дни на продвинутых веб-сайтах; круговая текстовая SVG-анимация. Мы покажем вам, как добавить их в дизайн вашей страницы Divi и даже использовать их как кнопку. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

круг текст svg анимация

Мобильный

круг текст svg анимация

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

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

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

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

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

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

Создать дизайн героя

Добавить новый раздел

Фоновый цвет

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

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

круг текст svg анимация

Интервал

Затем перейдите к настройкам интервалов и измените значения верхнего и нижнего отступов.

  • Верхний отступ: 30 пикселей
  • Нижний отступ: 30 пикселей

круг текст svg анимация

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

круг текст svg анимация

Размеры

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

  • Ширина: 95%
  • Максимальная ширина: 2580 пикселей

круг текст svg анимация

Столбец 1 Настройки

После того, как общие настройки строки настроены, вы можете перейти к открытию настроек первого столбца.

круг текст svg анимация

Фоновая картинка

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

  • Размер фонового изображения: обложка
  • Положение фонового изображения: по центру
  • Повтор фонового изображения: без повтора

круг текст svg анимация

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

Добавить контент H1

Пора добавить модули, начиная с первого текстового модуля в столбце 2. Добавьте контент H1 по вашему выбору, если вы используете этот раздел в качестве героя, или контент H2, если вы используете его где-нибудь еще на своей странице.

круг текст svg анимация

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

Далее задайте стиль настройки текста заголовка этого модуля.

  • Шрифт заголовка: Playfair Display
  • Цвет текста заголовка: # 212121
  • Размер текста заголовка:
    • Рабочий стол: 100 пикселей
    • Таблетка: 60 ​​пикселей
    • Телефон: 45 пикселей

круг текст svg анимация

Размеры

Затем перейдите к настройкам размеров и примените максимальную ширину.

  • Максимальная ширина: 600 пикселей

круг текст svg анимация

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

Добавить содержимое

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

круг текст svg анимация

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

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

  • Шрифт текста: Монтсеррат
  • Размер текста: 15 пикселей
  • Высота текстовой строки: 2em

круг текст svg анимация

Размеры

Также используйте максимальную ширину в настройках размера.

  • Максимальная ширина: 520 пикселей

круг текст svg анимация

Интервал

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

  • Верхнее поле:
    • Рабочий стол: 20vh
    • Планшет и телефон: 50 пикселей
  • Левый отступ: 5%

круг текст svg анимация

Граница

Мы также включаем левую границу в настройки границы.

  • Ширина левой границы: 2 пикселя
  • Цвет левой границы: # 000000

круг текст svg анимация

Добавить текстовую SVG-анимацию

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

Теперь, когда мы создали основу для дизайна раздела, мы можем сосредоточиться на создании текстовой SVG-анимации в виде круга. Чтобы добавить текстовую SVG-анимацию в виде круга, мы собираемся использовать модуль кода в столбце 1. Продолжайте и добавьте его.

круг текст svg анимация

Добавить ссылку

Если вы хотите, чтобы эта анимация SVG с круговым текстом была интерактивной, вы можете добавить URL-адрес по вашему выбору в настройках ссылки модуля.

круг текст svg анимация

Размеры

Убедитесь, что ширина модуля также установлена ​​на «100%» в настройках размера.

  • Ширина: 100%

круг текст svg анимация

Добавить круговые и текстовые SVG в поле кода

Вернитесь к окну кода на вкладке содержимого. Здесь мы сначала добавим SVG круга и текстовый путь, используя следующий HTML-код: 

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

круг текст svg анимация

Стилизация SVG с помощью CSS

Конечно, нам нужно будет стилизовать текстовый путь SVG, чтобы он соответствовал нашему дизайну. Мы также следим за тем, чтобы SVG был установлен на «100%». Вставьте следующие строки кода CSS в поле кода между тегами стиля: 

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

круг текст svg анимация

Добавить HTML-теги AnimateTransform

Теперь, чтобы создать бесконечное вращение для нашего текста, мы собираемся использовать элемент преобразования анимации, который позволяет нам создавать анимацию без необходимости во внешнем коде JavaScript. Вот атрибуты, которые мы назначаем нашему SVG:

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

Вы можете изменить эти атрибуты, как хотите, чтобы создать анимацию по вашему выбору. Обратите внимание, как последний атрибут, repeatCount, установлен на «неопределенный». Это позволяет нам создать бесконечный цикл вращения для нашего SVG.

круг текст svg анимация

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

Конечно, вы захотите изменить текст, чтобы он соответствовал вашему собственному веб-сайту, вы можете легко сделать это между тегами текстового пути. Однако, как только вы измените длину копии, вам нужно будет изменить настройки, чтобы создать идеальный круг. Вы можете поиграть со значением «dy», которое указывает на сдвиг по оси Y, и изменить размер шрифта и межбуквенный интервал в текстовом пути, пока не получите желаемый результат. Вот и все!

круг текст svg анимация

Предварительный просмотр

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

Рабочий стол

круг текст svg анимация

Мобильный

круг текст svg анимация

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

В этом посте мы показали вам, как поддерживать ваш сайт в соответствии с тенденциями дизайна. В частности, мы показали вам, как создать SVG-анимацию с круговым текстом и элегантно использовать ее в своем дизайне Divi. Как только вы освоите подход, вы сможете использовать этот элемент для отображения любого текста, который хотите, и настроить его под свой собственный дизайн. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

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