ساخت افکت Blur داینامیک با CSS

افکت‌های Blur (محو شدن) یکی از ابزارهای بصری قدرتمند در طراحی وب هستند که برای ایجاد عمق، تمرکز یا جلوه‌های شیشه‌ای (frosted glass) استفاده می‌شوند. در این مقاله به صورت کاربردی و فنی می‌آموزیم چگونه افکت Blur را با CSS و در صورت نیاز با JavaScript به شکل داینامیک و بهینه پیاده‌سازی کنیم. مثال‌ها، نکات عملکردی و بررسی سازگاری مرورگرها در مسیر آمده‌اند.

مبانی: filter: blur()

ساده‌ترین روش اعمال بلور روی یک عنصر استفاده از پراپرتی filter: blur() است. این پراپرتی پیکسل‌های رندر شده را محو می‌کند و قابل انیمیشن است، اما باید مراقب عملکرد باشید چون می‌تواند رندر را سنگین کند.

/* Simple hover blur */.card {
  transition: filter 300ms ease;
}
.card:hover {
  filter: blur(4px);
}

کد بالا یک کارت را هنگام هاور با شعاع 4px محو می‌کند. transition برای روانی تغییر استفاده شده است. این روش مناسب عناصر منفرد است ولی اگر تعداد زیادی عنصر را همزمان محو کنید، هزینه رندر CPU/GPU افزایش می‌یابد.

فروستد گلس: backdrop-filter

وقتی می‌خواهیم محتوای پشت یک پنل را محو کنیم (مثل پنجره نیمه‌شفاف)، از backdrop-filter استفاده می‌کنیم. این ویژگی روی پس‌زمینه و محتوای پشت عنصر اعمال می‌شود و برای ساخت UIهای مدرن بسیار مناسب است.

.frost {
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1rem;
}

در کد بالا از پیشوند -webkit- برای سازگاری بهتر با Safari استفاده شده است. اگر مرورگر از backdrop-filter پشتیبانی نکند، ظاهر به صورت نیمه‌شفاف عادی دیده می‌شود—بنابراین بهتر است Progressive Enhancement در نظر گرفته شود.

افکت داینامیک بر اساس اسکرول (مثال عملی)

یکی از کاربردهای جذاب، تغییر میزان Blur بر اساس موقعیت اسکرول یا فاصله از مرکز صفحه است. بهترین روش استفاده از متغیرهای CSS و به‌روزرسانی آن‌ها با JavaScript به صورت بهینه است.

/* HTML
<section class="hero">
<div class="overlay"></div>
</section>
*/ /* CSS */ .hero { height: 80vh; background-image: url('photo.jpg'); background-size: cover; position: relative; } .overlay { position: absolute; inset: 0; --blur: 0px; filter: blur(var(--blur)); transition: filter 120ms linear; }

در این الگو از متغیر CSS --blur استفاده شده تا JavaScript تنها مقدار این متغیر را تغییر دهد—رویکردی که از به‌روزرسانی‌های سنگین DOM جلوگیری می‌کند.

// JavaScript
const overlay = document.querySelector('.overlay');
window.addEventListener('scroll', () => {
  const maxBlur = 12; // px
  const scrolled = window.scrollY;
  const docHeight = document.body.scrollHeight - window.innerHeight;
  const ratio = Math.min(1, scrolled / docHeight);
  overlay.style.setProperty('--blur', `${ratio * maxBlur}px`);
});

این اسکریپت مقدار اسکرول را به نسبت تبدیل کرده و در متغیر CSS می‌گذارد. به دلیل اینکه فقط یک سبک (CSS variable) به‌روزرسانی می‌شود، عملکرد نسبتاً خوب است. برای بهینه‌تر شدن می‌توان از requestAnimationFrame یا throttle استفاده کرد.

بهبود عملکرد و دسترس‌پذیری

• will-change: برای عناصر مهم که Blur بر آن‌ها انیمیت می‌شود، می‌توانید will-change: filter; اضافه کنید اما محتاط باشید—استفاده بیش از حد می‌تواند حافظه زیاد مصرف کند.
• prefers-reduced-motion: کاربرانی که حرکت را محدود کرده‌اند، بهتر است انیمیشن‌ها غیر فعال شوند.
• محدود کردن شعاع Blur: مقادیر بزرگ سبب سنگین شدن پردازش می‌شوند، معمولاً زیر 20px مناسب است.
• استفاده از backface-visibility و transform: translateZ(0) گاهی کمک به روشن‌تر شدن لایه‌ها می‌کند ولی باید با تست همراه باشد.

فروشگاه مرورگرها و سازگاری

فَلوبَک و جایگزین‌ها

اگر نیاز به پشتیبانی کامل یا رفتار خاص دارید، می‌توان از SVG filter استفاده کرد یا لایه‌هایی با پس‌زمینه نصفه شفاف و تصویر پشت محو‌شده ساخت. برای مثال، یک عنصر پشت صحنه با بک‌گراند کمی بزرگ‌تر و فیلتر شده قرار دهید تا شبیه به backdrop-filter شود.

/* Fallback idea: blurred background layer */.bg-blur {
  position: absolute;
  inset: -20%;
  background-image: url('photo.jpg');
  background-size: cover;
  filter: blur(12px);
  transform: scale(1.05);
  z-index: -1;
}

این روش گرچه دقیقاً معادل backdrop-filter نیست اما در مرورگرهای قدیمی می‌تواند تجربه‌ای مشابه بسازد.

نمونه‌های کاربردی و نکات حرفه‌ای

• استفاده در هِدِرها و بخش‌های معرفی برای تمرکز روی متن.
• استفاده کم و هدفمند: Blur را برای ایجاد عمق یا جداسازی محتوا به‌کار ببرید، نه هرجا.
• ترکیب با فیلترهای دیگر: saturation، brightness و contrast برای جلوه‌های پیچیده‌تر.
• آزمون در دستگاه‌های موبایل: پردازش Blur روی موبایل ممکن است منجر به مصرف باتری و تاخیر شود.

خلاصه و بهترین روش‌ها

برای ساخت افکت Blur داینامیک با CSS:

• از filter: blur() برای عناصر معمولی و از backdrop-filter برای اثرات فروستِد استفاده کنید.
• از CSS Variables و به‌روزرسانی آن‌ها توسط JavaScript برای دینامیک کردن افکت‌ها بهره ببرید تا رندر بهینه بماند.
• همیشه از @media (prefers-reduced-motion) و سازوکارهای fallback استفاده کنید.
• عملکرد را با will-change با احتیاط افزایش دهید و همیشه روی دستگاه‌های مختلف تست کنید.

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

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

ارسال