ساخت افکت لرزش نور با CSS

افکت لرزش نور (glow flicker یا light shake) یکی از جلوه‌های بصری محبوب در طراحی وب است که می‌تواند توجه کاربر را به عناصر مشخصی مانند دکمه‌ها، لوگوها یا آیکون‌ها جلب کند. در این مقاله به روش‌های مختلف ایجاد این افکت با CSS، نکات بهینه‌سازی و نمونه‌های عملی می‌پردازیم.

چرا از CSS برای افکت لرزش نور استفاده کنیم؟

CSS سریع، قابل نگهداری و بدون نیاز به اسکریپت اضافی است. در بسیاری از موارد با ترکیب box-shadow, filter و keyframes می‌توان افکت‌هایی زیبا و روان ساخت که بار پردازشی معقولی دارند.

روش ساده با box-shadow و keyframes

/* Basic flicker glow using box-shadow */.button-glow {
  display: inline-block;
  padding: 12px 24px;
  background: #0d6efd;
  color: #fff;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 0 8px rgba(13,110,253,0.6);
  transition: transform 0.2s;
  animation: glowFlicker 2.5s infinite;
}

@keyframes glowFlicker {
  0%   { box-shadow: 0 0 4px rgba(13,110,253,0.25); transform: translateY(0); }
  20%  { box-shadow: 0 0 18px rgba(13,110,253,0.9); transform: translateY(-2px); }
  40%  { box-shadow: 0 0 6px rgba(13,110,253,0.4); transform: translateY(0); }
  60%  { box-shadow: 0 0 22px rgba(13,110,253,1); transform: translateY(-1px); }
  80%  { box-shadow: 0 0 5px rgba(13,110,253,0.3); transform: translateY(0); }
  100% { box-shadow: 0 0 8px rgba(13,110,253,0.6); transform: translateY(0); }
}

در این کد یک دکمه با استفاده از box-shadow نور شبه‌هاله‌ای دارد و با keyframe به صورت نامنظم مقدار سایه و جابجایی (ترنسفورم) تغییر می‌کند تا حس لرزش یا فلیکِر ایجاد شود. استفاده از transform به جای تغییر top/left به بهینه‌سازی رندر کمک می‌کند.

نسخه با pseudo-element و blur برای هاله نرم‌تر

/* Glow using ::after for soft blurred halo */.icon {
  position: relative;
  width: 80px;
  height: 80px;
  background: #111;
  border-radius: 50%;
  display: inline-block;
}

.icon::after {
  content: "";
  position: absolute;
  inset: -18px; /* expands halo outside the element */  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,0,0.9) 0%, rgba(255,200,0,0.0) 60%);
  filter: blur(8px);
  opacity: 0.9;
  animation: haloFlicker 3s infinite;
}

@keyframes haloFlicker {
  0%   { transform: scale(1); opacity: 0.6; }
  30%  { transform: scale(1.08); opacity: 1; }
  55%  { transform: scale(0.98); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.6; }
}

در این مثال از یک pseudo-element (::after) استفاده شده تا هاله‌ای نرم حول عنصر ایجاد شود. پس‌زمینه‌ای با radial-gradient و فیلتر blur موجب نرم شدن لبه‌های نور می‌شود. استفاده از inset و scale به شکل موثر هاله را گسترش یا جمع می‌کند بدون تغییر ابعاد اصلی عنصر.

نسخه پیشرفته با CSS Variables و prefers-reduced-motion

/* Advanced: variables, multiple glows and accessibility */:root {
  --glow-color:  #ffcc33;
  --glow-strong: 0 0 26px rgba(255,204,51,0.95);
  --glow-medium: 0 0 14px rgba(255,204,51,0.6);
  --glow-soft: 0 0 6px rgba(255,204,51,0.35);
}

.banner {
  padding: 18px 30px;
  background: #0b0b0b;
  color: white;
  border-radius: 10px;
  box-shadow: var(--glow-soft);
  animation: bannerFlicker 4s infinite;
  will-change: box-shadow, transform;
}

/* Respect user preference for reduced motion */@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; box-shadow: var(--glow-soft); }
}

@keyframes bannerFlicker {
  0%   { box-shadow: var(--glow-soft); transform: translateY(0); }
  18%  { box-shadow: var(--glow-medium); transform: translateY(-1px); }
  40%  { box-shadow: var(--glow-strong); transform: translateY(-2px); }
  65%  { box-shadow: var(--glow-medium); transform: translateY(0); }
  100% { box-shadow: var(--glow-soft); transform: translateY(0); }
}

در نسخه پیشرفته از متغیرهای CSS برای مدیریت رنگ و شدت نور استفاده شده و با prefers-reduced-motion تجربه کاربران با نیاز به حرکت کم‌تر نیز رعایت شده است. همچنین will-change به مرورگر اطلاع می‌دهد کدام خواص احتمالاً تغییر می‌کنند تا رندر بهینه‌تر انجام شود.

مقایسه روش‌ها

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

• به جای تغییر موقعیت (top/left) از transform استفاده کنید تا از GPU بهره ببرید و repaint کمتر شود.
• از will-change فقط روی عناصر ضروری استفاده کنید؛ استفاده بی‌رویه منجر به مصرف حافظه می‌شود.
• فیلترهای سنگین (مثل blur) و تعداد زیاد box-shadow می‌توانند روی دستگاه‌های ضعیف کندی ایجاد کنند؛ اگر ممکن است سایه‌ها را ساده نگه دارید.
• با prefers-reduced-motion و انتخاب‌های قابل‌تنظیم توسط کاربر، دسترسی (accessibility) را رعایت کنید.
• برای فلیکِر طبیعی، از keyframe با درصدهای نامنظم و تغییرات کوچک در شدت و زمان‌بندی استفاده کنید (نه تغییرات خطی و یکنواخت).
• اگر نیاز به هماهنگی زمان‌بندی بین چند عنصر دارید، از CSS variables برای زمان و شدت استفاده کنید.

موارد استفاده (Use Cases)

• جلب توجه به دکمه‌های اقدام به عمل (CTA)
• افکت‌های بصری روی لوگوها یا هدرها
• نمایش هشدار یا وضعیت فعال (active state)
• جلوه‌های محیطی در بازی‌ها و وب‌اپلیکیشن‌های تعاملی

در انتها، برای داشتن افکتی روان و کم‌مصرف، ترکیب متدهای ساده (box-shadow) با تکنیک‌های بهینه‌سازی (transform، will-change، prefers-reduced-motion) توصیه می‌شود. همیشه روی دستگاه‌های هدف تست کنید و بین زیبایی و عملکرد تعادل برقرار کنید.

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

ارسال