تخصيص شريط النص المتحرك باستخدام ميزة Marquee في HTML

اكتشف كيفية تخصيص شريط التمرير (marquee) لتحسين تجربة المستخدم وجعل محتوى موقعك أكثر ديناميكية وجاذبية.

تخصيص شريط نص المتحرك باستخدام ميزة Marquee في HTML

السلام عليكم ورحمة الله وبركاته

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

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

هل أنت مستعد لاكتشاف القطعة؟ لا تفوت فرصة معاينتها مباشرةً! اضغط على الزر أدناه لتجربة المعاينة الفورية في صِوانᴜɴPʟᴜɢ، حيث يمكنك رؤية كل التفاصيل بشكل رائع.

معاينة في صِوانᴜɴPʟᴜɢ

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

مميزات شريط الأخبار المتحرك

• دعم النصوص المتحركة: يتيح لك marquee عرض النصوص المتحركة أفقياً أو عمودياً.
• التخصيص المرئي: يمكن تعديل الألوان، الأيقونات، والحركة لجعل التصميم جذابًا.
• التوافق متعدد اللغات: يدعم النصوص باللغتين العربية والإنجليزية مع تخصيص الاتجاه.

معلومة! يمكنك استخدام شريط التمرير (marquee) لإضافة لمسة ديناميكية إلى موقعك، مثل عرض الأخبار أو الرسائل الترحيبية.

تحذير! عند استخدام marquee، تأكد من أنه لا يؤثر سلبًا على تجربة المستخدم، خاصةً في الأجهزة المحمولة.

نجاح! تم تخصيص شريط التمرير (marquee) بنجاح باستخدام الأكواد التي أضفتها.

خطأ! هناك خطأ في كود شريط التمرير. تأكد من إغلاق الوسوم بشكل صحيح واستخدام الخصائص المناسبة.

---

شرح الكود المستخدم

1. إضافة مكتبة الأيقونات: تم استخدام مكتبة Font Awesome لإضافة أيقونات بجانب النصوص، مما يضيف طابعًا مرئيًا أكثر جاذبية.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

2. التصميم باستخدام CSS: تم تخصيص التنسيقات التالية:

• الخلفية الشفافة: تم استخدام لون خلفية شفاف مع إضافة درجة من اللون الأزرق (rgba(0, 123, 255, 0.7)) ليعطي تأثيرًا مريحًا من دون إخفاء المحتوى الذي خلف الشريط.
• زوايا مدورة: تم إضافة خاصية border-radius بقيمة 10px لجعل زوايا الشريط مستديرة، مما يعطي مظهرًا عصريًا.
• الوضع الغامق: عند تفعيل الوضع الغامق، يتغير لون الخلفية إلى لون أغمق وأكثر راحة للعين باستخدام background-color: #2d2d30، مع تغيير لون النصوص إلى الأبيض.

.news-ticker {
    background-color: rgba(0, 123, 255, 0.7); /* لون خلفية شبه شفاف */
    color: white; /* لون النص */
    padding: 10px 0; /* إضافة حشوة على الجانبين */
    border-radius: 10px; /* زوايا مدورة */
    overflow: hidden; /* إخفاء النص الزائد */
    white-space: nowrap; /* منع النص من الانتقال إلى السطر التالي */
    position: relative; /* لتحديد موضع العنصر */
    display: flex; /* استخدام flexbox لتنسيق المحتوى */
    align-items: center; /* محاذاة العناصر عموديًا */
}

3. إضافة النصوص المتحركة: تم استخدام عنصر <marquee> لتحريك النصوص بشكل أفقي. يمكن تخصيص حركة النصوص باستخدام الخصائص التالية:

• direction: يمكن تحديد اتجاه حركة النص (يمين أو يسار) باستخدام هذه الخاصية. مثلًا، direction: left يجعل النص يتحرك من اليمين إلى اليسار.
• scrollamount: تحدد سرعة حركة النص. القيمة الافتراضية هي 6، ولكن يمكن زيادتها أو تقليلها لضبط سرعة النص المتحرك.
• behavior: تحدد طريقة حركة النص، سواء كانت مستمرة (scroll) أو في شكل انزلاق من اليمين أو اليسار (slide).

