افکت موج دار روی تصویر با CSS

افکت موج‌دار روی تصویر یکی از جلوه‌های بصری محبوب در طراحی وب است که می‌تواند حس حرکت و طراوت را به رابط کاربری اضافه کند. در این مقاله با چند روش عملی — از ساده تا پیشرفته — برای پیاده‌سازی موج روی تصاویر با CSS و SVG آشنا می‌شوید، همراه با مثال‌های کاربردی، نکات بهینه‌سازی و توجه به دسترس‌پذیری.

چرا از افکت موج استفاده کنیم؟

• جلب توجه بصری در هِرو یا بنرها
• ایجاد جداسازی ظریف بین بخش‌ها (Section separator)
• ایجاد حرکت بدون مصرف سنگین منابع (در صورت پیاده‌سازی بهینه)

روش‌های اصلی پیاده‌سازی

• استفاده از pseudo-element و یک SVG تکرارشونده به عنوان پس‌زمینه (آسان و مناسب برای انیمیشن)
• استفاده از SVG ClipPath یا Mask برای برش تصویر با شکل موج (دقیق و قابل کنترل)
• استفاده از filter و ترکیب با blend-mode برای افکت‌های پیچیده‌تر

مثال ۱ — موج تکرارشونده با pseudo-element

/* HTML
<div class="wave-image"><img src="photo.jpg" alt="Sample photo" /></div>
*/ /* CSS */ .wave-image { position: relative; overflow: hidden; display: inline-block; width: 100%; max-width: 800px; } .wave-image img { display: block; width: 100%; height: auto; } /* pseudo-element with inline SVG as repeating background */ .wave-image::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; background: url("data:image/svg+xml;utf8,") repeat-x; background-size: 600px 200px; opacity: 0.25; mix-blend-mode: overlay; animation: wave 10s linear infinite; } @keyframes wave { from { background-position: 0 0; } to { background-position: 1200px 0; } } /* respect user motion preferences */ @media (prefers-reduced-motion: reduce) { .wave-image::after { animation: none; } }

توضیح: در این مثال از یک pseudo-element (::after) استفاده شده که یک SVG موج را به صورت تکرارشونده (repeat-x) روی تصویر قرار می‌دهد و با حرکت پس‌زمینه (background-position) شِبه موج ایجاد می‌کند. از mix-blend-mode و opacity برای ترکیب صاف موج با تصویر استفاده شده و در media query مربوط به prefers-reduced-motion، انیمیشن غیرفعال می‌شود تا به کاربران حساس به حرکت احترام گذاشته شود.

مقایسه سریع

نکات پیشرفته و بهینه‌سازی

• از prefers-reduced-motion برای غیرفعال‌سازی انیمیشن روی دستگاه‌هایی که کاربران نیاز به کاهش حرکت دارند استفاده کنید.
• برای انیمیشن‌های روان‌تر از transform و translate استفاده کنید — تغییر background-position ممکن است repaint بیشتری ایجاد کند. اگر از pseudo-element استفاده می‌کنید، می‌توانید موج را با یک عنصر داخلی () که با transform حرکت می‌کند، پیاده‌سازی کنید.
• برای کاهش درخواست‌ها از inline SVG (data URI) یا sprite استفاده کنید. ولی دقت کنید که داده‌های خیلی بزرگ باعث افزایش حجم HTML می‌شوند.
• برای بهبود عملکرد روی موبایل، یا از تصاویر مقیاس‌پذیر (SVG) استفاده کنید یا سایز تصاویر را بهینه کنید.

نسخه بهینه‌شده (استفاده از transform برای حرکت)

/* Instead of animating background-position, move a wide SVG element */.wave-image::after {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  top: 0;
  height: 200px;
  background: url("data:image/svg+xml;utf8,...") repeat-x;
  background-size: 600px 200px;
  transform: translate3d(0,0,0);
  animation: slide 12s linear infinite;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

توضیح: با جابه‌جایی یک عنصر بزرگ با transform، مرورگر از شتاب‌دهی سخت‌افزاری استفاده می‌کند و عملکرد بهتری نسبت به تغییر background-position دارد. همچنین ترجیح داده می‌شود که از translate3d برای فعال‌سازی compositing layer استفاده شود.

دسترسی و نکات نهایی

همیشه مطمئن شوید تصویر دارای صفت alt مناسب است. اگر موج فقط تزئینی است، از CSS برای اضافه‌کردن آن استفاده کنید و نه تصویری که نیاز به خواندن توسط صفحه‌خوان دارد. در نهایت تست روی مرورگرها و دستگاه‌های مختلف (موبایل، دسکتاپ، مرورگرهایی که از mask یا clipPath محدود پشتیبانی می‌کنند) را فراموش نکنید.

با ترکیب این روش‌ها می‌توانید افکت‌های موج‌دار ساده تا حرفه‌ای بسازید و بر اساس نیاز، بین عملکرد و ظاهری که می‌خواهید، انتخاب کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال