تأثير الكتابة التلقائية بالنص باستخدام CSS أتوماتيك

تأثير الكتابة التلقائية بقى منتشر جدًا في مواقع البرمجة واللاندينج بيجز
التأثير ده بيخلي النص يبان كأنه بيتكتب حرف حرف قدام الزائر، وده بيشد الانتباه وبيخلي الزائر يقعد وقت أطول في الصفحة

الجميل بقى؟ إنك تقدر تنفذه بـ CSS بس من غير JavaScript

فكرة تأثير الكتابة التلقائية في CSS​

الفكرة بسيطة جدًا إحنا بنعتمد على:

• @keyframes علشان نعمل حركة
• خاصية animation
• خاصية steps() علشان نعرض الحروف واحدة واحدة

يعني بنقلل عرض النص شوية شوية، فيبان كأنه بيتكتب تلقائي

---

​

مثال عملي على تأثير الكتابة التلقائية بـ CSS​

خلينا نشوف مثال سهل وبسيط تقدر تستخدمه على طول

.typing {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #00ffcc;
  font-size: 24px;
  animation: typing 4s steps(30, end) forwards,
             blink 0.7s infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

مثال HTML لتشغيل التأثير​

<div class="typing">
  Learn CSS Typing Effect Like a Pro
</div>

تقدر تغير عدد الخطوات في steps(30) حسب طول النص
وتتحكم في السرعة من خلال مدة الـ animation

---

​

ليه تأثير الكتابة التلقائية مهم للسيو؟​

استخدام Typing Effect CSS ليه فوائد كتير جدًا
بيشد انتباه الزائر
بيزود وقت البقاء في الصفحة
بيخلي المحتوى شكله احترافي
مناسب لمواقع تعلم البرمجة والشبكات
شغال من غير جافاسكريبت (خفيف وسريع)
وده كله بيأثر بشكل غير مباشر على تحسين محركات البحث

---

​

استخدامات شائعة لتأثير Typing Effect​

• عناوين الصفحات الرئيسية
• صفحات تعليم البرمجة
• بورتفوليو المبرمجين
• صفحات الهكر الأخلاقي
• صفحات الـ Landing Page

​

نصيحة مهمة​

متكترش من التأثير في الصفحة
استخدمه في عنوان واحد بس علشان يفضل شكله شيك ومش مزعج للزائر