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

افکت لرزش کارت (Card Shake) یکی از میکروتعامل‌های محبوب در طراحی وب است که می‌تواند توجه کاربر را به اجزای خاصی مانند هشدارها، خطاها یا کال تو اکشن‌ها جلب کند. این افکت با CSS‌ ساده قابل پیاده‌سازی است و در صورت اعمال درست، تجربه کاربری را بهبود می‌دهد. در این مقاله به روش‌های مختلف ساخت لرزش کارت، نکات دسترس‌پذیری، بهینه‌سازی و نمونه‌های کاربردی می‌پردازیم.

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

• جلب توجه به فیلدهای دارای خطا (مثلاً فرم‌ها).
• نمایش هشدارهای مهم یا پیام‌های خطا.
• افزایش تعامل در کارت‌های محصول یا بنرهای تبلیغاتی.
• دادن بازخورد بصری برای کلیک ناموفق یا عملیات نامعتبر.

مفاهیم پایه‌ای: transform و keyframes

برای ایجاد لرزش معمولاً از @keyframes و transform: translateX/rotate استفاده می‌کنیم. استفاده از translate3d یا translateZ باعث می‌شود عملیات روی GPU انجام شده و روان‌تر اجرا شود.

/* Basic shake using keyframes */.card {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

@keyframes shake {
  0% { transform: translateX(0); }
  10% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  50% { transform: translateX(-6px); }
  70% { transform: translateX(6px); }
  90% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.card.shake {
  animation: shake 600ms cubic-bezier(.36,.07,.19,.97);
}

توضیح: کد بالا یک کلاس پایه .card تعریف می‌کند و با استفاده از @keyframes انیمیشنی به نام shake ساخته شده است. هنگام اضافه شدن کلاس .shake انیمیشن برای 600 میلی‌ثانیه اجرا می‌شود. استفاده از translateX باعث می‌شود کارت به چپ و راست حرکت کند و cubic-bezier انیمیشن را طبیعی‌تر نشان می‌دهد.

نسخه بهینه با translate3d و will-change

برای بهبود عملکرد و جلوگیری از ری‌پِین‌های سنگین، از translate3d و will-change استفاده می‌کنیم و همچنین به کاربران دارای تنظیمات کاهش حرکت توجه می‌کنیم.

/* Improved shake with GPU acceleration and reduced-motion support */.card {
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .card.shake {
    animation: none;
    transform: translate3d(0,0,0);
  }
}

@keyframes shake-3d {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  15% { transform: translate3d(-6px,0,0) rotate(-1deg); }
  30% { transform: translate3d(6px,0,0) rotate(1deg); }
  45% { transform: translate3d(-4px,0,0) rotate(-0.5deg); }
  60% { transform: translate3d(4px,0,0) rotate(0.5deg); }
  75% { transform: translate3d(-2px,0,0) rotate(-0.2deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

.card.shake {
  animation: shake-3d 520ms cubic-bezier(.36,.07,.19,.97);
}

توضیح: در این نسخه از translate3d استفاده شده که پردازش روی GPU انجام می‌شود. will-change: transform به مرورگر اعلام می‌کند که المنت ممکن است تغییر کند و به بهبود عملکرد کمک می‌کند. @media (prefers-reduced-motion: reduce) نیز برای احترام به تنظیمات کاربرانی که انیمیشن را غیرفعال کرده‌اند، انیمیشن را خاموش می‌کند.

اجرای یکبارۀ لرزش با جاوااسکریپت

گاهی می‌خواهیم لرزش تنها یکبار (مثلاً در واکنش به خطا) انجام شود؛ برای این کار می‌توانیم کلاس .shake را حذف و دوباره اضافه کنیم یا از روش cloneNode استفاده کنیم.

// JS to trigger shake once
function triggerShake(el) {
  el.classList.remove('shake');
  // force reflow to restart animation
  void el.offsetWidth;
  el.classList.add('shake');
}

// Usage:
const card = document.querySelector('.card');
button.addEventListener('click', () => triggerShake(card));

توضیح: تابع triggerShake ابتدا کلاس .shake را حذف می‌کند و با خواندن offsetWidth (force reflow) مرورگر را وادار به ریست کردن وضعیت می‌کند. سپس کلاس دوباره اضافه شده و انیمیشن اجرا می‌شود. این روش از اجرای مکرر و تکرار‌نشدن انیمیشن جلوگیری می‌کند.

تنظیم شدت و مدت انیمیشن با متغیرهای CSS

برای انعطاف‌پذیری بیشتر می‌توان از CSS variables برای کنترل شدت، مدت و تأخیر استفاده کرد.

:root {
  --shake-duration: 560ms;
  --shake-distance: 8px;
}

.card.shake {
  animation: shake var(--shake-duration) cubic-bezier(.36,.07,.19,.97);
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(calc(-1 * var(--shake-distance))); }
  40% { transform: translateX(var(--shake-distance)); }
  60% { transform: translateX(calc(-0.6 * var(--shake-distance))); }
  80% { transform: translateX(calc(0.6 * var(--shake-distance))); }
  100% { transform: translateX(0); }
}

توضیح: با استفاده از متغیرهای CSS می‌توان به‌سادگی شدت (فاصله‌ی حرکت) و مدت انیمیشن را تغییر داد بدون اینکه چندین کلاس یا keyframes جدید بسازیم. این روش توسعه‌پذیری و قابلیت نگهداری را افزایش می‌دهد.

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

• برای فرم‌ها: در صورت خطای اعتبارسنجی، کارت یا فیلد را با لرزش نشان دهید تا کاربر متوجه شود.
• برای CTAها: از لرزش ملایم روی دکمه خرید فقط در صفحات خاص استفاده کنید، نه در تمام صفحه.
• اجتناب از افراط: استفاده زیاد از لرزش می‌تواند آزاردهنده باشد و تاثیر خود را از دست بدهد.
• دسترس‌پذیری: همیشه prefers-reduced-motion را لحاظ کنید تا به کاربرانی که حساسیت به حرکت دارند احترام گذاشته شود.

مقایسه سریع خصوصیات CSS موثر

عیب‌یابی و نکات عملکردی

• اگر انیمیشن لگ داشت، از translate3d و will-change استفاده کنید و مطمئن شوید عناصر پرهزینه دیگر (مثل large box-shadow) همزمان اجرا نمی‌شوند.
• برای موبایل، فاصله‌ی حرکت را کاهش دهید تا تجربه لطیف‌تری داشته باشد.
• در صورت نیاز به لرزش‌های پیچیده‌تر، می‌توان از ترکیب rotate و translate برای حس سه‌بعدی استفاده کرد.

جمع‌بندی

افکت لرزش کارت با CSS ابزاری ساده ولی قدرتمند برای جلب توجه و ارائه بازخورد بصری است. با استفاده از تکنیک‌هایی مانند keyframes، translate3d، will-change و احترام به prefers-reduced-motion می‌توان افکتی روان، قابل تنظیم و دسترس‌پذیر ساخت. همیشه به میانه‌روی در استفاده و تست عملکرد روی دستگاه‌های مختلف توجه کنید.

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

ارسال