Softonic

مولد النصوص القابلة للتمرير

خطوة 1 / 3

اكتب رسالتك

سطر واحد، حتى 500 حرف. الرموز التعبيرية مدعومة أيضًا.

التالي: التنسيق

تُستخدم العناوين المتنقلة لعرض كميات كبيرة من المعلومات على شريط ضيق في الشاشة، مثل شرائط الإعلانات وأرقام أسهم الشركات وشعارات الفعاليات. يعيد هذا المولد إنشاء التأثير الكلاسيكي HTML <marquee> باستخدام حركة CSS خالصة من نوع @keyframes وtransform: translateX()، بحيث تظل هذه التقنية تعمل في جميع المتصفحات الحديثة دون الحاجة إلى الوسم القديم. اختر الرسالة المطلوبة، واضبط سرعة التكرار بالثواني لكل دورة، وحدد الألوان وحجم الخط، ثم عاين الشريط المتحرك مباشرةً قبل إعادة بنائه باستخدام كود CSS الموضّح أدناه.

كيفية إنشاء شريط إعلان قابل للتمرير

  1. 1

    أدخل الرسالة

    أدخل العنوان. تُقرأ السطور القصيرة (من 4 إلى 10 كلمات) بشكل أفضل على الشريط المتحرك.

  2. 2

    اختر السرعة المناسبة

    كلما قل عدد الثواني، زادت سرعة التمرير؛ ويُعدّ دورة كاملة مدتها من 30 إلى 60 ثانية مناسبة للقوائم الزمنية على نمط الأخبار.

  3. 3

    حدد الألوان والحجم

    اختر خلفية أمامية للنص، وخلفية لشريط العناوين، بالإضافة إلى حجم خط يتناسب مع ارتفاع عنوانك.

  4. 4

    عرض مسبق حي

    تتحرك الرسوم التوضيحية في الوقت الفعلي، مما يسمح لك بتقييم مدى وضوح العرض قبل الشحن.

  5. 5

    أعد بناءه باستخدام CSS

    انسخ نمط `@keyframes` و`transform: translateX()` الموضّح أدناه إلى ورقة الأنماط الخاصة بك لإعادة إنتاج الشريط المتحرك على موقعك.

لماذا استخدام حركات CSS بدلاً من <marquee>؟

تم التخلي عن استخدام علامة <marquee> في معيار HTML5، وقد صنّفتها منظمة WHATWG على أنها قديمة وغير فعالة. لا تزال المتصفحات تعرضها حاليًا، لكن أدوات وسائل الوصول وبرامج التحقق من التوافق تُعترض عليها، كما يفقد المستخدم سيطرة دقيقة على عمليات التيسير والدوران. أما الرسوم المتحركة من نوع transform: translateX() داخل علامة overflow: hidden، فإنها تُظهر سلوكًا بصريًا متطابقًا تمامًا باستخدام الأدوات الحديثة.

ضبط السرعة

يعتمد الوقت اللازم للتمرير على كل من مدة التعرض وعرض الشاشة الكلي. قاعدة تقريبية تُستخدم بالنسبة لمربع عرض يبلغ 1200 بكسل هي:

المدة الشعور الاستخدام النموذجي
10–20 ثانية سريع، يتطلب تركيزًا مبيعات عاجلة، تنبيهات هامة
30–45 ثانية شريط الأخبار النتائج الحية وأشرطة العناوين الرئيسية
60–90 ثانية البيئة العامة لافتات الموقع وغرف المؤتمرات
أكثر من 120 ثانية يكاد لا يتحرك لافتات زخرفية من علامات تجارية فاخرة

قائمة التحقق من سهولة الوصول

  • لف الشريط باستخدام مادة role="marquee" أو aria-live="off" لمنع أجهزة قراءة الشاشة من إعادة إعلان الرسالة في كل دورة.
  • احترم إعداد الحركة المخفضة باستخدام @media (prefers-reduced-motion: reduce) { animation: none; } وعرض النص بشكل ثابت.
  • احرص على أن يكون معدل التباين بين النص والخلفية لا يقل عن 4.5:1؛ إذ يصعب قراءة النص المتحرك مقارنةً بالنص الثابت.
  • لا تضع المعلومات الحيوية (مثل الإشعارات القانونية، الأسعار، رسائل الأخطاء) فقط داخل شريط التمرير.

الأسئلة الشائعة

لا؛ المعاينة هي عنصر <div> مع عنصر overflow: hidden، بالإضافة إلى حركة متحركة من نوع CSS باسم @keyframes تتحرك بها المنطقة الداخلية باستخدام عنصر translateX، ويتم التحقق من مطابقته لمواصفات HTML5 الحديثة.

أضف animation-play-state: paused إلى خانة الاختيار المعلقة على الحاوية؛ يجد بعض المستخدمين أن هذا الأسلوب أكثر سهولة مقارنةً باستخدام حلقة ثابتة.

نعم. أضف animation-direction: reverse إلى العنصر الذي يحمل الحركة (.scrolling-text__track في الكود المُنشأ). تبقي النسختان الحلقة متصلة بلا انقطاع في الاتجاهين، وهذا مفيد للغات RTL.

لا، عمليات تحويل CSS تُنفَّذ على وحدة معالجة الرسوميات (GPU)، والنص يظل نصًا HTML عاديًا داخل هيكل العناصر (DOM)، وبالتالي تقرأه أداة التنقّل بشكل طبيعي، ولا تعيق الحركات المتحركة الخيط الرئيسي للتنفيذ.

تبقى رسالتك في متصفحك، فلا تُرسل إلى خوادمنا ولا تُضاف إلى رابط الصفحة. تحتفظ بها علامة التبويب هذه فقط لتعرضها الخطوة التالية، ويمسحها زر «ابدأ من جديد» أو إغلاق علامة التبويب. أما إعدادات العرض (السرعة والاتجاه والخط والحجم والألوان والتأثيرات) فتنتقل بين الخطوات ضمن رابط الصفحة.

أدوات ذات صلة

محوّل النصوص اللاتينية بأسلوب غيارو

نسّق النص اللاتيني بأحرف Unicode كاملة العرض أو داخل دوائر أو مربعات أو بخط رياضي عريض. أضف مسافات وزخارف ثم انسخ نبذة قصيرة أو اسماً للعرض.

أداة البحث عن كلمات Wordle

أدخل تخمينات إنجليزية من خمسة أحرف، وحدّد لون كل خانة بالأخضر أو الأصفر أو الرمادي للعثور على كلمات مطابقة. تراعي الأداة الحروف المتكررة بدقة.

مولّد نصوص Zalgo

حوّل نصك إلى Zalgo ملعون وذي طابع خاطئ عبر تكديس العلامات التشكيلية التجميعية فوق كل حرف وتحته. شدّة قابلة للضبط.

مترجم برايل

ترجم النص إلى برايل يونيكود من الدرجة الأولى وفُكّ ترميز برايل إلى حروف. يتعامل مع الأحرف الكبيرة والأرقام وعلامات الترقيم.

رمز المربع: نسخ ولصق

انسخ رمز المربع ² إضافة إلى الأرقام العلوية والسفلية والكسور الشائعة ووحدات المساحة والحجم مثل m² وcm² وkm². انقر للنسخ.

مولد أسماء الأعمال

أنشئ أفكار أسماء للأعمال من كلمات مفتاحية وأسلوب تسمية، ثم تحقق من النطاقات والسجلات والعلامات قبل الاعتماد.

الأداة متاحة بلغات أخرى