CSS Wave Effect: ทำให้คลื่นคลอน (Legacy IE Filter)

Wave Effect (IE Legacy)

Wave Effect เป็นฟิลเตอร์เก่าของ Internet Explorer ให้ออบเจกต์มีการบิดเบี้ยวคลื่นไซน์ (sine wave distortion) ทำให้ดูคลื่นคลอน

พารามิเตอร์ 5 ตัว

ตัวอย่างการใช้งาน

<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>Text Example:</p>
  <div style="
    width: 357px; height: 50px;
    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>

⚠️ สำคัญ: เฉพาะ Internet Explorer

เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C

ทางเลือกมาตรฐาน (Modern CSS/JS)

/ CSS Animation ทำคลื่นได้จริง /
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}
.wave { animation: wave 1s ease-in-out infinite; }

/* SVG Filter สำหรับ displacement */


/* JavaScript (Canvas/WebGL) สำหรับ wave จริง */
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// ใช้ sine wave คำนวณ pixel displacement