Softonic

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

خطوة 1 / 2
التالي

تُستخدم العناوين المتنقلة لعرض كميات كبيرة من المعلومات على شريط ضيق في الشاشة، مثل شرائط الإعلانات وأرقام أسهم الشركات وشعارات الفعاليات. يعيد هذا المولد إنشاء التأثير الكلاسيكي 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 إلى خانة الاختيار المعلقة على الحاوية؛ يجد بعض المستخدمين أن هذا الأسلوب أكثر سهولة مقارنةً باستخدام حلقة ثابتة.

نعم. قم بتغيير القيمة النهائية لـ @keyframes من translateX(-100%) إلى translateX(100%)، وابدأ من -100% لتغيير اتجاه التشغيل. مفيد للغات RTL.

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

يبقى كل شيء داخل متصفحك أثناء عرض المحتوى مسبقًا؛ ولا يتم رفع أي بيانات أو تسجيلها.

أدوات ذات صلة

رمز أقل من أو يساوي

انسخ علامة ≤ ورموز المقارنة الرياضية المرتبطة بها. يشمل ذلك رموز Unicode وكيانات HTML وترميز LaTeX للجداول الحسابية والأوراق البحثية وصفحات الويب.

رموز أسهم للنسخ

انسخ أسهم Unicode شائعة بنقرة واحدة: أسهم مستقيمة ومزدوجة وقطرية ومعقوفة ودائرية ومثلثة للمستندات والدردشة والتصميم.

مولد أسماء النطاقات

ولّد أفكار أسماء نطاقات من كلمة مفتاحية واحدة: بادئات ولواحق وأحرف مكررة ونهايات رقمية عبر ستة نطاقات علوية شائعة.

محوّل النص الملائم لعسر القراءة

أعد تنسيق النص الملصق في فقرات قصيرة وأسطر من نحو 72 حرفًا لتسهيل القراءة. انسخ النتيجة إلى أي مستند أو بريد إلكتروني أو محرر.

استخراج الرسائل الإلكترونية من النص

استخرج كل عنوان بريد إلكتروني فريد من أي كتلة نصية أو HTML. المطابقة الذكية تتجاهل علامات الترقيم والتكرارات لتحصل على قائمة نظيفة جاهزة للنسخ.

استخراج أرقام الهواتف من النص

اعثر على كل رقم هاتف في كتلة نصية، سواء بالصيغ الدولية أو المحلية، وانسخ القائمة النظيفة برقم واحد في كل سطر.

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