FA-TOOLS — Header Component
DIRECT LINE 09202232789
آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS

رفیق برنامه‌نویس، دنبال راهی هستی که متن‌هات توی سایتت جون بگیرن و بازدیدکننده‌ها رو میخکوب کنن؟ افکت تایپ‌رایتر همون چیزیه که نیاز داری! این افکت نه تنها جذابیت بصری فوق‌العاده‌ای به وب‌سایتت می‌ده، بلکه می‌تونه توجه کاربر رو به محتوای اصلی جلب کنه و تجربه کاربری رو بهبود ببخشه. و نگران نباش، لازم نیست چرخ رو از اول اختراع کنی. ما اینجا هستیم تا مرحله به مرحله، بدون حتی یک خط جاوااسکریپت و فقط با جادوی CSS، این افکت رو بسازیم. همین حالا سری به گنجینه کدهای آماده CSS ما بزن و ببین چطور می‌تونی این افکت و کلی افکت باحال دیگه رو توی پروژه‌هات به کار ببری. برای هر سوال یا نیاز به راهنمایی بیشتر هم، یه زنگ بزن، من هستم!

نقشه راه افکت تایپ‌رایتر: یک نگاه سریع

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS — تصویر 1

🎯 هدف:

  • نمایش متن کاراکتر به کاراکتر.
  • ایجاد مکان‌نما (Caret) چشمک‌زن.

🛠️ ابزارها:

  • HTML: ساختار متن.
  • CSS: قلب انیمیشن.

⚙️ مراحل اصلی:

  • تعیین طول نهایی متن (width).
  • مخفی کردن سرریز (overflow: hidden).
  • انیمیشن تایپ (@keyframes typing) برای width.
  • انیمیشن مکان‌نما (@keyframes blink-caret) برای border-right.

💡 نکات کلیدی:

  • تابع steps() برای حرکت پله‌ای.
  • خاصیت animation-fill-mode: forwards.
  • واحد ch برای اندازه‌گیری کاراکتر.

نتیجه: یک رابط کاربری پویا، جذاب و کاربرپسند!

مقدمه‌ای بر افکت تایپ‌رایتر: چرا و چگونه؟

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS — تصویر 2

افکت تایپ‌رایتر یا همان “ماشین تحریر”، چیزی فراتر از یک جلوه بصری ساده است. این افکت به محتوای تو زندگی می‌بخشد و آن را از حالت ایستا خارج می‌کند. حتماً دیده‌ای که در وب‌سایت‌های مدرن، هدرها یا پیام‌های کلیدی به جای اینکه یکباره ظاهر شوند، حرف به حرف یا کلمه به کلمه نوشته می‌شوند. این کار نه تنها ظاهر سایت رو حرفه‌ای‌تر می‌کنه، بلکه به لحاظ روانشناسی هم روی کاربر اثر می‌گذارد. کاربران ناخودآگاه جذب این نوع انیمیشن‌ها می‌شوند، زیرا حس کنجکاوی‌شان برانگیخته شده و منتظر تکمیل شدن پیام می‌مانند. این یعنی افزایش زمان ماندگاری کاربر در صفحه (Dwell Time) و نرخ تعامل (Engagement Rate) که هر دو سیگنال‌های مثبت سئو هستند.

ساخت این افکت با جاوااسکریپت هم امکان‌پذیره، اما هدف ما در این آموزش، پیاده‌سازی اون با CSS خالص است. چرا CSS؟ چون سبک‌تر، سریع‌تر، و در بسیاری از موارد برای چنین افکت‌های بصری، کارآمدتر است. با CSS می‌تونیم به سادگی و بدون نیاز به سربار جاوااسکریپت، یک تجربه روان و بهینه ایجاد کنیم. کلید اصلی این کار، ترکیب هوشمندانه ویژگی‌هایی مثل overflow: hidden، واحد ch (برای عرض کاراکترها) و تابع steps() در Keyframesهای CSS است. این تابع steps() به انیمیشن می‌گوید که به جای حرکت نرم و پیوسته، در چندین “گام” مشخص حرکت کند که دقیقاً حس تایپ کردن حرف به حرف رو ایجاد می‌کند.

