Глитч эффект для текста в zero block
Модификация добавляет глитч эффект на текст в zero block. Демо решения.
Ограничение: эффект применяется только для текста в одну строку. Если у тебя текст на несколько строк, то нужно каждую строку прописать в отдельном текстовом элементе.
Ограничение: эффект применяется только для текста в одну строку. Если у тебя текст на несколько строк, то нужно каждую строку прописать в отдельном текстовом элементе.
Как сделать
- Пропиши текстовому элементу, к которому хочешь применить глитч эффект, название класса: glitch-text. Инструкция по добавлению своего класса элементу.
- Укажи в настройках ниже два цвета глитч эффекта.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- 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>Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!