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

در طراحی وب گاهی لازم است متن یا اعلان‌هایی داشته باشیم که به سمت چپ و راست حرکت کنند؛ برای جلب توجه کاربر، نمایش اطلاعیه‌ها یا ایجاد افکت‌های ظریف در رابط کاربری. در این مقاله روش‌های مختلف ایجاد افکت حرکت متن با CSS را بررسی می‌کنیم، مثال‌های عملی می‌آوریم و نکات مربوط به دسترسی، عملکرد و پشتیبانی از راست‌به‌چپ (RTL) را هم توضیح می‌دهیم.

روش‌های اصلی

• انیمیشن @keyframes با transform (سریع و بهینه)
• انیمیشن صفحه‌ی مارکی (marquee-style) با overflow و translate
• ترنزیشن همراه با جاوااسکریپت (کنترل بیشتر، اما سنگین‌تر)

نمونه ساده: حرکت رفت و برگشتی با @keyframes

/* HTML:
<div class="slider">این متن به چپ و راست حرکت می‌کند</div>
*/ .slider { display: inline-block; white-space: nowrap; animation: slide 3s ease-in-out infinite alternate; will-change: transform; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(120px); } }

این کد یک المنت با کلاس .slider را به صورت رفت و برگشتی (alternate) بین موقعیت اولیه و 120px به سمت راست حرکت می‌دهد. استفاده از transform به جای تغییر left یا margin باعث می‌شود انیمیشن روان‌تر و با بازده بالاتری روی GPU اجرا شود (will-change به مرورگر کمک می‌کند تا بهینه‌سازی‌ها را اعمال کند).

بهبود: متغیرهای CSS، توقف در حالت hover و احترام به prefers-reduced-motion

/* HTML:
<div class="slide-wrap">
<div class="slide">اعلان مهم: نگهداری برنامه‌ریزی‌شده در ساعت ۱۴:۰۰</div>
</div>
*/ :root { --distance: 200px; --duration: 6s; } .slide-wrap { overflow: hidden; width: 100%; } .slide { display: inline-block; white-space: nowrap; animation: slide-x var(--duration) linear infinite alternate; will-change: transform; } .slide-wrap:hover .slide, .slide:focus { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .slide { animation: none; } } @keyframes slide-x { from { transform: translateX(0); } to { transform: translateX(var(--distance)); } }

در این نسخه از CSS variables برای تنظیم فاصله و مدت زمان استفاده شده و با :hover یا :focus انیمیشن متوقف می‌شود (کاربر می‌تواند متن را بخواند). همچنین با prefers-reduced-motion از کاربران دارای حساسیت به حرکت محافظت می‌کنیم؛ در این حالت انیمیشن خاموش می‌شود.

اسکرول پیوسته (مارکی‌شکل) — متن از یک سمت به سمت دیگر حرکت می‌کند

/* HTML:
<div class="marquee">
<div class="marquee__inner">خبر فوری: تخفیفات بزرگ تا پایان هفته ادامه دارد!</div>
</div>
*/ .marquee { overflow: hidden; white-space: nowrap; } .marquee__inner { display: inline-block; padding-left: 100%; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

این روش متن را از سمت راست کانتینر وارد و به سمت چپ خارج می‌کند. با افزودن padding-left برابر 100% متن خارج از صفحه شروع می‌شود و سپس با translateX(-100%) کامل از صفحه عبور می‌کند. برای متن‌های بلند ممکن است نیاز به تکرار عنصر داخلی یا استفاده از clone برای ایجاد حلقه بدون وقفه باشد.

پشتیبانی از راست‌به‌چپ (RTL)

/* HTML:
<div class="slide-rtl" dir="rtl">متن نمونه برای RTL</div>
*/ .slide-rtl { animation: rtl-slide 4s linear infinite; } @keyframes rtl-slide { from { transform: translateX(0); } to { transform: translateX(-120px); } } /* یا به‌صورت کلی برای تغییر جهت انیمیشن در صورت dir="rtl" */ [dir="rtl"] .slide { animation-direction: alternate-reverse; }

برای صفحات فارسی که direction به صورت rtl است می‌توانیم جهت انیمیشن را معکوس کنیم یا مقادیر translateX را منفی/مثبت تنظیم کنیم. روش دوم با استفاده از سلکتور [dir=”rtl”] امکان تغییر رفتار بدون تغییر HTML را فراهم می‌کند.

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

نکات دسترسی و عملکرد

• همیشه از prefers-reduced-motion پشتیبانی کنید تا کاربران حساس به حرکت مشکلاتی نداشته باشند.
• از transform و opacity برای انیمیشن استفاده کنید؛ تغییر position یا اندازه می‌تواند رندر را سنگین کند.
• با استفاده از will-change به مرورگر هشدار دهید اما نه برای عناصر زیاد یا دائم، چون خودش مصرف منابع را بالا می‌برد.
• برای اعلان‌های مهم از aria-live و کنترل توقف انیمیشن هنگام فوکوس استفاده کنید تا خواندن توسط صفحه‌خوان آسان شود.
• در طراحی ریسپانسیو مقدار فاصله یا مدت زمان را با CSS variables یا media queries تنظیم کنید.

مثال دسترسی: استفاده از aria-live و توقف روی فوکوس

/* HTML:
<div class="ann" role="status" aria-live="polite">بروزرسانی: نسخه جدید آماده نصب است.</div>
*/ .ann { display: inline-block; white-space: nowrap; animation: slide 8s linear infinite; } .ann:focus { animation-play-state: paused; }

با افزودن role=”status” و aria-live صفحه‌خوان‌ها می‌فهمند که محتوای این عنصر مهم است. tabindex اجازه می‌دهد کاربر با صفحه‌کلید به آن دسترسی پیدا کند و انیمیشن متوقف شود تا متن به‌راحتی خوانده شود.

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

• برای افکت‌های ساده و پرسرعت از @keyframes با transform استفاده کنید.
• برای اسکرول پیوسته از تکنیک marquee-like با کلون‌سازی در صورت نیاز برای جلوگیری از لنگه در انتهای حلقه استفاده کنید.
• همیشه موضوع دسترسی را در نظر بگیرید: prefers-reduced-motion، aria-live و توقف روی فوکوس/هاور را فراموش نکنید.
• مقادیر متغیر (CSS variables) و media queries کمک می‌کنند انیمیشن برای اندازه‌ها و جهت‌های مختلف مناسب شود.

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

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

ارسال