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

افکت تلنگر نور (light sheen یا shimmer) یکی از جلوه‌های بصری ساده اما تأثیرگذار است که می‌تواند روی دکمه‌ها، کارت‌ها، آیکون‌ها یا حتی بارگذاری اسکلتون (skeleton) ظاهر حرفه‌ای و زنده‌ای بدهد. در این مقاله روش‌های مختلف ایجاد این افکت با CSS، نکات کارایی، دسترسی و نمونه‌های واقعی معرفی می‌شود.

مبانی افکت تلنگر نور

ایده‌ی اصلی تولید یک نوار نورانی است که با استفاده از گرادیانت (linear-gradient) و انیمیشن از یک سمت به سمت دیگر حرکت می‌کند. معمولاً از یک عنصر ::before یا ::after استفاده می‌شود تا لایه‌ی تلنگر روی محتوای اصلی قرار گیرد.

ساختار پایه‌ای

.sheen {
  position: relative;
  overflow: hidden;
}

.sheen::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.0) 20%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.0) 80%);
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.sheen:hover::before {
  transform: translateX(100%) rotate(25deg);
}

این کد یک نوار نور را تعریف می‌کند که به کمک یک گرادیانت زاویه‌دار ایجاد شده و با تغییر transform هنگام هاور از چپ به راست حرکت می‌کند. استفاده از overflow:hidden مطمئن می‌شود نوار خارج از محدوده عنصر نمایش داده نشود.

مثال عملی: دکمه با افکت تلنگر

.btn {
  display: inline-block;
  padding: 12px 20px;
  background: #2a9df4;
  color: white;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}

.btn::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-150%) rotate(25deg);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn:hover::before {
  transform: translateX(300%) rotate(25deg);
}

در این مثال، روی دکمه یک نوار باریک با گرادیانت سفید ایجاد شده که در حالت هاور با یک انیمیشن روان از سمت چپ به راست عبور می‌کند. transform و rotate برای زاویه‌دهی مناسب مؤثر است و pointer-events:none مانع از تداخل با کلیک می‌شود.

نسخهٔ انیمیشنی پیوسته برای اسکلتون لودینگ

.skeleton {
  background: #eee;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%);
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

این روش برای نشان دادن حالت بارگذاری (skeleton loading) مناسب است؛ انیمیشن به‌صورت پیوسته تکرار می‌شود و حس بارگذاری را منتقل می‌کند. طول و سرعت انیمیشن قابل تنظیم است.

بهبود عملکرد و بهینگی

برای جلوگیری از افت فریم و بار اضافی روی پردازنده، رعایت موارد زیر مهم است:

• از will-change یا transform/opacity استفاده کنید تا از شتاب‌دهی سخت‌افزاری بهره ببرید: transform را به جای left/right انیمیت کنید.
• مقادیر large reflow یا expensive ریپیینت را کاهش دهید.
• برای انیمیشن‌های پس‌زمینه‌ای از تصاویر بزرگ استفاده نکنید.

نمونه بهینه‌شده با will-change

.sheen::before {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(-110%) rotate(25deg);
}

will-change به مرورگر هشدار می‌دهد که این خصوصیات قرار است تغییر کنند و می‌تواند بهینه‌سازی‌های لازم را انجام دهد. backface-visibility و ترنسفورم هم به استفاده از GPU کمک می‌کنند.

دسترس‌پذیری و prefers-reduced-motion

باید برای کاربران حساس به حرکت یا با تنظیمات کاهش حرکت سیستم احترام قائل شویم. با استفاده از media query مربوطه می‌توان انیمیشن را غیرفعال یا ساده کرد.

@media (prefers-reduced-motion: reduce) {
  .sheen::before {
    animation: none;
    transition: none;
    opacity: 0.3; /* یا حذف کامل */  }
}

این قطعه کد انیمیشن را برای کاربرانی که کاهش حرکت را فعال کرده‌اند خاموش می‌کند یا به حالت ملایم‌تری تبدیل می‌کند تا تجربه دسترس‌پذیرتری ارائه شود.

روش‌های جایگزین و مقایسه

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

• برای دکمه‌های مهم از تلنگر ملایم استفاده کنید تا توجه را جلب کند بدون ایجاد حواس‌پرتی.
• در کارت‌های محصول یا گالری از مجموعه‌ای از تلنگرهای کوچک برای طبیعی‌تر شدن استفاده کنید.
• برای ساخت افکت فلزی یا شاین روی لوگو، گرادیانت را تیزتر و زاویه را دقیق‌تر تنظیم کنید.
• ترکیب با blend-mode (مثلاً mix-blend-mode: screen) می‌تواند جلوهٔ نوری واقع‌گرایانه‌تری بدهد.

نمونه پیشرفته: کنترل با CSS variable و hover delay

:root {
  --sheen-duration: 0.8s;
  --sheen-ease: cubic-bezier(.2,.8,.2,1);
}

.btn {
  --sheen-delay: 0s;
}

.btn::before {
  transition: transform var(--sheen-duration) var(--sheen-ease) var(--sheen-delay);
}

با متغیرهای CSS می‌توان مدت، تأخیر و منحنی حرکت را به‌صورت مرکزی تعریف و روی کامپوننت‌های مختلف تنظیم کرد. این روش مدیریت طراحی مقیاس‌پذیر را آسان‌تر می‌کند.

جمع‌بندی و توصیه‌های نهایی

افکت تلنگر نور یک ابزار کم‌هزینه ولی تأثیرگذار برای ارتقای تجربه کاربری است؛ اگر با اصول عملکرد، دسترسی و بهینه‌سازی همراه شود، می‌تواند به زیبایی و بهره‌وری رابط کمک کند. از pseudo-elementها، transform و prefers-reduced-motion استفاده کنید، و برای پروژه‌های بزرگ‌تر از متغیرهای CSS و روش‌های کامپوزیت (مثل mix-blend-mode یا SVG mask) بهره بگیرید.

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

ارسال