Резиновый текст

Модификация позволяет добавить эффект резинового текста, который растягивается и расширяется при наведении

Открыть шаблон

Главная

Коллекция

Инструкция по настройке

Шаблон страницы

Как добавить шаблон

74890716

Для корректной работы модификаций подключите библиотеку jQuery:

Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

jQuery

Проверяем совместимость шрифта

Модификация работает только с вариативными шрифтами (variable) в формате .WOFF2
Также, чтобы срабатывал эффект наклона, шрифт должен имеют ось (свойство) "ital"
Проверить наличие можно загрузив ваш шрифт в сервис по кнопке

1 шаг

Открыть сервис

Загружаем шрифт в проект

Для загрузки шрифта в Тильду, переходим в "Настройки сайта", выбираем вкладку "Шрифты" и нажимаем "Загрузить шрифт"
Нажимаем на кнопку "Управлять файлами шрифта"
На открывшейся странице снизу можем нажать на кнопку "Добавить второй шрифт", если у вас уже загружен другой шрифт.
В настройках нажимаем на опции "Загрузить файлы в формате .woff2" и "Загрузить вариативный шрифт"
Загружаем шрифт в соответствующее поле "VARIABLE" для формата .WOFF2
В демонстрации используется шрифт Compressa, скачать его можете по кнопке

2 шаг

Шрифт Compressa

Создаем Zero Block и открываем редактор

Добавляем текстовый элемент
Задаем необходимые размеры и цвет
Задаем элементу класс .pressure-1
Если нужно несколько элементов, задаем им уникальные классы, увеличивая цифру, чтобы получилось .pressure-2, .pressure-3 и т. д.
Увеличиваем ширину элемента, если нужно, чтобы он растягивался в этой области

3 шаг

4 шаг

Добавляем блок T123 и копируем в него код

Скопировать код

5 шаг

Ориентируясь по комментариям в коде, вы можете изменить:

data-hue — Цвет сферы в формате HUE (значение от 0 до 360 меняет цвет)
data-hover-intensity - Сила искажения (из круга в волны) при наведении. Оптимально от 0 до 5
data-rotate-on-hover - Включаем вращение волн при наведении true/false
data-force-hover-state - Включает искажение при наведении. true - сразу включит искажение. false - искажение будет только по ховеру
data-size - Размер сферы

Настраиваем параметры в коде

<!--TS21 - Модификация для Тильды. Резиновый текст https://mod.tistols.com/rubber-text -->
  <script>
      new TextPressure(document.querySelector('.pressure-1'), {
          flex: true, /*Текст всегда заполняет ширину текстового элемента*/
          alpha: false, /*Делает текст прозрачным и при наведении проявляет его из прозрачности*/
          stroke: false, /*Добавляет обводку для букв*/
          width: true, /*Текст всегда заполняет ширину текстового элемента*/
          weight: true, /*При false, отключает расширение текста. */
          italic: true, /*При false, отключает наклон букв*/
          strokeColor: '#ff0000' /*Цвет обводки для букв. Работает, если задать stroke: true*/
      });
      new TextPressure(document.querySelector('.pressure-2'), {
          flex: true,
          alpha: false,
          stroke: false,
          width: true,
          weight: true,
          italic: true,
          strokeColor: '#ff0000'
      });
      
      new TextPressure(document.querySelector('.pressure-3'), {
          flex: true,
          alpha: false,
          stroke: false,
          width: true,
          weight: true,
          italic: true,
          strokeColor: '#ff0000'
      });
  </script>

Вам также может быть интересно: