Глитч-эффект для сайта при помощи CSS3Сегодня мы хотим показать вам, как создать небольшой экспериментальный эффект, похожий на глюк монитора. Эффект будет основан на CSS-анимации и свойстве clip-path . Техника включает в себя использование нескольких слоев изображений, каждый из которых будет иметь свой слой, режим наложения и примененный к нему эффект.  Мы также используем переменные CSS для установки некоторых свойств, которые позволят легко настроить эффект также комбинируя эффект с режимами наложения фона , мы можем создавать интересные эффекты изображения.

 

Создать сайт с красивым шаблоном можно при помощи наших партнеров, там есть шаблоны с адаптивным дизайном, техподдержкой и элементатором.

Глитч-эффект

При поисках трендовых эффектов, мы заметили, что большинство разработчиков данный эффект привлекает. Нам уже не раз задавали вопрос, о том, как быстро и красиво реализовать данный эффект. Сегодня мы это расскажем, мы сделаем эффект глитча с использованием CSS-анимации на стеке из трех одинаковых изображений. Анимации состоят из быстро меняющегося свойства  на всех слоях, кроме первого. Кроме того, слои немного перемещаются. Итак, что мы видим, это кусочки изображения, слегка смещенные и находящиеся в постоянном движении.

Мы хотели поэкспериментировать и создать эффект, используя вместо этого свойство clip-path. Хотя он имеет меньшую поддержку браузера (он не работает в IE или Edge), он обладает более гибким использованием, поскольку мы можем использовать процентные значения и применять его к элементам, которые не обязательно позиционировать абсолютно.

Как создать глитч-эффект для сайта при помощи CSS

Это работает путем создания стеки изображений, в котором каждое наложенное изображение  будет анимировать свой слой в случайном порядке. Мы будем использовать стопку из 5 изображений:

Давайте посмотрим на основные стили нашего эффекта, который вы видели в демонстрации. Обратите внимание, что мы уже определили некоторые переменные:

Мы не хотим показывать обрезанные стороны, поэтому мы следим за тем, чтобы размеры изображения учитывали зазор для движения. Затем мы устанавливаем цвета для фона и режимы наложения для каждого слоя:

Поскольку это будет эффект наведения, мы хотим, чтобы все слои, кроме первого, были скрыты по умолчанию:

Затем при наведении мыши мы показываем все слои:

И мы также применяем анимацию и преобразование к каждому слою:

В calc(-1 * var(--gap-horizontal))основном позволяет нам установить отрицательное значение данной переменной.

Посмотрите на эту медленную визуализацию, чтобы увидеть, что происходит под капотом (эта GIFка довольно большая, поэтому загрузка может занять некоторое время):

Глитч эффект для для фото

Последний слой только мигает и движется немного, в то время как другие также обрезаются путем обрезки. Давайте посмотрим на одну из анимаций для установки эффекта:

Разрезы переходят от крошечных, к немного большим и, а затем снова начинаются с другой позиции. Отличный инструмент для визуализации слоев — это Clippy от Bennett Feely. Последняя анимация — это простая вспышка последнего слоя:

Данный эффект выглядит особенно интересно при применении режима наложения в правильном сочетании цветов. Обратите внимание, что мы также можем применить этот эффект к текстовым элементам. Проверьте демонстрации, чтобы увидеть это в действии! Урок был переведен нашей командой из зарубежного источника, и предоставлен исключительно в ознакомительных целях.