Glitch Effect – HTML/CSS

Glitch effect

글리치 효과는 영상에서 일시적으로 발생하는 오류로 인해 발생하는 현상입니다. 주로 옛날에 비디오테이프로 촬영하던 시절에 테이프 상태가 온전치 못함으로써 – 살짝 손상되었거나, 먼지가 끼었거나 하는 경우 발생했죠. 자석의 영향으로 영상에 손상이 가는 경우도 있었으니 얼마나 민감했는지 모릅니다.

그런데 복고풍이 다시 유행하면서 이런 현상을 디지털에서 일부러 재현하는걸 보면 참 재미있습니다.

저는 이걸 html과 css만 이용해서 hover 상태에서 텍스트에서 글리치 효과가 나도록 재현해봤는데요. 아래 코드펜 소스에서 작동하는 것을 확인할 수 있습니다.

 

See the Pen
glitch menu
by 배현기 (@illustudio)
on CodePen.