CSS দিয়ে Wave (তরঙ্গ) ইফেক্ট তৈরি করা

ওভারভিউ

Wave ইফেক্ট একটি এলিমেন্টকে সাইন ভেইব (Sine Wave) ডistorsion (বিকৃত্তি) দিয়ে তরঙ্গা আকার দেয়। এটি লিগ্যাসি IE-এর প্রоприেটারি filter: Wave() দিয়ে করা হত। আধুনিক CSS-এ এটি সরাসরি সাপোর্টেড নয়, কিন্তু SVG Filter, Canvas, বা WebGL ব্যবহার করে অর্জন করা যায়।

লিগ্যাসি প্যারামিটার (IE Only)

লিগ্যাসি উদাহরণ (IE Only)

<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>

আধুনিক বিকল্প পদ্ধতিসমূহ

১. SVG Filter (Turbulence + Displacement Map) - सर्वোত্তম CSS-오নলি সমাধান

<svg style="display:none;">
  <filter id="wave-svg">
    <feTurbulence type="fractalNoise" baseFrequency="0.02 0.005" numOctaves="1" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

.wave-effect {
    filter: url(#wave-svg);
}

২. CSS Animation + Transform (সিম্পল 웨이ভ মোশন)

@keyframes wave {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(5px) rotate(2deg); }
    75% { transform: translateX(-5px) rotate(-2deg); }
}

.wave-animation {
    animation: wave 1s ease-in-out infinite;
    transform-origin: center bottom;
}

৩. SVG Path Morphing (GSAP/Anime.js দিয়ে উন্নত)

জটিল তরঙ্গ আকারের জন্য JavaScript লাইব্রেরি (GSAP, Anime.js) বা Canvas API ব্যবহার করা ভালো।

৪. CSS Mask + Gradient Animation (টেক্সট/ইমেজে ওয়েভ)

.wave-text {
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: wave-flow 3s linear infinite;
}
@keyframes wave-flow {
    to { background-position: 200% center; }
}

পূর্ণ উদাহরণ (SVG Filter - আধুনিক)

<!DOCTYPE html>
<html>
<head>
<style>
    .demo { width: 300px; margin: 20px; }
    .wave-svg { filter: url(#wave-svg); }
    .wave-anim { animation: wave-motion 2s ease-in-out infinite; transform-origin: center bottom; }
    
    @keyframes wave-motion {
        0%, 100% { transform: rotate(0deg) translateX(0); }
        25% { transform: rotate(3deg) translateX(10px); }
        75% { transform: rotate(-3deg) translateX(-10px); }
    }
</style>
</head>
<body>
<svg style="display:none;">
  <filter id="wave-svg">
    <feTurbulence type="fractalNoise" baseFrequency="0.015 0.003" numOctaves="2" result="noise">
      <animate attributeName="baseFrequency" dur="4s" values="0.015 0.003;0.03 0.006;0.015 0.003" repeatCount="indefinite"/>
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="15" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<div class="demo">
    <h2>SVG Wave Filter (Animated)</h2>
    <img src="logo.png" alt="Wavy Logo" class="wave-svg" width="200">
    
    <h2>CSS Transform Wave Animation</h2>
    <img src="logo.png" alt="Wavy Logo" class="wave-anim" width="200">
    
    <h2>Wave Text Gradient</h2>
    <div class="wave-text" style="font-size: 48px; font-weight: bold;">WAVY TEXT</div>
</div>
</body>
</html>

ব্রাউজার সাপোর্ট

• লিগ্যাসি filter: Wave(): শুধু IE 4-9
• SVG Filter (feTurbulence, feDisplacementMap): সব আধুনিক ব্রাউজার (IE10+)
• CSS @keyframes + transform: সব আধুনিক ব্রাউজার
• background-clip: text: Chrome 48+, Firefox 52+, Safari 15+

ব্যবহারের ক্ষেত্র

• লোডিং স্পিনার (তরঙ্গা আকারে)
• ব্যাকগ্রাউন্ড অ্যানিমেশন (হিরো সেকশন)
• টেক্সট ইফেক্ট (লিকুইড টাইপোগ্রাফি)
• ইমেজ হোভার ইফেক্ট (লিকুইড ডিস্টরশন)
• অডিও ভিজুয়ালাইজার স্টাইল

সতর্কতা

• লিগ্যাসি IE Wave ফিল্টার আধুনিক ব্রাউজারলে কাজ করে না।
• SVG Filter পারফরম্যান্স-হеви (GPU ফিল্টার পাস)। মোবাইল حيث দূর رکھুন।
• feDisplacementMap-এ scale বেশি দিলে ইমেজ ভাঙতে পারে।
• অ্যাক্সেসিবিলিটি: prefers-reduced-motion মিডিয়া কোয়েরি-এ অ্যানিমেশন বন্ধ করুন।