افکت حرکت سایه روی متن با CSS

افکت حرکت سایه روی متن (moving text shadow) یکی از روش‌های جذاب برای جلب توجه کاربران و ایجاد حس دینامیک در رابط کاربری است. با استفاده از CSS می‌توان از ساده‌ترین سایه‌های text-shadow تا سایه‌های پیچیده با pseudo-element، فیلترها و متغیرهای CSS بهره برد. در این مطلب روش‌ها، مثال‌ها، نکات بهینه‌سازی و دسترسی‌پذیری را به‌صورت عملی توضیح می‌دهیم.

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

• افزایش جذابیت بصری و تاکید روی عناوین یا CTA
• ایجاد حس عمق یا نور متحرک (مثلاً نور گذرنده)
• جذب توجه بدون نیاز به تصاویر خارجی یا جاوااسکریپت سنگین

روش‌های متداول

• تغییر مقادیر text-shadow با @keyframes
• استفاده از چندین سایه‌ی همزمان برای اثر سه‌بعدی
• ایجاد سایه با ::before یا ::after و فیلتر blur()
• استفاده از filter: drop-shadow() برای عناصر با پس‌زمینه‌ی شفاف

مثال پایه — انیمیشن ساده text-shadow

h1 {
  font-size: 4rem;
  color: #222;
  text-shadow: 0 0 0 rgba(0,0,0,0.5);
  animation: floatShadow 3s ease-in-out infinite;
}

@keyframes floatShadow {
  0%   { text-shadow: -8px -8px 6px rgba(0,0,0,0.35); }
  50%  { text-shadow: 8px 8px 12px rgba(0,0,0,0.6); }
  100% { text-shadow: -8px -8px 6px rgba(0,0,0,0.35); }
}

این کد یک انیمیشن ساده برای عنصر h1 تعریف می‌کند که مقادیر افست و بلور سایه را متناوب تغییر می‌دهد. این روش ساده و قابل فهم است ولی برای متن‌های متعدد یا افکت‌های سنگین ممکن است بهینه نباشد، چون هر فریم نیازمند بازنقش‌دهی (repaint) است.

سایه‌سازی چندلایه برای عمق بیشتر

.title {
  font-size: 3rem;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.2),
    0 4px 6px rgba(0,0,0,0.25),
    0 10px 20px rgba(0,0,0,0.2);
  animation: multiShadow 4s ease-in-out infinite;
}
@keyframes multiShadow {
  0%   { text-shadow: -2px 1px 0 rgba(0,0,0,0.2), -6px 6px 10px rgba(0,0,0,0.25); }
  50%  { text-shadow: 2px -1px 0 rgba(0,0,0,0.15), 6px -6px 20px rgba(0,0,0,0.3); }
  100% { text-shadow: -2px 1px 0 rgba(0,0,0,0.2), -6px 6px 10px rgba(0,0,0,0.25); }
}

در این مثال از چندین سایه با مقادیر مختلف استفاده شده تا حس عمق و چندلایه بودن سایه تقویت شود. ترکیب رنگ‌ها و بلور (blur) را می‌توان بسته به زمینه و رنگ متن تنظیم کرد.

افکت حرکتی بهینه با pseudo-element و transform

.glow {
  position: relative;
  font-size: 3rem;
  color: #111;
}
.glow::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  color: transparent;
  z-index: -1;
  filter: blur(12px);
  opacity: 0.8;
  transform: translate(0, 0);
  transition: transform 0.5s ease;
}
.glow:hover::after {
  transform: translate(12px, 12px);
}

اینجا از یک pseudo-element برای شبیه‌سازی سایه استفاده شده که با filter: blur() محو شده و سپس با تغییر transform حرکت می‌کند. مزیت بزرگ این روش کاهش بازنقش‌دهی نسبت به انیمیشن مستقیم text-shadow است، چون transform اغلب توسط GPU شتاب می‌گیرد.

قابلیت‌های پیشرفته: متغیرها و کنترل رنگ دینامیک

:root {
  --sx: 8px; --sy: 8px; --sb: 14px; --sc: rgba(0,0,0,0.45);
}
.dynamic {
  font-size: 3rem;
  color: #fafafa;
  text-shadow: var(--sx) var(--sy) var(--sb) var(--sc);
  animation: moveVars 3s linear infinite;
}
@keyframes moveVars {
  0%   { --sx: -8px; --sy: -8px; }
  50%  { --sx: 8px;  --sy: 8px;  }
  100% { --sx: -8px; --sy: -8px; }
}

با استفاده از CSS variables می‌توان پارامترهای سایه را تغییر داد بدون تکرار مقادیر در چندین قانون. این رویکرد کد را خواناتر و نگهداری را ساده‌تر می‌کند.

دسترس‌پذیری و بهینه‌سازی

• prefers-reduced-motion: برای کاربران حساس به حرکت باید انیمیشن را غیرفعال یا ساده کنید.
• از انیمیشن‌های بلند یا پر‌شلوغ برای متون طولانی خودداری کنید — تمرکز را کاهش می‌دهند.
• برای بهبود عملکرد، تا حد امکان از transform و opacity استفاده کنید و از انیمیشن مستقیم روی text-shadow در صورت امکان اجتناب کنید.
• استفاده از will-change را با احتیاط انجام دهید؛ فقط برای عناصر مشخص و مدت کوتاه.

نمونه: ترکیب prefers-reduced-motion و بهینه‌سازی

.headline {
  font-size: 4rem;
  color: #222;
  text-shadow: 0 6px 12px rgba(0,0,0,0.35);
  transition: text-shadow 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .headline {
    animation: none;
    transition: none;
  }
}

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

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

نکات نهایی و توصیه‌های حرفه‌ای

• ابتدا با نسخه‌ی ساده آزمایش کنید و سپس لایه‌ها را اضافه کنید تا از تأثیر بر عملکرد مطمئن شوید.
• برای موبایل، افکت را سبک‌تر یا غیرفعال کنید تا مصرف باتری و CPU کاهش یابد.
• از رنگ‌هایی با کنتراست مناسب استفاده کنید تا خوانایی متن حفظ شود.
• آزمایش در مرورگرها و دستگاه‌های مختلف ضروری است؛ بعضی فیلترها و سایه‌ها رفتار متفاوتی دارند.

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

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

ارسال