Глитч текста

14 июня 2016 Антон Кулешов 2533 0

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

О том, как не «склеить ласты» и не заблудиться в «трех доменах»

13 июля 2015 ti1schweiger

Поисковики борются за уникальность контента в сети, и борьба эта, должен сказать, ведется довольно жестко. Сайты-копии полностью или частично повторяющие контент «склеиваются», и в результате в поисковой выдаче мы видим только один из сайтов. С точки зрения борьбы с пиратством – довольно правильное решение, но и вебмастеру надо держать ухо востро.

Кнопки для сайта одним набором

24 июня 2015 Антон Кулешов

Продолжаем прокачивать дизайн наших страниц, и сегодня я хочу обратить ваше внимание на целую палитру красивых кнопок для сайта. «Правильно» расставленные кнопки – это душа продающего сайта, они должны привлекать внимание пользователя, чтобы он не смог покинуть страницу не нажав парочку из них. Маркетинг прочно впился в дизайнерскую часть и его не обойдешь стороной, если конечно вы не содержите захудалый сайт с парой-тройкой посетителей. Красивая и призывная кнопка для посетителя - как красная тряпка для быка, оно вроде ему и не надо, но манит чертовка.

Эффект дождя на JavaScript

2 января 2015 Антон Кулешов

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