0 0,00 

Есть вопрос? Звоните!

+7 923 192-46-05

Текст по кругу в Тильде

26.06.2022
2
Текст по кругу в Тильде

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

Содержание

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

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

Текст в фигме

Далее нам нужно установить плагин. Для этого заходим в Настройки —> Plugins —> Browse plugins in Community.

Плагин

Вводим название плагина arc и нажимаем Поиск.

Плагин появится в результатах поиска. Нажмите Install.

Когда плагин установится, кнопка поменяется на Installed.

Возвращаемся к нашему тексту в  Фигме и применяем плагин. Для этого нажмите на текст правой клавишей мыши и выберите Plugins —> arc.

Применение плагина

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

Настройки плагина
Текст по кругу

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

Цвет текста

Когда результат нас устроит, экспортируем полученный текст.

Экспорт

Анимация в Тильде

На сайте добавляем нулевой блок (Zero block).

Zero block

Нажимаем кнопку Редактировать блок.

Редактировать нулевой блок

Удаляем все элементы в Zero block.

Zero block

Добавляем фигуру (Add Shape).

Zero block добавить фигуру

Открываем настройки фигуры (settings в правом нижнем углу при выделенной фигуре) и загружаем наш текст.

Текст
Текст
Текст

В настройках блока включаем настройку показа за границами блока.

  • Overflow — Visible.

Размещаем нашу фигуру сверху листа. 

Overflow

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

Сохраняем и закрываем Zero block и видим, что наша фигура наложилась на блок выше.

Overflow

Возвращаемся обратно в Zero block  и подгоняем ее по размеру и расположению.

В настройках фигуры добавляем анимацию. В разделе Basic Animation —> Step-by-step animation нажимаем кнопку Add.

Устанавливаем значения:

  • Event — block on Screen;
  • Loop — Loop.

С помощью кнопки Add step добавляем шаг (Step 1). Для шага 1 устанавливаем значения:

  • Duration (скорость выполнения анимации в секундах) — 20;
  • Rotate (поворот в градусах) — 360.
Add animation
Add animation
Steps

Для просмотра анимации нажмите Play Element.

Далее в параметрах фигуры убираем желтый фон и форму фигуры меняем на окружность. Сохраняем и выходим из нулевого блока.

Play element
Color circle
Color circle

Вот что у нас получилось:

Читайте также

5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
2 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Алексей

В почему в виде html со стилями не экспортировали?

2
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
0
    0
    Корзина
    Корзина пустаВернуться в магазин