پایه و اساس: HTML ساختاریافته برای افکت

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS — تصویر 3

قبل از اینکه وارد دنیای پر رمز و راز CSS بشیم، باید یک ساختار HTML ساده و مناسب برای متن‌مون داشته باشیم. برای افکت تایپ‌رایتر، متن شما باید داخل یک المان <p>، <h1> یا <div> قرار بگیره. مهم اینه که ما به این المان یک class یا id بدیم تا بتونیم با CSS اون رو هدف قرار بدیم. فرض می‌کنیم می‌خواهیم یک پیام خوش‌آمدگویی جذاب رو به نمایش بذاریم.

نمونه HTML:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>افکت تایپ‌رایتر CSS</title>
    <link rel="stylesheet" href="style.css"> <!-- فایل CSS رو اینجا لینک می‌کنیم -->
</head>
<body style="background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
    <div class="typewriter-container">
        <h1 class="typewriter-text">سلام، به دنیای انیمیشن‌های CSS خوش آمدید!</h1>
    </div>
</body>
</html>

همونطور که می‌بینی، ما یک div والد با کلاس .typewriter-container داریم و داخلش متن اصلی رو با کلاس .typewriter-text قرار دادیم. این جداسازی به ما کمک می‌کنه تا استایل‌ها و انیمیشن‌ها رو دقیق‌تر اعمال کنیم.

جادوی CSS: گام به گام تا انیمیشن

حالا که HTML رو آماده کردیم، وقتشه که با CSS جادو کنیم. بخش عمده کار ما اینجاست و باید با دقت هر خاصیت رو بررسی کنیم. یادت باشه، هر خط کد اینجا دلیل منطقی خودش رو داره.

استایل‌دهی اولیه متن

برای اینکه افکت تایپ‌رایتر درست کار کنه، باید چندتا پیش‌نیاز رو برای متن اصلی تعریف کنیم:

  • font-family و font-size: مشخص کردن فونت و اندازه اون برای محاسبه دقیق عرض هر کاراکتر ضروریه.
  • overflow: hidden: این مهم‌ترین خاصیت برای پنهان کردن متنی است که هنوز “تایپ” نشده.
  • white-space: nowrap: مطمئن می‌شه که متن در یک خط باقی می‌ماند و شکسته نمی‌شود. (برای سناریوهای چندخطی کمی پیچیده‌تر است که بعداً بهش می‌پردازیم).
  • border-right: این همون مکان‌نما (Caret) چشمک‌زنه. به جای استفاده از یک المان جداگانه، از border سمت راست متن استفاده می‌کنیم.
  • width: 0: در ابتدا، عرض متن رو صفر می‌کنیم تا هیچ کاراکتری دیده نشه. انیمیشن این عرض رو زیاد می‌کنه.

CSS اولیه (style.css):

.typewriter-text {
    font-family: monospace; /* فونت ثابت برای محاسبه دقیق 'ch' */
    font-size: 2em;
    color: #333;
    white-space: nowrap; /* متن در یک خط بماند */
    overflow: hidden; /* پنهان کردن متن اضافی */
    border-right: 2px solid #333; /* مکان‌نما */
    width: 0; /* شروع از صفر عرض */
    margin: 0 auto; /* مرکز قرار دادن متن */
    padding-right: 5px; /* کمی فاصله برای مکان‌نما */
}

/* برای ریسپانسیو بودن: در موبایل فونت کوچکتر */
@media (max-width: 768px) {
    .typewriter-text {
        font-size: 1.5em;
    }
}

یک نکته مهم: برای واحد ch که بهش نیاز داریم، بهتره از یک font-family با عرض ثابت (monospace) استفاده کنی. این کار محاسبه دقیق عرض رو آسون‌تر می‌کنه. اگر فونت‌های دیگه رو ترجیح می‌دی، باید به صورت دستی یا با جاوااسکریپت عرض نهایی رو محاسبه کنی.

افکت تایپ (typing)

