1473
Создание крутящегося по кругу текста в Тильде.
Содержание
Создание текста в Фигме
Для создания текста по кругу нам понадобится Figma. В фигме добавляем нужный текст.
Далее нам нужно установить плагин. Для этого заходим в Настройки —> Plugins —> Browse plugins in Community.
Вводим название плагина arc и нажимаем Поиск.
Плагин появится в результатах поиска. Нажмите Install.
Когда плагин установится, кнопка поменяется на Installed.
Возвращаемся к нашему тексту в Фигме и применяем плагин. Для этого нажмите на текст правой клавишей мыши и выберите Plugins —> arc.
Появятся настройки скругления текста. Введите процент скругления и нажмите Apply. Визуальное представление в настройках может не совпадать с результатом, поэтому возможно придется несколько раз повторить процедуру, играясь с процентами.
В моем примере цвет текста больше подойдет белый, поэтому я меняю его в настройках.
Когда результат нас устроит, экспортируем полученный текст.
Анимация в Тильде
На сайте добавляем нулевой блок (Zero block).
Нажимаем кнопку Редактировать блок.
Удаляем все элементы в Zero block.
Добавляем фигуру (Add Shape).
Открываем настройки фигуры (settings в правом нижнем углу при выделенной фигуре) и загружаем наш текст.
В настройках блока включаем настройку показа за границами блока.
- Overflow — Visible.
Размещаем нашу фигуру сверху листа.
Рабочую область делаем минимальной по высоте, т.к. наша фигура будет располагаться внахлест на верхнем блоке, этот нам по сути не нужен.
Сохраняем и закрываем Zero block и видим, что наша фигура наложилась на блок выше.
Возвращаемся обратно в Zero block и подгоняем ее по размеру и расположению.
В настройках фигуры добавляем анимацию. В разделе Basic Animation —> Step-by-step animation нажимаем кнопку Add.
Устанавливаем значения:
- Event — block on Screen;
- Loop — Loop.
С помощью кнопки Add step добавляем шаг (Step 1). Для шага 1 устанавливаем значения:
- Duration (скорость выполнения анимации в секундах) — 20;
- Rotate (поворот в градусах) — 360.
Для просмотра анимации нажмите Play Element.
Далее в параметрах фигуры убираем желтый фон и форму фигуры меняем на окружность. Сохраняем и выходим из нулевого блока.
Вот что у нас получилось:
В почему в виде html со стилями не экспортировали?
Алексей, вы можете делать на свое усмотрение)