Setup
Info
Info
Включено в подписку
Скопировано!
Поделиться
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
URL скопирован в буфер обмена!
The glitch effect
Теги
Модификация
#
CSS
#
Текст
#
Модификация позволяет анимировать текст в глитч эффект.
Генератор кода
Глитч эффект
- Открываем Zero Block и заходим в режим редактирования.
- Вставляем текст на страницу и назначаем ему класс: glitch-text
- Далее открываем генератор и заполняем поля. Можете эксперементировать с параметрарми цвета.
- Копируем результат и вставляем его в блок T123 (или любой другой блок с HTML/CSS).
- Дополнительно добавляем блок Т123 и вставляем в него скрипт после кода из генератора.
не доступно
Настройка модификации
id:
<script>
$(function(){
var glitchTextBlock = $('.glitch-text');
if(glitchTextBlock.length > 0) {
glitchTextBlock.each(function(){
var atom = $(this).find('.tn-atom');
atom.clone().addClass('tn-atom_clone-primary').appendTo($(this));
atom.clone().addClass('tn-atom_clone-secondary').appendTo($(this));
})
}
});
</script>
$(function(){
var glitchTextBlock = $('.glitch-text');
if(glitchTextBlock.length > 0) {
glitchTextBlock.each(function(){
var atom = $(this).find('.tn-atom');
atom.clone().addClass('tn-atom_clone-primary').appendTo($(this));
atom.clone().addClass('tn-atom_clone-secondary').appendTo($(this));
})
}
});
</script>
Базовые настройки
- Эффект применяется к текстовому блоку с классом .glitch-text, внутри которого находится элемент .tn-atom.
- Позиционирование → position: absolute; (чтобы можно было накладывать клоны поверх текста)
- Клонирование → с помощью jQuery создаются два дополнительных слоя текста:
- .tn-atom_clone-primary и .tn-atom_clone-secondary (оба копируют оригинальный текст и наслаиваются друг на друга)
- Цвета эффекта →
вторичный сдвиг: text-shadow: -2px 0 #0ffbf9;
(можно менять под цвета проекта)
- Смещение текста →
.tn-atom_clone-secondary { left: -2px; }
(создает эффект “рассинхрона”)
- Анимация → используются два набора @keyframes для имитации искажений:
glitch-text-animation-secondary (2.5s linear infinite alternate)
- Z-index и ширина → оба клона располагаются точно поверх оригинала (position:absolute; top:0; left:0; width:100%; height:100%;)
Технические советы
- Для работы эффекта требуется jQuery (на Тильде он уже подключён).
- Лучше использовать короткие заголовки или надписи — длинные тексты могут давать нагрузку и выглядеть нечитабельно.
- Если текст съезжает, добавь родительскому контейнеру position: relative;, чтобы зафиксировать слой.
- Значения clip: rect() внутри анимаций можно изменять, чтобы усилить или ослабить искажения.
- Для более мягкого эффекта можно уменьшить left смещение или добавить opacity клонам.
- На мобильных устройствах рекомендуется отключить эффект через max-width: 768px чтобы избежать мигания.
Подключение скриптов
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!