حالا نوبت به انیمیشن اصلی، یعنی انیمیشن “تایپ” می‌رسه. این انیمیشن مسئول افزایش عرض متن از صفر تا عرض کامل اونه.

  • @keyframes typing: تعریف یک فریم کلیدی جدید به نام typing.
  • from { width: 0; } to { width: [طول_متن]ch; }: این قسمت میگه که انیمیشن از عرض صفر شروع و تا عرض نهایی متن (به واحد ch) ادامه پیدا کنه. عدد [طول_متن] دقیقاً برابر با تعداد کاراکترهای متن توست. برای “سلام، به دنیای انیمیشن‌های CSS خوش آمدید!”، حدوداً 40 کاراکتر داریم.
  • animation property:
    • [duration]s: مدت زمان انیمیشن (مثلاً 4 ثانیه).
    • steps([char_count], end): اینجاست که جادو اتفاق می‌افته! steps() انیمیشن رو به گام‌های مساوی تقسیم می‌کنه. تعداد [char_count] باید برابر با تعداد کاراکترهای متن باشه (40 تا). end یعنی تغییر در انتهای هر گام اتفاق بیفته.
    • forwards: مطمئن می‌شه که بعد از اتمام انیمیشن، المان در حالت نهایی خودش باقی می‌مونه (یعنی عرض کامل).

افکت مکان‌نما (caret/blinking cursor)

