Как-то я уже писал статью по глитчу – как оказалось, тема очень востребована. Данный вариант я давно хотел отобразить у себя на сайте, так как в нем используются только HTML и CSS3.
Задумка реализации глитча через CSS3 проста, но написание кода с нуля может занять массу времени, поэтому я и решил добавить готовый вариант. Его я нашел на одном англоязычном сайте - css-tricks, там полностью расписывается механизм создания эффекта, используя возможности CSS3. Советую прочитать - очень интересная статья. На странице демо находится сам результат и, как можно заметить, выглядит весьма и весьма годно. Для глитча подключаем стили:
<link href="glitch.css" type="text/css" rel="stylesheet" />
Далее добавляем на HTML страницу разметку:
<div class="glitch" data-text="falbar">falbar</div>
В атрибуте data-text указывается текст для дубляжа основного, поэтому его стоит указывать одинаковым с текстом, выводимым между тегами, если у вас нет какой-то особой задумки на этот счет. К слову, глитчить подобным способом можно не только текст - для этого нужно слегка дописать основной файл CSS, но это уже тема для отдельной статьи.