Иногда на модных сайтах и в рекламных роликах можно встретить интересный эффект. Текст как будто немного нестабилен: дрожит, странно моргает и как-то сдвигается и сразу возвращается на место. Как будто кто-то теребит кабель подключения монитора. Это называется глитч, от английского glitch — сбой или глюк.
Сегодня мы сделаем нечто подобное, используя препроцессор SASS — один из любимых инструментов фронтенд-разработчиков. Формат записи выберем SCSS — так процесс будет выглядеть проще и понятнее. Заодно и попрактикуемся в новом языке.
Как мы это сделаем
- Нам понадобится простая HTML-страница, на которой мы разместим текст.
- Этот текст мы поместим в специальный блок , к которому будем применять глитч-эффекты. Чтобы CSS понял, с чем ему нужно работать, у блока должно быть имя.
- Настроим CSS-стили. Так браузер поймёт, как ему нужно отобразить этот текст, чтобы проявилась магия глитча.
- Работать с CSS будем с помощью препроцессора SASS — это почти тот же CSS, только с дополнительными возможностями.
Важное замечание: SCSS-код нельзя просто вставить в HTML-страницу — браузер не поймёт, что вы имели в виду, и будет обрабатывать это как обычный CSS-код. Когда работают с препроцессорами, перед публикацией страницы код преобразуют в привычный CSS-формат, который и вставляют в раздел или сохраняют как обычный .css-файл. Чтобы вы могли вставить готовый код, мы сами преобразуем его из SCSS в CSS и выложим в конце статьи.
Как наложить и убрать эффекты с помощью командных блоков
Готовим HTML-код
Самый простой этап. Мы просто берём наш шаблон пустой страницы и вставляем в него заголовок :
Делаем специальную разметку
У нас пока на странице есть просто заголовок первого уровня. Но для глитч-эффекта нужно этот заголовок поместить в блок и дать ему новый класс, он будет отвечать за эффект в целом. Сами визуальные фишки мы пропишем во вложенном элементе , которому тоже присвоим новый класс.
Сделаем это так:
Журнал «КОД»
Теперь нужно настроить внешний вид страницы и добавить сами эффекты.
Настраиваем внешний вид страницы
Чтобы эффект был похож на тот, что мы видели на картинке в самом начале, сделаем фон чёрным, а текст — белым и выровняем по центру:
* < /*убираем отступы*/ margin: 0; padding: 0; >body, html < /*пусть страница занимает всё место в окне браузера*/ width: 100%; height: 100%; >body < /*делаем чёрный фон*/ background-color: #000; >/*стиль нашего блока*/ .box < /*говорим браузеру, что все элементы этого класса должны быть по центру окна*/ display: flex; justify-content: center; align-items: center; /*блок будет занимать всё доступное место по высоте*/ height: 100%; .glitch < color: #fff; font-family: «Arial», sans-serif; font-weight: 600; font-size: 100px; position: relative; padding: 30px; >>
Что тут происходит:
- Так как это препроцессор, то мы используем упрощённый способ записи CSS-кода.
- Звёздочка в самом начале говорит о том, что эти стили применяются к каждому элементу, чтобы ни у кого не было отступов.
- После этого мы задали стили для всего документа и содержимого страницы — сказали, что проект должен занимать всё свободное пространство в окне браузера.
- Отдельно указали, что фон должен быть чёрным.
- Рассказали браузеру, как должен выглядеть блок с классом box .
- Внутри класса box мы объявили класс glitch — он у нас отвечает за стиль самого заголовка. В нём мы прописали белый цвет для текста и сделали его жирнее, но это не всё, что там должно быть. Остальное добавим на следующем шаге.
как убрать пузырьки с зелья в Майнкрафт PE
Как устроен глитч-эффект
Чтобы добиться эффекта искажения, разработчики используют псевдоклассы :before и :after — они показывают тот же самый текст, но позади или спереди основного, который у нас прописан в . Псевдоэлемент означает, что его как бы нет на самом деле, но браузер может с ним работать так, как будто он есть.
Эффект получается в том случае, когда координаты основного и псевдотекста не совпадают и он вроде как проглядывает через основной текст. Чтобы так сделать, мы будем брать координаты основного текста, фиксировать их, а потом смещать на какое-то расстояние. Чем больше расстояние — тем сильнее эффект.
Запишем то, что мы только что сказали, на SCSS, и сделаем это внутри класса glitch :
:after < content: «Журнал «КОД»»; color: #fff; position: absolute; top: 0; overflow: hidden; padding: 30px; > left: 3px; text-shadow: -3px 0 red; animation: glitch-before 2s linear 0s infinite alternate; >:before и Presets». Тут мы должны найти эффект под названием Displacement Map. Его вы должны наложить на Adjustment Layer.
Теперь, в подробных настройках эффекта, выбираем не Adjustment Layer, а название нашей картинки с глитчем. Посмотрите на скрин ниже, как вы видите, уже появляется что-то похожее на глитч.
Теперь нужно добавить сюда эффект с картинки, которую мы скачали ранее. Для этого заходим в верхнее рабочее меню, находим там Channel, а после – Set Channels.
Далее дважды копируем наш текст (Ctrl+c – Сtrl+v).
На первом настраиваем изображение вот так:
На втором вот так:
А на третьем вот так:
Далее вы увидите, что цвет вашего текста поменялся. Далее вам нужно перейти в меню (ПКМ), выбрать пункт Blending Mode, и в открывшейся таблице выбрать пункт Screen.
Это все вы делаете с каждым скрином.
Собственно, эффект Скрин не только вернет старый цвет тексту, он еще позволит вам немного изменить местоположение картинки. Делается это при помощи стрелочек на клавиатуре.
Вам остается только посмотреть, насколько крутой получилась ваша анимация (ну или с чем вы там работали). Выглядит достаточно эффектно. Всем спасибо за доверие, удачи и до новых встреч.
Источник: adobeuroki.ru
Глитч-арт
Эффект Глитч-арт позволяет добавлять цифровые помехи и искажения, создавать иллюзию испорченной картинки. В реальности такие помехи появляются из-за ошибок при воспроизведении цифровых записей, технических сбоев и физических повреждений носителя.
Глитч-арт
(Наведите курсор мыши, чтобы увидеть исходное изображение)
Параметры эффекта представлены в двух закладках: Помехи и Полосы и сдвиги.
Закладка Помехи
Сдвиг каналов (-100..100). Движки данной группы разделяют и смещают цветовые компоненты изображения, формируя дополнительные цветные контуры (так называемый анаглиф-эффект).
Красный. Смещение красного канала.
Зелёный. Смещение зелёного канала.
Красный канал
Зелёный канал
Синий канал
Полосы развёртки. Растровые линии, которые имитируют телепомехи.
Метод наложения полос: Перекрытие или Мягкий свет. Изменяет степень контрастности между линиями и изображением.
Перекрытие
Мягкий свет
Ширина (1-20). Толщина полос.
Ширина = 5
Ширина = 20
Резкость (0-50). Чёткость края полос.
Резкость = 0
Резкость = 50
Интенсивность (0-100). Степень проявления полос. При 0 полосы отсутствуют.
Интенсивность = 25
Интенсивность = 75
Шум. Добавление помех в виде точек.
Интенсивность шума (0-100). Степень проявления шума.
Интенсивность шума = 0
Интенсивность шума = 100
Закладка Полосы и сдвиги Эффект во всей области
Исключённая область
Свободная от полос область
Размер и положение. Группа параметров, отвечающих за геометрию полос.
Минимальная/Максимальная высота (1-200). Диапазон, в пределах которого изменяется высота полос.
Минимальная/Максимальная высота = 1/10
Минимальная/Максимальная высота = 50/100
Минимальная/Максимальная длина (20-200). Диапазон, в пределах которого изменяется длина полос.
Минимальная/Максимальная длина = 20/30
Минимальная/Максимальная длина = 190/200
Смещение (0-100). Величина сдвига (для простых и инвертированных полос).
Смещение = 0
Смещение = 15
Простые сдвиги (0-100). Число полос, которые образованы смещёнными прямоугольниками.
Простые сдвиги = 60
Простые сдвиги = 90
Простые растяжения (0-100). Число полос, которые образованы растяжением прямоугольников.
Простые растяжения = 60
Простые растяжения = 90
Коэффициент растяжения (12-20). Диапазон разброса множителей длины для простых растяжений.
Коэффициент растяжения = 12/12
Коэффициент растяжения = 14/15
Полосы инверсии (0-100). Число полос с инверсией цвета.
Полосы инверсии = 40
Полосы инверсии = 60
Чек-бокс Вертикально — вместо горизонтальных эффектов используются вертикальные.
Чек-бокс «Вертикально» выключен
Чек-бокс «Вертикально» включён
Кнопка Случайное число генерирует другое распределение полос на изображении. Изменение расположения полос
При активном чек-боксе Область просмотра все изменения отображаются в небольшой области предпросмотра, при неактивном — применяются к области, видимой в Окне изображения.
При нажатии кнопки По умолчанию значения параметров будут сброшены до исходных.
При нажатии кнопки ОК изменения будут применены ко всему изображению, а диалог эффекта закрыт.
При нажатии кнопки Отмена диалог эффекта закроется без принятия изменений.
Источник: alivecolors.com