URL скопирован в буфер обмена!

Как сделать scale эффект для текста при наведении курсора?

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

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Класс для текста
id переменной(см. инструкцию)
Цвет при наведении(опционально)
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD037--><style> .tc-scale .tn-atom span { display:inline-block; transition:all 0.3s ease; white-space: pre-wrap; } .tc-scale .tn-atom span:hover { transform:scale(1.3); color: !important; transition:all 0.3s ease; white-space: pre-wrap; } </style> <script> const TiCodeText = document.querySelectorAll('.tc-scale .tn-atom')[0].textContent; const TiCodeChars = TiCodeText.split(''); const TCSpanChars = TiCodeChars.map(char => { const span = document.createElement('span'); span.textContent = char; return span; }); const TiCodeContainer =document.querySelectorAll('.tc-scale .tn-atom')[0]; TiCodeContainer.innerHTML = ''; TCSpanChars.forEach(span => { TiCodeContainer.appendChild(span); }); undefined </script>
КОПИРОВАТЬ КОД
1. Добавляем в Zero Block текстовый элемент и присваиваем ему класс tc-scale
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. В поле id переменной указываем любое число. Можно оставить 1 если добавляете всего один код себе на сайт

3. При необходимости указываем дополнительные настройки в генераторе:
Цвет при наведении - указываем цвет в формате #000000. При наведении будет происходить увеличении символа и смена цвета

4. Копируем готовый код и вставляем в HTML блок Т123

Примечание! Один код работает только для одного текстового элемента. Если на странице несколько текстовых элементов, необходимо для каждого генерировать свой код с уникальным названием класса и уникальным числом в поле "id переменной"
— Дональд Норман
«Дизайн привычных вещей»
Если без надписей нельзя, меняйте дизайн.”
Made on
Tilda