.news-ticker marquee {
    display: inline-block; /* عرض العنصر بشكل خطي */
    font-size: 20px; /* تحديد حجم الخط للنص المتحرك */
    flex-grow: 1; /* السماح للنص بالنمو لملء المساحة المتاحة */
}

4. إضافة الأيقونات للنصوص: تم إضافة أيقونات صغيرة بجانب النص المتحرك لجعل الشريط أكثر تفاعلية. تم استخدام خاصية position: absolute لتحديد موضع الأيقونة، مع خاصية direction: rtl لضبط اتجاه الأيقونات عند عرض النصوص العربية. كما تم عكس الأيقونات باستخدام transform: scaleX(-1) لتتناسب مع الاتجاه.

.icon {
    position: absolute; /* تحديد موقع الأيقونة بشكل مطلق */
    font-size: 18px; /* حجم الأيقونة */
    margin: 5px 0; /* تقليل المسافة بين الأيقونة والنص */
    left: 10px; /* تحديد المسافة من الجهة اليسرى */
    direction: rtl; /* تحديد اتجاه النص للنصوص العربية */
}

.icon-arabic {
    transform: scaleX(-1); /* عكس الأيقونة أفقياً لتتناسب مع النصوص العربية */
}

5. دعم الوضع الغامق: عند تفعيل الوضع الغامق، يتم تغيير لون الخلفية إلى لون غامق (#2d2d30) ويظل النص أبيض ليتماشى مع الوضع المظلم، مما يوفر راحة للعين أثناء التصفح في الإضاءة المنخفضة.

/* دعم الوضع الغامق */
.drK .news-ticker {
    background-color: #2d2d30; /* تغيير لون الخلفية في الوضع الغامق */
    color: white; /* تغيير لون النص في الوضع الغامق */
}

.drK .news-ticker marquee {
    color: white; /* تغيير لون النص المتحرك في الوضع الغامق */
}

ملاحظات إضافية:

• يمكن تخصيص النصوص المتحركة باستخدام الـ CSS، كما يمكن تغيير الاتجاه وسرعة الحركة بناءً على تفضيلات المستخدم.
• يُنصح بتخصيص الألوان وحجم الخط بما يتناسب مع مظهر موقعك الخاص.

<marquee direction="right" scrollamount="8" behavior="scroll">
    هذا نص عربي يتحرك من اليسار إلى اليمين.
</marquee>

4. دعم الاتجاهات المتعددة: تم توفير نصوص تدعم اتجاه الكتابة من اليمين لليسار (RTL) للنصوص العربية. تم توفير تصميم مماثل للنصوص الإنجليزية من اليسار لليمين (LTR).

5. الوضع الغامق: لتوفير تجربة مريحة أثناء التصفح الليلي، تم تخصيص ألوان داكنة باستخدام كلاس .drK.

.drK .news-ticker {
    background-color: #2d2d30;
    color: white;
}

---

إضافة شريط الأخبار المتحرك إلى مدونة بلوجر

إضافة مكتبة الأيقونات Font Awesome إلى قالب بلوجر:

1. فتح لوحة التحكم في بلوجر: قم بتسجيل الدخول إلى حسابك في بلوجر واذهب إلى لوحة التحكم.
2. المظهر: انقر على المضهر
3. الدخول إلى إعدادات القالب: من قائمة القالب في لوحة التحكم، انقر على السهم بجانب "تخصيص" أختر "تعديل HTML".
4. إضافة الكود داخل وسم <head>: في ملف HTML للقالب، خلال لوحة التحكم انقر على Ctrl + F ابحث عن الوسم <head> وأضف الكود التالي داخل هذا الوسم:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

5. حفظ التغييرات: بعد إضافة الكود، قم بحفظ التغييرات اضغط على زر الحفظ ايقونته ().
6. استخدام الأيقونات في القالب: الآن يمكنك استخدام أيقونات Font Awesome في أي مكان في القالب باستخدام الأكواد الخاصة بها. على سبيل المثال:

   <i class="fas fa-home"></i>

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

إضافة CSS فوق عنصر ]]</b:skin> في قالب بلوجر:

