طراحی افکت پرش متن با CSS

افکت پرش متن (Bounce text) یکی از محبوب‌ترین مینی‌انیمیشن‌ها برای افزودن جان و تعاملی بودن به تایپوگرافی وب است. در این مقاله به روش‌های مختلف پیاده‌سازی این افکت با CSS می‌پردازیم، نکات عملکردی و دسترس‌پذیری را بررسی می‌کنیم و نمونه‌های عملی و بهینه‌شده ارائه می‌دهیم.

مبانی: چرا از transform و animation استفاده کنیم؟

برای حرکت روان و کم‌هزینه روی مرورگر باید از transform (مثلاً translateY یا translateZ، scale) و opacity استفاده کنید، نه از تغییر موقعیت که باعث reflow می‌شود. استفاده از will-change و انتخاب صحیح easing نیز باعث می‌شود انیمیشن نرم‌تر و سریع‌تر پردازش شود.

مثال ساده: افکت پرش روی هاور

<!-- HTML -->
<h1 class="bounce">سلام</h1>

<!-- CSS -->
.bounce {
  display: inline-block;
  transition: transform 300ms cubic-bezier(.2, .9, .3, 1);
  will-change: transform;
  cursor: default;
}
.bounce:hover {
  transform: translateY(-12px);
}

توضیح: این مثال ساده با transition و translateY یک پرش کوتاه هنگام هاور ایجاد می‌کند. از cubic-bezier برای دادن حس طبیعی‌تر استفاده شده و will-change به مرورگر اعلام می‌کند که transform ممکن است تغییر کند تا پردازش GPU بهینه شود. این روش برای عناوین و CTAهای ساده مناسب است.

افکت پرش با انیمیشن قابل تنظیم و بازگشت طبیعی

<h1 class="bounce-anim">خوش‌آمدید</h1>

.bounce-anim {
  display: inline-block;
  animation: bounce 800ms both;
  animation-timing-function: cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-30px); }
  50%  { transform: translateY(0); }
  65%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* احترام به تنظیمات کاهش حرکت */@media (prefers-reduced-motion: reduce) {
  .bounce-anim { animation: none; }
}

توضیح: این کد از @keyframes برای تولید یک حرکت پرشی با قله و برگشت طبیعی استفاده می‌کند. نقاط 30% و 65% برای ایجاد «اور‌شات» و آهسته شدن حرکت نهایی هستند. همچنین با @media (prefers-reduced-motion) از آزار کاربرانی که تنظیمات کاهش حرکت دارند جلوگیری شده است.

پرش هر حرف به صورت پله‌ای (Staggered Per-letter)

برای ایجاد افکت پرش تارعنکبوتی‌تر روی هر حرف، باید هر حرف را با تگ span بسته‌بندی کنیم و با تاخیرهای متفاوت انیمیشن را اجرا کنیم. می‌توان این کار را با جاوااسکریپت یا در برخی موارد با HTML دستی انجام داد.

<!-- HTML -->
<h2 id="stagger" aria-label="پاور">پاور</h2>

<!-- JS: wrap letters -->
const el = document.getElementById('stagger');
const text = el.textContent.trim();
el.innerHTML = text.split('').map((ch, i) =>
  `<span style="--i:${i}">${ch}</span>`
).join('');

<!-- CSS -->
#stagger {
  display: inline-block;
  white-space: nowrap;
}
#stagger span {
  display: inline-block;
  transform: translateY(0);
  animation: letter-bounce 700ms cubic-bezier(.2,.9,.3,1) both;
  animation-delay: calc(var(--i) * 80ms);
  will-change: transform;
}
@keyframes letter-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-22px); }
  55%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

توضیح: کد جاوااسکریپت حروف را درون span می‌پیچد و شاخص هر حرف را در یک متغیر CSS (–i) قرار می‌دهد. سپس در CSS از animation-delay محاسبه‌شده برای ایجاد افکت پله‌ای استفاده می‌کنیم. این روش بسیار قدرتمند است اما باید به دسترس‌پذیری توجه کنید: برای خوانایی صفحه‌بازخوان‌ها، از aria-label یا متن مخفی (visually-hidden) استفاده کنید تا اسپان‌های جداگانه مزاحم نشوند.

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

<h2 class="visually-hidden">پاور</h2>
<h2 id="stagger-better" aria-hidden="true"><span style="--i:0">پ</span><span style="--i:1">ا</span><span style="--i:2">و</span><span style="--i:3">ر</span></h2>

/* CSS: same as previous but .visually-hidden hides original text for sighted users while keeping it for screen readers */

توضیح: در این الگو، متن اصلی قابل خواندن توسط اسکرین‌ریدرها نگه داشته شده و نسخه تزئینی که حروف جداگانه دارد با aria-hidden پنهان از اسکرین‌ریدرها می‌شود. این کار تجربهٔ بهتری برای کاربران کم‌توان و موتورهای جستجو فراهم می‌کند.

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

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

• تا حد امکان از transform و opacity استفاده کنید و از تغییرات layout جلوگیری کنید.
• برای انیمیشن‌های طولانی یا پیچیده از will-change با دقت استفاده کنید؛ مقداردهی بیش از حد می‌تواند حافظه را اشغال کند.
• همیشه از prefers-reduced-motion پشتیبانی کنید تا برای کاربرانی که به حرکت حساس‌اند اختلال ایجاد نشود.
• برای موبایل تا حد امکان تعداد عناصر متحرک را کاهش دهید و طول و فرکانس را کمتر کنید.
• از انیمیشن‌های ظریف و هدفمند استفاده کنید؛ استفادهٔ بیش از حد از افکت‌ها تجربهٔ کاربری را کاهش می‌دهد.

موارد استفاده مناسب

این افکت برای تیترهای ویژه، دعوت به اقدام (CTA)، نمایش اعلان‌ها یا ایجاد لحظه‌های تعاملی در صفحات معرفی محصول مناسب است. از افکت‌های پرش برای تاکید کوتاه و قابل فهم استفاده کنید، نه برای همه عناصر صفحه.

با استفاده از تکنیک‌های بالا می‌توانید افکت پرش متن را هم زیبا و هم بهینه و در عین حال قابل دسترس پیاده‌سازی کنید. توجه به جزئیات مثل easing، تاخیرها و پشتیبانی از تنظیمات کاربر تاثیر زیادی در کیفیت نهایی خواهد داشت.

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

ارسال