برای اینکه مکان‌نما (همون border سمت راست) چشمک بزنه، به یک انیمیشن جداگانه نیاز داریم.

  • @keyframes blink-caret: یک فریم کلیدی جدید برای چشمک زدن.
  • from, to { border-color: transparent; } 50% { border-color: #333; }: این فریم کلیدی میگه که مکان‌نما در ابتدا و انتها شفاف باشه و در نیمه انیمیشن، رنگ اصلیش (مشکی) رو داشته باشه. این باعث میشه چشمک بزنه.
  • animation property:
    • .75s: مدت زمان هر سیکل چشمک زدن.
    • step-end: مثل steps(1, end) عمل می‌کنه، یعنی هر گام فوراً تغییر می‌کنه.
    • infinite: مکان‌نما تا ابد چشمک می‌زنه.

تکمیل انیمیشن با Keyframes

حالا همه چیز رو با هم ترکیب می‌کنیم. انیمیشن تایپ باید اول اجرا بشه، و بعد از اون، انیمیشن مکان‌نما شروع به کار کنه. 

.typewriter-text {
    font-family: monospace;
    font-size: 2em;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #333;
    width: 0;
    margin: 0 auto;
    padding-right: 5px;

    /* مدت زمان انیمیشن تایپ بر اساس تعداد کاراکترها و سرعت دلخواهت */
    /* طول متن "سلام، به دنیای انیمیشن‌های CSS خوش آمدید!" حدود 40 کاراکتره (شامل فاصله و علائم نگارشی) */
    /* زمان: 4 ثانیه (0.1s برای هر کاراکتر) */
    /* delay: 0 ثانیه */
    animation: 
        typing 4s steps(40, end) forwards, /* انیمیشن تایپ */
        blink-caret .75s step-end infinite; /* انیمیشن چشمک زدن مکان‌نما */
    
    /* تاخیر در شروع انیمیشن (اگر نیاز بود) */
    /* animation-delay: 1s; */
}

/* تعریف Keyframes برای انیمیشن تایپ */
@keyframes typing {
    from { width: 0; }
    to { width: 40ch; } /* عرض نهایی بر اساس تعداد کاراکترها */
}

/* تعریف Keyframes برای انیمیشن چشمک زدن مکان‌نما */
@keyframes blink-caret {
    from, to { border-color: transparent; } /* مکان‌نما پنهان */
    50% { border-color: #333; } /* مکان‌نما ظاهر */
}

/* برای ریسپانسیو بودن */
@media (max-width: 768px) {
    .typewriter-text {
        font-size: 1.5em; /* کوچکتر کردن فونت */
        /* نیاز به تنظیم مجدد عرض 'to' در keyframes typing اگر تعداد کاراکترها فرق کند */
        /* مثلاً اگر متن کوتاه‌تری برای موبایل نمایش دهیم */
        /* در غیر این صورت، 'ch' خودکار با فونت تغییر می‌کند */
    }
}

حالا با این کدها، می‌تونی یک افکت تایپ‌رایتر روان و جذاب داشته باشی. نکته کلیدی اینه که مدت زمان انیمیشن تایپ (4s) و تعداد گام‌ها (40) باید با هم متناسب باشن. یعنی اگر 40 کاراکتر داریم و می‌خوایم هر کاراکتر 0.1 ثانیه طول بکشه، کل زمان میشه 4 ثانیه.
برای افکت‌های رسپانسیو، باید حواست به font-size و در نتیجه ch unit باشه. معمولاً با تغییر font-size، واحد ch هم خودش رو تغیر می‌دهد و نیاز به دستکاری مجدد width در @keyframes نیست. اما اگر متن تغییر می‌کنه، باید دقت کنی.

تکمیل‌کننده: جاوااسکریپت برای انعطاف‌پذیری بیشتر (اختیاری)

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

جاوااسکریپت می‌تونه:

  • تعداد کاراکترهای متن رو به صورت خودکار محاسبه کنه و width نهایی و steps() رو بر اساس اون تنظیم کنه (با استفاده از CSS Custom Properties).
  • چندین متن رو به صورت متوالی یا رندوم نمایش بده، یکی بعد از دیگری.
  • افکت رو با تعاملات کاربر (مثلاً کلیک روی یک دکمه) شروع یا متوقف کنه.

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

نکات پیشرفته برای یک افکت بی‌نقص

برای اینکه افکت تایپ‌رایتر تو واقعاً بی‌نقص و کاربردی باشه، باید به چندتا نکته ریز ولی مهم توجه کنی:

مدیریت متن چندخطی

همونطور که گفتیم، white-space: nowrap متن رو روی یک خط نگه می‌داره. اگر می‌خوای متن چندخطی داشته باشی، دیگه نمی‌تونی از این خاصیت استفاده کنی. در این صورت، افکت تایپ‌رایتر با CSS کمی مشکل‌ساز می‌شه چون width تنها روی یک خط منطقی عمل می‌کنه. برای متن‌های چندخطی، اغلب بهترین راه حل استفاده از جاوااسکریپت است که هر خط رو به صورت جداگانه یا هر کاراکتر رو با تأخیر وارد می‌کنه.

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

  • تست ریسپانسیو بودن: حتماً افکت رو روی دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ و حتی تلوزیون) تست کن تا مطمئن بشی به درستی نمایش داده می‌شه. تغییر font-size در Media Queries برای صفحه‌های کوچکتر معمولاً کافیه.
  • Accessible Design: برای کاربرانی که ممکن است به انیمیشن‌ها حساس باشند یا از ابزارهای کمک‌کننده استفاده کنند، خاصیت @media (prefers-reduced-motion) رو در نظر بگیر. می‌تونی انیمیشن رو برای این کاربران غیرفعال کنی.

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

جنبه بهینه‌سازی توضیحات/راه حل
عملکرد (Performance) از خاصیت‌های width و border-color استفاده کن که مرورگر به راحتی بهینه‌سازی می‌کنه (برخلاف خاصیت‌هایی مثل left و top).
Accessibility از @media (prefers-reduced-motion: reduce) استفاده کن تا انیمیشن رو برای کاربران حساس به حرکت، غیرفعال کنی.
متن دینامیک اگر متن از منبع خارجی میاد، از جاوااسکریپت برای محاسبه steps() و width (تنظیم CSS Custom Properties) استفاده کن.

عیب‌یابی سریع: حل مشکلات رایج

در طول پیاده‌سازی افکت تایپ‌رایتر ممکنه به چندتا مشکل رایج برخورد کنی. نگران نباش، این راه حل‌ها بهت کمک می‌کنه:

مشکل ۱: متن ناگهان ظاهر می‌شود یا بعد از اتمام ناپدید می‌گردد.

راه حل: این مشکل معمولاً به خاطر عدم استفاده از animation-fill-mode: forwards; در انیمیشن تایپینگ است. این خاصیت تضمین می‌کنه که المان بعد از اتمام انیمیشن، در حالت نهایی خودش (یعنی با عرض کامل) باقی می‌مونه.

مشکل ۲: مکان‌نما چشمک نمی‌زند یا همیشه ثابت است.

راه حل: مطمئن شو که هم خاصیت border-right رو به متن دادی و هم @keyframes blink-caret رو به درستی تعریف کردی. همچنین، بررسی کن که انیمیشن blink-caret با infinite و step-end اعمال شده باشه.

مشکل ۳: افکت روی موبایل کند یا ناپایدار است.

راه حل: عملکرد انیمیشن‌ها روی دستگاه‌های با منابع کمتر ممکنه افت کنه. مطمئن شو که از فونت‌های بهینه استفاده می‌کنی. همچنین، می‌تونی سرعت انیمیشن رو با animation-duration کمی بیشتر کنی یا تعداد steps() رو در صورتی که متن کوتاهتر است، کاهش دهی.
برای رسانی بهتر، از `transform` و `opacity` (که GPU-accelerated هستند) در صورت امکان استفاده کن، هرچند برای این افکت `width` انتخاب بهتری است.

مشکل ۴: متن روی یک خط نمی‌ماند و شکسته می‌شود.

راه حل: این به خاطر حذف یا عدم اعمال خاصیت white-space: nowrap; است. این خاصیت رو به المان متنی‌ات اضافه کن.

مشکل ۵: واحد ch درست کار نمی‌کند یا عرض نهایی متن نادرست است.

راه حل: واحد ch بر اساس عرض کاراکتر ‘0’ در فونت فعلی است. اگر از فونت‌های متغیر (Proportional Fonts) استفاده کنی، ch ممکنه دقت کافی رو نداشته باشه. بهترین کار اینه که یا از فونت monospace استفاده کنی، یا با استفاده از جاوااسکریپت عرض واقعی متن رو به پیکسل محاصبه کنی و اون رو به عنوان یک CSS Custom Property تنظیم کنی.

پرسش‌های متداول (FAQ)

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

Q: بهترین راه برای پیاده‌سازی افکت تایپ‌رایتر چندخطی چیست؟

A: همانطور که اشاره شد، پیاده‌سازی افکت تایپ‌رایتر چندخطی با CSS خالص چالش‌برانگیز است، زیرا خاصیت width و overflow: hidden به طور طبیعی روی یک خط عمل می‌کنند. بهترین رویکرد برای متن‌های چندخطی یا دینامیک، استفاده از جاوااسکریپت است که می‌تواند هر خط یا حتی هر کلمه را به صورت جداگانه انیمیت کند. می‌تونی نمونه‌های کدهای جاوااسکریپت رو برای این کار بررسی کنی.

Q: آیا استفاده از این افکت برای سئو (SEO) مضر است؟

A: خیر، تا زمانی که متن اصلی در HTML شما وجود داشته باشد و مرورگرها و خزنده‌های موتورهای جستجو بتوانند آن را بخوانند، مشکلی برای سئو پیش نمی‌آید. این افکت صرفاً یک لایه بصری روی متن اصلی شماست. در واقع، با بهبود تجربه کاربری و افزایش تعامل، ممکن است به صورت غیرمستقیم حتی تأثیر مثبتی بر سئو داشته باشد.

Q: چگونه می‌توان سرعت افکت تایپ‌رایتر را کنترل کرد؟

A: سرعت افکت تایپ‌رایتر عمدتاً توسط دو خاصیت در انیمیشن typing کنترل می‌شود:

  • animation-duration: این زمان کلی انیمیشن را تعیین می‌کند.
  • تعداد گام‌ها در steps([char_count], end): این تعداد مراحلی است که انیمیشن طی می‌کند.

با تغییر این دو مقدار می‌توانی سرعت تایپ هر کاراکتر را تنظیم کنی. مثلاً برای سریع‌تر کردن، زمان (duration) را کاهش دهی یا تعداد گام‌ها را ثابت نگه داری.

Q: آیا می‌توانم از این افکت برای متن‌های فارسی استفاده کنم؟

A: بله، این افکت برای متن‌های فارسی نیز کاملاً کاربردی است. واحد ch و خاصیت overflow: hidden بدون مشکل با زبان فارسی کار می‌کنند. فقط کافی است تعداد کاراکترهای متن فارسی خود را به درستی محاسبه کرده و در steps() و width انیمیشن تایپینگ اعمال کنید.

امیدوارم این آموزش کامل و جامع بهت کمک کرده باشه تا بتونی افکت تایپ‌رایتر مورد نظرت رو با CSS بسازی. فراموش نکن که همیشه می‌تونی برای الهام گرفتن و پیدا کردن کدهای بیشتر، به سایت fa-tools.ir سر بزنی.

function copyCode(button) {
const pre = button.nextElementSibling;
const code = pre.querySelector(‘code’);
const text = code.innerText;

const textarea = document.createElement(‘textarea’);
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand(‘copy’);
document.body.removeChild(textarea);

button.textContent = ‘کپی شد!’;
setTimeout(() => {
button.textContent = ‘کپی کد’;
}, 2000);
}

مطالب مرتبط:

آموزش ساخت افکت تایپ‌رایتر (Typewriter) روان و بی‌نقص با استفاده از انیمیشن‌های CSS

اضافه کردن حس پویایی به وب‌سایت، یکی از بهترین راه‌ها برای جلب توجه کاربران در همان نگاه اول است. افکت تایپ‌رایتر یا همان افکت ماشین‌نویسی، یکی از جذاب‌ترین افکت‌های متنی است که حس زنده بودن و تعامل را به مخاطب القا می‌کند. شاید فکر کنید برای ساخت چنین افکتی حتماً باید سراغ کتابخانه‌های سنگین جاوا اسکریپت بروید؛ اما حقیقت این است که با چند خط کد تمیز و بهینه CSS می‌توانید یک انیمیشن تایپ‌رایتر فوق‌العاده روان، سبک و کاملاً واکنش‌گرا بسازید.

در این مقاله، صفر تا صد ساخت این افکت را به صورت قدم‌به‌قدم یاد می‌گیرید و یاد می‌گیرید چطور مشکلات رایج آن مثل به‌هم‌ریختگی در موبایل را حل کنید.

—

نقشه راه سریع: افکت تایپ‌رایتر در ۴ قدم

اگر عجله دارید، کل فرآیند ساخت این افکت در این چهار بخش خلاصه شده است:

۱. ساختار HTML
یک تگ متنی ساده با تعداد کاراکتر مشخص ایجاد کنید.
۲. تنظیمات اولیه CSS
استفاده از overflow: hidden و white-space: nowrap برای مخفی کردن متن.
۳. جادوی steps()
تقسیم حرکت انیمیشن به تعداد دقیق حروف متن شما.
۴. انیمیشن مکان‌نما
اضافه کردن چشمک‌زن افقی (Border) برای شبیه‌سازی دقیق ماشین‌نویسی.

—

افکت تایپ‌رایتر چیست و چرا CSS خالص؟

افکت تایپ‌رایتر (Typewriter Effect) به تکنیکی گفته می‌شود که در آن متن به صورت کاراکتر به کاراکتر و با تاخیر زمانی ظاهر می‌شود، دقیقاً مثل زمانی که یک نفر در حال تایپ کردن با ماشین تحریر است.

استفاده از CSS خالص برای این افکت چندین مزیت بزرگ دارد:

  1. عملکرد فوق‌العاده بالا (Performance): انیمیشن‌های CSS مستقیماً توسط پردازنده گرافیکی (GPU) رندر می‌شوند و برعکس جاوا اسکریپت، باعث کندی یا پرش صفحه نمی‌شوند.
  2. کاهش حجم صفحه: بدون نیاز به دانلود کتابخانه‌های خارجی، سرعت لود صفحه شما بهینه‌تر باقی می‌ماند.
  3. سادگی در توسعه: مدیریت و تغییر کدها بسیار راحت‌تر است و نیازی به دانش عمیق برنامه‌نویسی ندارد.

اگر دوست دارید طراحی وب را از پایه و اصولی یاد بگیرید، یادگیری مفاهیم پایه در بخش آموزش html اولین و مهم‌ترین قدم برای شما خواهد بود.

—

قدم اول: ساختار استاندارد HTML

برای شروع کار به یک ساختار HTML بسیار ساده نیاز داریم. یک تگ نگهدارنده مانند `div` یا `h1` تمام چیزی است که لازم داریم. برای اینکه متن ما به درستی تایپ شود، بهتر است متن خود را درون یک تگ با کلاس مشخص قرار دهیم:

“`html

طراحی وب‌سایت با کدهای بهینه و تمیز

“`

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

—

قدم دوم: کدهای CSS و جادوی انیمیشن

حالا سراغ بخش هیجان‌انگیز کار یعنی کدهای CSS می‌رویم. برای اینکه افکت ما بدون نقص کار کند، باید چند ویژگی حیاتی را به متن خود اختصاص دهیم. در ادامه کدهای استایل‌دهی را با هم بررسی می‌کنیم. شما می‌توانید این کدهای استایل را مستقیماً از بخش تیکه‌های کد CSS کپی کرده و در پروژه خود استفاده کنید.

“`css
.typewriter-text {
font-family: ‘Courier New’, Courier, monospace; /* فونت تک‌فاصله برای زیبایی بیشتر */
overflow: hidden; /* پنهان کردن کاراکترهای تایپ نشده */
border-left: .15em solid #0073aa; /* ایجاد افکت چشمک‌زن مکان‌نما در سمت چپ (برای زبان فارسی) */
white-space: nowrap; /* جلوگیری از شکستن متن به خط بعدی */
margin: 0 auto;
letter-spacing: .15em;
width: 0; /* شروع انیمیشن از عرض صفر */
animation:
typing 3.5s steps(35, end) forwards,
blink-caret .75s step-end infinite;
}

/* انیمیشن تایپ شدن متن */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}

/* انیمیشن چشمک زدن مکان‌نما */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #0073aa; }
}
“`

*توجه داشته باشید که چون متن ما فارسی (RTL) است، خط چشمک‌زن مکان‌نما را به جای `border-right` روی `border-left` تنظیم کرده‌ایم تا در پایان جملات فارسی قرار بگیرد.*

—

راز روان بودن افکت: واحد ch و تابع steps

اگر انیمیشن بالا را اجرا کنید، متوجه می‌شوید که در برخی مرورگرها متن به آرامی و به صورت کشویی باز می‌شود، نه به صورت بخش‌بخش و کاراکتری. راهکار حل این مئسله استفاده از دو مفهوم کلیدی است:

۱. واحد اندازه‌گیری ch

واحد `ch` مخاطف کلمه “Character” است. این واحد دقیقاً برابر با عرض کاراکتر صفر (0) در فونت انتخاب شده است. اگر فونت شما از نوع Monospace (تک‌فاصله یا ثابت‌عرض) باشد، عرض تمام حروف با هم برابر خواهد بود. بنابراین اگر متن شما ۳۵ کاراکتر دارد، تنظیم عرض روی `35ch` باعث می‌شود متن شما دقیقاً به اندازه طول خودش فضا اشغال کند.

۲. تابع زمان‌بندی steps() در انیمشین

به جای استفاده از توابع حرکتی نرم مثل `linear` یا `ease`، از تابع `steps()` استفاده می‌کنیم. این تابع انیمیشن را به بخش‌های مساوی تقسیم می‌کند. به عنوان مثال، `steps(35)` انیمیشن باز شدن عرض را در ۳۵ پله مجزا اجرا می‌کند که حس تایپ شدن تک‌تک حروف را تزمین می‌کند.

—

ساخت تایپ‌رایتر پویا با متغیرهای CSS

یکی از مشکلات کدهای سنتی این بود که برای هر متن با تعداد حروف متفاوت، باید یک کلاس CSS جداگانه می‌نوشتید. اما با استفاده از متغیرهای CSS (CSS Variables) می‌توانیم این فرآیند را کاملاً پویا کنیم.

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

“`html

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

“`

“`css
.dynamic-typewriter {
font-family: ‘Courier New’, monospace;
display: inline-block;
overflow: hidden;
border-left: .15em solid #ff5722;
white-space: nowrap;
width: 0;
/* استفاده از متغیر چاکس برای تعیین عرض و مراحل انیمیشن */
animation:
dynamic-typing 4s steps(var(–char-count)) forwards,
blink-caret .75s step-end infinite;
}

@keyframes dynamic-typing {
from { width: 0; }
to { width: calc(var(–char-count) * 1ch); }
}
“`

با این ترفند هوشمندانه، دیگر نیازی به نوشتن کدهای تکراری ندارید؛ فقط کافیست تعداد کاراکترهای متن خود را بشمارید و آن را در بخش `style` تگ HTML وارد کنید.

—

مقایسه روش CSS خالص و جاوا اسکریپت

برای انتخاب بهترین ابزار جهت پیاده‌سازی این افکت روی سایت خود، جدول زیر مقایسه‌ای کاربردی بین این دو روش پرطرفدار به شما ارائه می‌دهد:

ویژگی / معیار روش CSS خالص (پیشنهادی)
سرعت بارگذاری (سرعت صفحه) فوق‌العاده سریع و بدون تاخیر رندرینگ
تاثیر روی سئو سایت عالی؛ ربات‌های گوگل متن را از همان ابتدا می‌خوانند
پیچیدگی کدنویسی بسیار کم و قابل فهم با چند خط استایل ساده
انعطاف‌پذیری برای متون طولانی محدود به متون یک‌خطی (برای چندخطی نیاز به ترفند دارد)

اگر به افکت‌های بسیار پیچیده‌تر، تایپ و پاک شدن متوالی کلمات گوناگون یا مدیریت متون چندخطی نیاز دارید، تلفیق کدهای بالا با قطعه کدهای اسنیپت جاوا اسکریپت دست شما را کاملاً باز خواهد گذاشت. همچنین برای دسترسی به صدها ابزار و کدهای آماده دیگر می‌توانید به صفحه اصلی سایت اسنیپت‌های آماده سر بزنید.

—

عیب‌یابی سریع و رفع مشکلات رایج

گاهی اوقات حین پیاده‌سازی افکت تایپ‌رایتر با مشکلاتی روبرو می‌شوید. در این بخش راه‌حل‌های سریع این مشکلات را با هم مرور می‌کنیم:

۱. متن من در موبایل شکسته و خراب می‌شود!

به این دلیل که ویژگی white-space: nowrap مانع شکستن خطوط می‌شود، اگر متن طولانی باشد در موبایل از کادر بیرون می‌زند. برای حل این مشکل، اندازه فونت را با واحدهای واکنش‌گرا مثل vw تنظیم کنید یا با استفاده از مدیا کوئری‌ها، اندازه فونت را در نمایشگرهای کوچک کاهش دهید.

۲. سرعت تایپ شدن حروف هماهنگ نیست و پرش دارد

دقت کنید که تعداد مراحل در تابع steps(N) باید دقیقاً برابر با تعداد حروف و فضاهای خالی (اسپیس‌ها) متن شما باشد. اگر این عدد کمتر یا بیشتر باشد، افکت شما پله‌پله و غیرطبیعی به نظر خواهد رسید.

۳. چطور می‌توانم افکت را پس از پایان تایپ متوقف کنم تا ناپدید نشود؟

مطمئن شوید در تعریف ویژگی انیمیشن از کلمه کلیدی forwards استفاده کرده‌اید. این ویژگی باعث می‌شود عنصر پس از اتمام انیمیشن، در آخرین فریم خود (یعنی با عرض کامل) باقی بماند.

علاوه بر زبان‌های سمت کلاینت، اگر مایل هستید اسکریپت‌های کاربردی بنویسید که داده‌ها را پردازش کرده و خروجی متنی تولید کنند، بخش اسنیپت پایتون می‌تواند ایده‌های جذابی به شما بدهد.

—

سوالات متداول (FAQ)

آیا افکت تایپ‌رایتر CSS برای سئو سایت مضر است؟

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

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

ساخت افکت چندخطی با CSS خالص کمی دشوار است زیرا white-space: nowrap را نباید حذف کنیم. برای متون چندخطی ساده، بهترین کار استفاده از چندین خط مجزا با تاخیر زمانی (animation-delay) متفاوت در اجرای انیمیشن هر خط است.

چرا مکان‌نما (Cursor) در زبان فارسی سمت چپ قرار می‌گیرد؟

به دلیل راست‌چین بودن متون فارسی (RTL)، متن از راست به چپ تایپ می‌شود. بنابراین باید خط چشمک‌زن را با استفاده از ویژگی border-left در سمت چپ متن ایجاد کنید تا حس طبیعی تایپ فارسی حفظ شود.

Table of Contents

آخرین نوشته‌ها

دسته‌ها