Показать Меню
falbar Глитч текста

Глитч текста

Глитч текста

Как-то я уже писал статью по глитчу – как оказалось, тема очень востребована, поэтому я написал, ко всему, и свой собственный онлайн глитч генератор на JavaScript, который Вы можете наблюдать во вкладке сервисов. В будущем, скорее всего я его переделаю и улучшу, а сегодня я решил добавить ещё один способ реализации глитч эффекта. Данный вариант я давно хотел отобразить у себя на сайте, так как в нем используются только HTML и CSS3.

Задумка реализации глитча через CSS3 проста, но написание кода с нуля может занять массу времени, поэтому я и решил добавить готовый вариант. Его я нашел на одном англоязычном сайте - ссылка в конце статьи, там полностью расписывается механизм создания эффекта, используя возможности CSS3. Советую прочитать - очень интересная статья. На странице демо находится сам результат и, как можно заметить, выглядит весьма и весьма годно. Для глитча подключаем стили:

<link href="glitch.css" type="text/css" rel="stylesheet" />

Далее добавляем на HTML страницу разметку:

<div class="glitch" data-text="Фалбар">Фалбар</div>

В атрибуте data-text указывается текст для дубляжа основного, поэтому его стоит указывать одинаковым с текстом, выводимым между тегами, если у Вас нет какой-то особой задумки на этот счет. К слову, глитчить подобным способом можно не только текст - для этого нужно слегка дописать основной файл CSS, но это уже тема для отдельной статьи.

Источник
css-tricks.com

Подписаться на обновления

Комментариев еще не оставлено