آموزش جامع Typed.js

📚معرفی و شروع سریع

Typed.js متن را کاراکتر به کاراکتر تایپ و سپس پاک می‌کند — مثل یک ماشین تحریر. کافیست یک span خالی بسازید و آدرسش را بدهید.

<!-- HTML -->
<span id="typed"></span>

<!-- JS -->
<script src="typed.umd.js"></script>
<script>
new Typed('#typed', {
  strings:   ['سلام دنیا!', 'Typed.js خیلی ساده است.'],
  typeSpeed: 50,   // ms بین هر کاراکتر
  loop:      true
});
</script>

💬strings — چند رشته

strings آرایه‌ای از متن‌هاست که به ترتیب تایپ و پاک می‌شوند. می‌توانید متن‌های فارسی، انگلیسی یا ترکیبی داشته باشید.

new Typed('#el', {
  strings: [
    'مهندس فرانت‌اند',
    'طراح UI/UX',
    'JavaScript Developer',
    'React & Vue.js'
  ],
  typeSpeed:  60,
  backSpeed:  40,
  backDelay:  1500,  // توقف قبل از پاک کردن (ms)
  loop:       true
});

// stringsElement — رشته‌ها از یک المان HTML
<ul id="src" style="display:none">
  <li>رشته اول</li>
  <li>رشته دوم</li>
</ul>
new Typed('#el', { stringsElement: '#src' });

⏱سرعت تایپ و پاک کردن

با typeSpeed و backSpeed سرعت تایپ و پاک کردن را کنترل کنید. عدد کمتر = سریع‌تر.

// خیلی سریع
new Typed('#fast', {
  strings:   ['این خیلی سریع تایپ می‌شود!'],
  typeSpeed: 10,   // 10ms بین کاراکترها
  backSpeed: 5,
  loop:      true
});

// خیلی کند — مثل انسان
new Typed('#slow', {
  strings:   ['این آهسته تایپ می‌شود...'],
  typeSpeed: 120,  // 120ms بین کاراکترها
  backSpeed: 60,
  loop:      true
});

🔁Loop و تکرار

با loop: true چرخه بی‌نهایت می‌شود. با loopCount تعداد دور را محدود کنید.

// Loop بی‌نهایت
new Typed('#el', {
  strings:   ['رشته اول', 'رشته دوم', 'رشته سوم'],
  loop:      true,
  loopCount: Infinity  // پیش‌فرض
});

// فقط ۲ دور
new Typed('#el', {
  strings:   ['اول', 'دوم', 'سوم'],
  loop:      true,
  loopCount: 2
});

// بدون loop — تایپ و توقف روی رشته آخر
new Typed('#el', {
  strings:     ['نوشته می‌شود و می‌ماند'],
  loop:        false,
  showCursor:  false  // cursor بعد از اتمام مخفی
});

✎Cursor سفارشی

Typed.js به صورت پیش‌فرض یک cursor چشمک‌زن نمایش می‌دهد. با cursorChar و showCursor آن را شخصی‌سازی کنید.

// cursor پیش‌فرض: |
new Typed('#el', { strings: ['...'], showCursor: true, cursorChar: '|' });

// cursor سفارشی
new Typed('#el', { cursorChar: '_' });  // زیرخط
new Typed('#el', { cursorChar: '▌' });  // بلوک
new Typed('#el', { cursorChar: '●' });  // دایره
new Typed('#el', { cursorChar: '✎' });  // مداد

// بدون cursor
new Typed('#el', { showCursor: false });

/* CSS چشمک‌زن — Typed خودکار اضافه می‌کند */
.typed-cursor { animation: blink .7s infinite; }

📄HTML در متن

با contentType: 'html' می‌توانید تگ‌های HTML مثل <strong>، <span style> و emoji داخل رشته‌ها استفاده کنید.

new Typed('#el', {
  strings: [
    '<strong>متن بولد</strong>',
    '<span style="color:#e74c3c">متن قرمز</span>',
    'کد: <code>const x = 10;</code>',
    '🎉 با emoji هم کار می‌کند!'
  ],
  contentType: 'html',   // پیش‌فرض 'html' است
  typeSpeed:   50,
  backSpeed:   30,
  loop:        true
});

⏳startDelay و Pause

با startDelay شروع را به تأخیر بیندازید. با ^ درون رشته می‌توانید مکث اضافه کنید.

// تأخیر ۲ ثانیه قبل از شروع
new Typed('#el', {
  strings:    ['بعد از ۲ ثانیه شروع می‌شود'],
  startDelay: 2000,
  loop:       true
});

// ^ درون رشته = مکث به میلی‌ثانیه
new Typed('#el', {
  strings: [
    'سلام^1000 خوش آمدید!^500 ادامه...'  // 1s مکث، 0.5s مکث
  ],
  typeSpeed: 60,
  loop:      true
});

⚡Callback‌ها

Typed.js رویدادهای مختلفی ارائه می‌دهد که می‌توانید در لحظات کلیدی کد اجرا کنید.

new Typed('#el', {
  strings:   ['اول', 'دوم', 'سوم'],
  loop:      true,

  onBegin:        (self) => console.log('شروع شد'),
  onComplete:     (self) => console.log('یک دور تمام شد'),
  preStringTyped: (pos, self) => console.log('شروع رشته', pos),
  onStringTyped:  (pos, self) => console.log('رشته تایپ شد', pos),
  onLastStringBackspaced: (self) => console.log('آخرین پاک شد'),
  onTypingPaused: (pos, self) => console.log('مکث'),
  onTypingResumed:(pos, self) => console.log('ادامه'),
  onDestroy:      (self) => console.log('نابود شد'),
  onStop:         (pos, self) => console.log('متوقف'),
  onStart:        (pos, self) => console.log('شروع')
});

🔎کنترل برنامه‌ای

نمونه Typed.js متدهای stop()، start()، toggle() و destroy() دارد.

const typed = new Typed('#el', {
  strings:   ['متن یک', 'متن دو', 'متن سه'],
  loop:      true
});

typed.stop();    // توقف
typed.start();   // شروع/ادامه
typed.toggle();  // تغییر وضعیت
typed.reset();   // ریست به ابتدا
typed.destroy(); // حذف کامل — برای cleanup

// خواندن وضعیت
typed.el          // المان DOM
typed.strings     // آرایه رشته‌ها
typed.sequence    // ترتیب تایپ

🔥الگوهای رایج

Hero Section با Typed.js

Terminal / کد تایپ شونده

رنگ‌بندی متناوب

// هر رشته رنگ متفاوت — با CSS class تغییر رنگ
new Typed('#el', {
  strings: [
    '<span style="color:#e74c3c">قرمز</span>',
    '<span style="color:#3498db">آبی</span>',
    '<span style="color:#88ce02">سبز</span>'
  ],
  contentType: 'html',
  loop: true
});

📄 چیت‌شیت گزینه‌ها

🚀زمین بازی کد (Playground)

افکت تایپ خودکار Typed.js را بساز: رشته‌ها، سرعت و حلقه را تغییر بده و ▶ اجرا را بزن. نسخهٔ ۲.۱.۰ آفلاین بارگذاری می‌شود.