Анимация перемешивания текста

Добавляет эффект перемешивания букв в тексте с запуском по скроллу или нажатию определенной кнопки.

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

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Задайте тексту, для которого хотите применить эффект, класс .uc-shuffle
    Если вы планируете использовать на странице несколько текстовых элементов с таким эффектом, задайте им разные классы, например, .uc-shuffle1, .uc-shuffle2 и т. д.
    Как задать класс элементам?
  • Чтобы эффект запускался по кнопке, задайте ей ссылку #shuffle
    Для нескольких текстовых элементов на странице, по аналогии, задайте разные названия ссылок и укажите их в настройках модификации.
  • Задайте в настройках модификации параметры анимации текста
  • Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано?
<!--shuffle.js Анимация перемешивания текста. https://postnikovmd.com/mods/shuffle-->
<script>shuffle.init('.uc-title')</script>
Настройки модификации

Настройки модификации

Класс текстового элемента
Длительность анимации
Ссылка для запуска анимации
<!--shuffle.js Анимация перемешивания текста. https://postnikovmd.com/mods/shuffle-->
<script>shuffle.init(".uc-shuffle")</script>
Скопировать код
Скопировать код
Код скопирован!

Особенности

  • Работает с автоскейлом
    Мод работает корректно как с масштабированием, так и без него
  • Запускается по триггеру
    Если текстовый элемент находится в видимой зоне экрана
  • Запускается по кнопке
    Анимация будет срабатывать при нажатии на заданную кнопку

Документация

Элементы

Параметры

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению