افکت نوشتن خودکار متن با CSS — راهنمای کامل

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

چطور این افکت کار می‌کند؟

در سطح پایه، دو رویکرد معمول وجود دارد:

• تحلیل طول متن و انیمیت کردن عرض (width) با واحد ch و تابع steps() برای ایجاد حرکت «حرف‌به‌حرف».
• استفاده از چندین عناصر span که هرکدام نمایش خود را با تأخیر زمان‌بندی می‌کنند (برای جمله‌ها یا کلمات چندتایی).

مثال ساده: تایپ‌رایتر یک‌بار اجرا شونده

/* HTML */<div class="typewriter">سلام، به سایت ما خوش آمدید!</div>
/* CSS */ .typewriter { font-family: monospace; overflow: hidden; /* پنهان کردن متن اضافی */ white-space: nowrap; /* جلوگیری از شکستن خط */ border-right: 2px solid #000; /* کرسر */ width: 0ch; /* شروع از عرض صفر */ animation: typing 3s steps(30, end) forwards, blink 0.75s step-end infinite; } @keyframes typing { from { width: 0ch; } to { width: 28ch; } /* مقدار مناسب بر اساس طول متن */ } @keyframes blink { 50% { border-color: transparent; } }

توضیح: این مثال با استفاده از overflow:hidden و white-space:nowrap متن را در یک خط نگه می‌دارد و عرض عنصر را از 0ch تا مقدار مناسب (28ch) انیمیت می‌کند. تابع steps(30, end) باعث می‌شود عرض به صورت پله‌ای و حرف‌به‌حرف تغییر کند. کرسر با border-right ساخته شده و انیمیشن blink آن را چشمک‌زن می‌کند.

بهبود: استفاده از متغیرها و ch برای مطابقت دقیق‌تر با طول متن

:root {
  --speed: 4s;
  --chars: 28; /* تعداد کاراکترها */}

.typewriter {
  font-family: monospace;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  width: 0ch;
  animation:
    typing var(--speed) steps(var(--chars), end) forwards,
    blink 0.8s step-end infinite;
}

/* typing keyframes همانند مثال قبل */@keyframes typing {
  from { width: 0ch; }
  to   { width: calc(var(--chars) * 1ch); }
}

توضیح: در این نسخه از CSS variables برای کنترل سرعت و تعداد کاراکترها استفاده شده تا به‌راحتی قابل تنظیم باشد. واحد ch کمک می‌کند عرض بر حسب تعداد کاراکتر تنظیم شود و steps(var(–chars)) تعداد پله‌ها را مطابق متن تعیین می‌کند.

افکت چرخان/تغییر دهنده کلمات فقط با CSS

اگر بخواهید چند کلمه یا عبارت را بصورت متوالی تایپ و پاک کنید (loop)، می‌توانید هر عبارت را در یک span قرار دهید و با animation-delay و keyframes مناسب آنها را زمان‌بندی کنید:

/* HTML */<div class="rotator">برنامه‌نویس طراح مدیر محصول</div>
/* CSS */ .rotator { font-family: monospace; display: inline-block; overflow: hidden; vertical-align: bottom; position: relative; } .rotator span { position: absolute; left: 0; white-space: nowrap; border-right: 2px solid; opacity: 0; animation: showWord 9s linear infinite; } /* هر span را با تاخیر متفاوت می‌کنیم */ .rotator span:nth-child(1) { animation-delay: 0s; } .rotator span:nth-child(2) { animation-delay: 3s; } .rotator span:nth-child(3) { animation-delay: 6s; } @keyframes showWord { 0%,10% { opacity: 0; width: 0ch; } 10%,30% { opacity: 1; width: 10ch; } /* تایپ شدن */ 30%,60% { opacity: 1; width: 10ch; } /* ثابت */ 60%,80% { opacity: 1; width: 0ch; } /* پاک شدن */ 80%,100% { opacity: 0; width: 0ch; } }

توضیح: در این روش هر عبارت در لایه‌ای جدا قرار دارد و با انیمیشن showWord به ترتیب ظاهر، باقی‌ماندن و محو شدن را تجربه می‌کند. تغییر مقدار animation-delay ترتیب نمایش را کنترل می‌کند. توجه کنید که width باید با طول واقعی متن هماهنگ باشد یا می‌توان از تنظیمات دقیق‌تر با متغیرها استفاده کرد.

جدول خلاصه خصوصیات مهم

نکات دسترسی و سئو

• برای خواناتر شدن در صفحه‌خوان‌ها، متن کامل را در یک attribute مانند aria-label یا در یک عنصر مخفی قرار دهید تا موتورهای جستجو و اسکرین‌ریدرها متن را بخوانند:

<div class="typewriter" aria-label="سلام، به سایت ما خوش آمدید!">سلام، به سایت ما خوش آمدید!</div>

توضیح: aria-label محتوای کامل را برای ابزارهای کمکی نگه می‌دارد، در حالی که انیمیشن بصری برای کاربران حفظ می‌شود.

• اگر نیاز به کنترل دقیق‌تر سرعت یا مکث‌های دینامیک دارید، ترکیب CSS با JavaScript گزینه بهتری است. اما برای ساده‌ترین حالات، CSS خالص عملکرد کافی و سبک دارد.
• از فونت monospace برای همگنی بهتر واحد ch استفاده کنید.

بهینه‌سازی و مشکلات رایج

• همیشه طول width را متناسب با محتوای واقعی تنظیم کنید؛ در غیر این صورت ممکن است حرف‌ها بریده یا اضافی نشان داده شوند.
• استفاده از steps() با تعداد مناسب پله‌ها باعث می‌شود تایپ واقعی‌تر به نظر برسد. تعداد پله‌ها معمولاً برابر با تعداد کاراکترها است.
• اجرای بی‌پایان انیمیشن‌ها می‌تواند مصرف باتری و CPU را بالا ببرد؛ برای موبایل‌ها انیمیشن‌های طولانی یا تکرار محدود پیشنهاد می‌شود.

نتیجه‌گیری و موارد استفاده

افکت نوشتن خودکار با CSS یک ابزار بصری ساده و مؤثر برای جلب توجه است. با ترکیب درست width بر حسب ch، steps()، و یک کرسر چشمک‌زن می‌توان افکت‌های زیبا و سبک بدون JavaScript ساخت. برای محتوای پیچیده‌تر یا انیمیشن‌های تعاملی، ترکیب CSS و JS مناسب‌تر است. همیشه به دسترسی و عملکرد توجه کنید تا تجربه کاربری بهتری ارائه دهید.

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

ارسال