Глитч эффект для текста в zero block

Модификация добавляет глитч эффект на текст в zero block. Демо решения.

Ограничение: эффект применяется только для текста в одну строку. Если у тебя текст на несколько строк, то нужно каждую строку прописать в отдельном текстовом элементе.

Как сделать

  1. Пропиши текстовому элементу, к которому хочешь применить глитч эффект, название класса: glitch-text. Инструкция по добавлению своего класса элементу.
  2. Укажи в настройках ниже два цвета глитч эффекта.
  3. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/glitch-effekt-text -->
<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>

<style>
.glitch-text {
  position: absolute;
}
.glitch-text .tn-atom_clone-primary,
.glitch-text .tn-atom_clone-secondary {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.glitch-text .tn-atom_clone-primary {
  left: 2px;
  /* Укажи цвет 1 */
  text-shadow: -2px 0 #cc0f39;
  clip: rect(0, auto, auto, 0);
  animation: glitch-text-animation-primary 3s linear infinite alternate;
}
.glitch-text .tn-atom_clone-secondary {
  left: -2px;
  /* Укажи цвет 2 */
  text-shadow: -2px 0 #0ffbf9;
  clip: rect(0, auto, auto, 0);
  animation: glitch-text-animation-secondary 2.5s linear infinite alternate;
}
@keyframes glitch-text-animation-primary {
  0% {
    clip: rect(0.37em, auto, 0.01em, 0);
  }
  5% {
    clip: rect(0.25em, auto, 0.78em, 0);
  }
  10% {
    clip: rect(0.28em, auto, 0.4em, 0);
  }
  15% {
    clip: rect(0.04em, auto, 0.37em, 0);
  }
  20% {
    clip: rect(0.69em, auto, 0.53em, 0);
  }
  25% {
    clip: rect(0.41em, auto, 0.01em, 0);
  }
  30% {
    clip: rect(0.8em, auto, 0.42em, 0);
  }
  35% {
    clip: rect(0.6em, auto, 0.25em, 0);
  }
  40% {
    clip: rect(0.1em, auto, 0.56em, 0);
  }
  45% {
    clip: rect(0.21em, auto, 0.51em, 0);
  }
  50% {
    clip: rect(0.62em, auto, 0.71em, 0);
  }
  55% {
    clip: rect(0.33em, auto, 0.43em, 0);
  }
  60% {
    clip: rect(0.72em, auto, 0.08em, 0);
  }
  65% {
    clip: rect(0.26em, auto, 0.73em, 0);
  }
  70% {
    clip: rect(0.67em, auto, 0.53em, 0);
  }
  75% {
    clip: rect(0.39em, auto, 0.96em, 0);
  }
  80% {
    clip: rect(0.66em, auto, 0.38em, 0);
  }
  85% {
    clip: rect(0.17em, auto, 0.25em, 0);
  }
  90% {
    clip: rect(0.25em, auto, 0.5em, 0);
  }
  95% {
    clip: rect(0.51em, auto, 0.9em, 0);
  }
  100% {
    clip: rect(0.13em, auto, 0.98em, 0);
  }
}
@keyframes glitch-text-animation-secondary {
  0% {
    clip: rect(0.79em, auto, 0.58em, 0);
  }
  2.5% {
    clip: rect(0.07em, auto, 0.35em, 0);
  }
  5% {
    clip: rect(0.41em, auto, 0.4em, 0);
  }
  7.5% {
    clip: rect(0.32em, auto, 0.48em, 0);
  }
  10% {
    clip: rect(0.91em, auto, 0.79em, 0);
  }
  12.5% {
    clip: rect(0.27em, auto, 0.8em, 0);
  }
  15% {
    clip: rect(0.24em, auto, 0.22em, 0);
  }
  17.5% {
    clip: rect(0.29em, auto, 0.08em, 0);
  }
  20% {
    clip: rect(0.01em, auto, 0.97em, 0);
  }
  22.5% {
    clip: rect(0.77em, auto, 0.49em, 0);
  }
  25% {
    clip: rect(0.69em, auto, 0.55em, 0);
  }
  27.5% {
    clip: rect(0.24em, auto, 0.25em, 0);
  }
  30% {
    clip: rect(0.63em, auto, 0.61em, 0);
  }
  32.5% {
    clip: rect(0.17em, auto, 0.35em, 0);
  }
  35% {
    clip: rect(0.82em, auto, 0.41em, 0);
  }
  37.5% {
    clip: rect(0.49em, auto, 0.76em, 0);
  }
  40% {
    clip: rect(0.58em, auto, 0.55em, 0);
  }
  42.5% {
    clip: rect(0.93em, auto, 0.06em, 0);
  }
  45% {
    clip: rect(0.85em, auto, 0.49em, 0);
  }
  47.5% {
    clip: rect(0.19em, auto, 0.85em, 0);
  }
  50% {
    clip: rect(0.31em, auto, 0.84em, 0);
  }
  52.5% {
    clip: rect(0.68em, auto, 0.32em, 0);
  }
  55% {
    clip: rect(0.58em, auto, 0.25em, 0);
  }
  57.5% {
    clip: rect(0.66em, auto, 0.18em, 0);
  }
  60% {
    clip: rect(0.73em, auto, 0.12em, 0);
  }
  62.5% {
    clip: rect(0.2em, auto, 0.71em, 0);
  }
  65% {
    clip: rect(0.41em, auto, 0.77em, 0);
  }
  67.5% {
    clip: rect(0.9em, auto, 0.09em, 0);
  }
  70% {
    clip: rect(0.86em, auto, 0.06em, 0);
  }
  72.5% {
    clip: rect(0.08em, auto, 0.82em, 0);
  }
  75% {
    clip: rect(0.49em, auto, 0.85em, 0);
  }
  77.5% {
    clip: rect(0.92em, auto, 0.98em, 0);
  }
  80% {
    clip: rect(0.15em, auto, 0.71em, 0);
  }
  82.5% {
    clip: rect(0.34em, auto, 0.36em, 0);
  }
  85% {
    clip: rect(0.69em, auto, 0.7em, 0);
  }
  87.5% {
    clip: rect(0.38em, auto, 0.79em, 0);
  }
  90% {
    clip: rect(0.94em, auto, 0.7em, 0);
  }
  92.5% {
    clip: rect(0.88em, auto, 0.26em, 0);
  }
  95% {
    clip: rect(0.78em, auto, 0.97em, 0);
  }
  97.5% {
    clip: rect(0.74em, auto, 0.39em, 0);
  }
  100% {
    clip: rect(0.54em, auto, 0.85em, 0);
  }
}
</style>
Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!
Если возникли трудности с применением модификации, напиши мне в Telegram. Помогу разобраться