1. فتح لوحة التحكم في بلوجر: في بلوجر اذهب إلى لوحة التحكم.
2. المظهر: انقر على المضهر ايقونته ()
3. الدخول إلى إعدادات القالب: من قائمة القالب في لوحة التحكم، انقر على السهم بجانب "تخصيص" أختر "تعديل HTML".
4. إضافة الكود داخل الوسم ]]</b:skin>: في ملف HTML للقالب، من خلال لوحة التحكم انقر على Ctrl + F ابحث عن الوسم ]]</b:skin> وأضف الكود الخاص بـ CSS مباشرة قبل هذا الوسم. على سبيل المثال:

   
               /* إضافة الأنماط الخاصة بك هنا */
               .news-ticker{background-color:rgba(0,123,255,0.7);color:white;padding:10px;border-radius:10px;overflow:hidden;white-space:nowrap;position:relative;display:flex;align-items:center;padding:10px 0}.news-ticker marquee{display:inline-block;font-size:20px;flex-grow:1}.icon{position:right;font-size:18px;margin:5px 0;direction:rtl}.icon-arabic{transform:scaleX(-1)}.drK .news-ticker{background-color:#2d2d30;color:white}.drK .news-ticker marquee{color:white}
               

5. حفظ التغييرات: بعد إضافة الكود، قم بحفظ التغييرات اضغط على زر الحفظ ايقونته ().
6. تحقق من التغييرات: بعد حفظ التغييرات، قم بمراجعة المدونة للتأكد من أن الأنماط قد تم تطبيقها بشكل صحيح.

الوضع الغامق نظرا لان لكل قالب كلاس dark-mode خاص به يمكن ان تغير التسمية drK بالتسمية المعرفة للكلاس على حسب قالبك مثلا قالب بلس يو يستخدم تسمية drK سيو بلاس يستخدم تسمية dark-mode و سكويز يستخدم تسمية dm

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

جمال الحزازي

إضافة كود HTML لعرض شريط أخبار متحرك في بلوجر:

1. فتح لوحة التحكم في بلوجر: في بلوجر اذهب إلى لوحة التحكم.
2. الدخول إلى "التخطيط": في لوحة التحكم، اذهب إلى "التنسيق" حيث يمكنك تعديل محتويات الصفحة الرئيسية أو إضافة عناصر جديدة.
3. إضافة الكود إلى أحد الأدوات: اختر المكان الذي تريد إضافة شريط الأخبار المتحرك فيه، مثل أداة "HTML/JavaScript"، واضغط على "إضافة أداة".
4. لصق الكود داخل الأداة: في نافذة الأداة، ضع الكود التالي:

   <div class="news-ticker">
               <i class="fas fa-bullhorn icon"></i>
               <marquee direction="right" scrollamount="8" behavior="scroll">
                   هذا نص عربي يتحرك من اليسار إلى اليمين.
               </marquee>
           </div>
   
           <br/>
   
           <div class="news-ticker">
               <marquee direction="left" scrollamount="8" behavior="scroll">
                   This is English text moving from right to left.
               </marquee>
               <i class="fas fa-bullhorn icon"></i>
           </div>

5. حفظ التغييرات: بعد إضافة الكود، اضغط على زر "حفظ" ايقونته () لإضافة شريط الأخبار المتحرك إلى الصفحة.
6. تحقق من التغييرات: بعد حفظ التغييرات، قم بمراجعة الصفحة الرئيسية أو المشاركة للتأكد من أن شريط الأخبار يعمل بشكل صحيح.

إضافة الكود في صفحة ثابتة أو مشاركة:

1. فتح لوحة التحكم في بلوجر: قم بتسجيل الدخول إلى حسابك في بلوجر واذهب إلى لوحة التحكم.
2. الدخول إلى "الصفحات" أو "المشاركات": في لوحة التحكم، اختر "الصفحات" لإضافة الكود إلى صفحة ثابتة أو اختر "المشاركات" لإضافة الكود إلى مشاركة.
3. تحرير الصفحة أو المشاركة: اختر الصفحة الثابتة أو المشاركة التي تريد إضافة شريط الأخبار إليها واضغط على "تعديل" انتقل إلى وضع العرض النصي (Text mode) في محرر الصفحة الثابتة أو المشاركة غير من وضع الانشاء الذي رمزه () الى وضع التكويد الذي رمزه ().
4. إضافة الكود في محرر النصوص: في المحرر، ضع الكود التالي في المكان الذي ترغب في ظهور شريط الأخبار فيه:

   <div class="news-ticker">
               <i class="fas fa-bullhorn icon"></i>
               <marquee direction="right" scrollamount="8" behavior="scroll">
                   هذا نص عربي يتحرك من اليسار إلى اليمين.
               </marquee>
           </div>
   
           <br/>
   
           <div class="news-ticker">
               <marquee direction="left" scrollamount="8" behavior="scroll">
                   This is English text moving from right to left.
               </marquee>
               <i class="fas fa-bullhorn icon"></i>
           </div>

5. حفظ التغييرات: بعد إضافة الكود، اضغط على "نشر" أو "تحديث" في الغالب ايقونته () لحفظ التغييرات في الصفحة أو المشاركة.
6. تحقق من التغييرات: بعد نشر أو تحديث الصفحة أو المشاركة، قم بمراجعتها للتأكد من أن شريط الأخبار يظهر بشكل صحيح.

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

---

اضف الى معلوماتك سابقا قد قدمت شريط عرض المقالات الساخنة كويدجت مدفوع به تخصيصات قوية التحريك و اسلوب العرض و التخصيص و ايضا محاكات التحكم في الايقاف و التشغيل الويدجت وضيفته عرض المقالات الساخنة لمدونتك يمكنك شراء القطعة ب 4 دولار للموقع الواحد.

خاتمة

باستخدام ميزة marquee مع تخصيص التصميم بواسطة CSS، يمكنك إنشاء تجربة مستخدم جذابة ومتفاعلة. ومع ذلك، يُفضل استخدام حلول حديثة مثل CSS animations لتوفير أداء أفضل وتوافق مع معايير الويب. إذا كنت تبحث عن حلول أكثر حداثة، فلا تتردد في التعمق في مكتبات JavaScript مثل GSAP أو التخصيص باستخدام CSS.

ما هو شريط التمرير (marquee) وكيف يمكن استخدامه؟

شريط التمرير (marquee) هو عنصر HTML يتيح لك تحريك النص أو المحتوى أفقيًا أو عموديًا عبر الصفحة. يمكن استخدامه لعرض الأخبار العاجلة أو الرسائل الترويجية بطريقة ديناميكية.

هل يمكن تخصيص حركة شريط التمرير؟

نعم، يمكن تخصيص حركة شريط التمرير باستخدام خصائص CSS مثل السرعة والاتجاه. يمكنك استخدام خاصية animation لتحديد سرعة الحركة، وdirection لتحديد الاتجاه.

هل يؤثر استخدام شريط التمرير على تجربة المستخدم؟

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

هل يمكن جعل شريط التمرير أكثر استجابة في التصميم؟

نعم، يمكن استخدام الاستجابة عبر CSS لجعل شريط التمرير يتناسب مع جميع أحجام الشاشات. يمكن تحديد خصائص مثل max-width وflex لضمان التوافق مع الأجهزة المختلفة.

يمكنك الحصول على المزيد من المعلومات حول تاج <marquee>way2tutorial.

هل سبق واستخدمت هذه الميزة في مشروعك؟ شاركنا تجربتك في التعليقات!

المشاركات ذات الصلة

شكرًا لمساعدة #ChatGPT في إعداد هذا المقال

المصدر:
SiwaneXYZ©
https://www.siwane.xyz/2024/12/marquee-html.html