افکت تایپ کردن متن با CSS — راهنمای کامل

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

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

• سبک و بدون وابستگی به فریم‌ورک یا اسکریپت‌های اضافی.
• سازگاری بالا و کنترل کامل با keyframes و timing-function.
• قابلیت ترکیب با Media Queryها و prefers-reduced-motion برای دسترسی بهتر.

مثال ساده: افکت تایپ حرف‌به‌حرف با caret چشمک‌زن

<!-- HTML -->
<h1 class="typewriter">Hello, CSS Typing!</h1>

<!-- CSS -->
.typewriter {
  display: inline-block;
  overflow: hidden;               /* مخفی‌سازی حروف خارج از پهنا */  white-space: nowrap;            /* جلوگیری از شکست خط */  border-right: .12em solid #000; /* caret */  animation:
    typing 3s steps(20, end),
    blink-caret .75s step-end infinite;
  font-family: monospace;
}

/* تعداد مراحل steps باید تقریباً مساوی تعداد کاراکترها باشد */@keyframes typing {
  from { width: 0; }
  to { width: 18ch; } /* یا مقدار مناسب با عرض متن */}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

توضیح: در این مثال متن داخل عنصر قرار گرفته و با overflow: hidden و white-space: nowrap پهنای عنصر از 0 تا مقدار هدف (مثلاً 18ch) انیمیت می‌شود. تابع timing به‌صورت steps باعث می‌شود که ظاهر شدن کاراکترها مرحله‌ای باشد. caret با border-right شبیه‌سازی و با keyframe جدا چشمک می‌زند.

نکات و بهبودها برای مثال بالا

• به‌جای اندازه ثابت (18ch) می‌توانید از محاسبه تعداد کاراکترها استفاده کنید و steps را با همان تعداد تنظیم کنید.
• برای متن با طول متغیر یا ری‌سپانسیو می‌توان از max-width و clamp استفاده کرد یا از unit های ch برای تقریب مناسب.
• برای بهبود عملکرد، از prefers-reduced-motion برای کاربران با حساسیت به حرکت پشتیبانی کنید.

نسخه با پشتیبانی از prefers-reduced-motion و دسترسی

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: .12em solid #000;
  animation: typing 3s steps(20, end), blink-caret .75s step-end infinite;
}

/* کاربران درخواست کاهش حرکت داده‌اند */@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;        /* انیمیشن را حذف کنید */    border-right: none;     /* یا از caret ثابت استفاده کنید */  }
}

توضیح: با استفاده از media query بالا، اگر کاربر تنظیم سیستم‌عامل خود را برای کاهش حرکت فعال کرده باشد، انیمیشن حذف می‌شود تا تجربه دسترس‌پذیرتری فراهم شود.

افکت تایپ چند عبارت (بدون JS)

برای نمایش عباراتی که یکی پس از دیگری تایپ شوند، می‌توان چند span پشت هم قرار داد و با animation-delay آنها را زمان‌بندی کرد. این روش نیاز به تکرار است اما در پروژه‌های ساده کافی و بدون جاوااسکریپت است.

<h2 class="rotator">
  <span class="word">Design</span>
  <span class="word">Development</span>
  <span class="word">Deployment</span>
</h2>

.rotator { position: relative; display: inline-block; font-family: monospace; }
.word {
  position: absolute;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: .12em solid #000;
  opacity: 0;
  width: 0;
}

/* هر کلمه با تاخیر نمایش داده می‌شود */.word:nth-child(1) {
  animation: typing 2s steps(10, end) 0s forwards, blink-caret .75s step-end 0s infinite;
}
.word:nth-child(2) {
  animation: typing 2s steps(11, end) 3s forwards, blink-caret .75s step-end 3s infinite;
}
.word:nth-child(3) {
  animation: typing 2s steps(10, end) 6s forwards, blink-caret .75s step-end 6s infinite;
}

/* keyframes همانند مثال قبل */@keyframes typing { from { width: 0; opacity: 1; } to { width: 9ch; opacity: 1; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: black; } }

توضیح: هر span با delay مشخصی وارد می‌شود. این شیوه برای سه تا چهار عبارت مناسب است اما برای لیست‌های بلند یا متن داینامیک استفاده از JS منطقی‌تر است.

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

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

• همیشه prefers-reduced-motion را رعایت کنید.
• برای متن‌های طولانی از انیمیشن طولانی یا اسکرول استفاده نکنید؛ بهتر است متن را به قطعات کوچک تقسیم کنید.
• در موبایل مراقب فضای افقی باشید؛ white-space: nowrap ممکن است باعث overflow شود، پس max-width یا breakpoints را تعریف کنید.
• برای شبیه‌سازی طبیعی‌تر از steps(ن، end) استفاده کنید و تعداد را تقریباً برابر تعداد کاراکترها قرار دهید.
• برای عملکرد بهتر، avoid animating layout-heavy properties on large elements؛ اگر تعداد عناصر زیاد است، در صورت امکان از ترکیب JS و Transform استفاده کنید.

وقتی CSS کافی نیست — چه زمانی از JS استفاده کنیم؟

اگر نیاز دارید متن‌ها داینامیک باشند، از API سرور بیایند، یا بخواهید سرعت تایپ برای هر حرف متفاوت باشد، استفاده از جاوااسکریپت منطقی‌تر است. JS امکان شمارش خودکار کاراکترها، توقف/پخش مجدد، و ترکیب با stateهای UI را فراهم می‌کند.

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

افکت تایپ کردن با CSS راهی سریع و سبک برای افزودن حس تعاملی به صفحات است. با رعایت دسترسی، استفاده از steps برای جلوه‌ی طبیعی و توجه به نمایش در موبایل می‌توانید تجربه‌ای حرفه‌ای و جذاب ارائه دهید. برای متون پیچیده یا داینامیک، ترکیب CSS با JS بهترین انتخاب است.

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

ارسال