웨이브(Wave) 효과는 객체에 사인파(sine wave) 형태의 왜곡을 적용하여 마치 물결처럼 출렁이는 모습으로 보이게 만드는 시각적 필터입니다. 이미지나 텍스트 요소에 부드러운 흔들림 효과를 주고 싶을 때 활용할 수 있습니다.
웨이브 효과의 주요 파라미터
Wave 필터에서 사용할 수 있는 파라미터는 다음과 같습니다.
| 번호 | 파라미터 및 설명 |
|---|---|
| 1. | Add 값이 1이면 원본 이미지를 웨이브가 적용된 이미지 위에 함께 표시하고, 0이면 원본 이미지를 포함하지 않습니다. |
| 2. | Freq 생성할 물결(웨이브)의 개수를 지정합니다. |
| 3. | Light 물결에 비치는 빛의 강도를 설정합니다. 값 범위는 0부터 100까지입니다. |
| 4. | Phase 사인파가 시작되는 각도를 지정합니다. 값 범위는 0부터 100까지입니다. |
| 5. | Strength 웨이브 효과의 강도(왜곡 정도)를 결정합니다. |
예제 코드
아래 코드를 실행하면 이미지와 텍스트에 웨이브 효과를 적용한 결과를 확인할 수 있습니다.
<html> <head> </head> <body> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>텍스트 예제:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div> </body> </html>
참고: 브라우저 호환성
위의 Wave 필터는 과거 인터넷 익스플로러(Internet Explorer)에서 지원하던 레거시 CSS 필터 문법으로, 크롬·파이어폭스·엣지 등 현대 브라우저에서는 동작하지 않습니다. 최신 브라우저에서 유사한 물결 효과를 구현하려면 SVG feTurbulence·feDisplacementMap 필터나 CSS 애니메이션을 조합하는 방식을 사용하는 것이 좋습니다.