[كود CODE] شريط محتوى متحرك باستخدام HTML و CSS و JavaScript

AnGeL · 2024-04-21

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

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

مكونات الكود

يتكون الكود من ثلاثة أجزاء رئيسية:

1. HTML: يحدد هيكل الشريط والعناصر المكونة له.
2. CSS: يتحكم في التنسيق والتصميم البصري للشريط والعناصر الداخلية.
3. JavaScript: يوفر الحركة والتفاعل للشريط، بما في ذلك بدء الحركة وإيقافها والتحكم في سرعتها.

شرح الكود

HTML

كود:

<div class="IQDES2-container">
  <div class="IQDES2-title">أخبار عاجلة</div>
  <div class="IQDES2-content-wrapper">
    <div class="IQDES2-content">
      مرحبًا بكم في موقعنا!
      <span class="IQDES2-separator"><i class="bi bi-star"></i></span>
      استمتع بتجربة تصفح فريدة ومميزة.
      <span class="IQDES2-separator"><i class="bi bi-star"></i></span>
      اكتشف أحدث المنتجات في <a href="https://www.example.com" target="_blank">متجرنا الإلكتروني</a>!
    </div>
  </div>
</div>

يحتوي قسم HTML على العناصر التالية:

- `<div class="IQDES2-container">`: الحاوية الرئيسية للشريط.
- `<div class="IQDES2-title">`: عنوان الشريط.
- `<div class="IQDES2-content-wrapper">`: حاوية لمحتوى الشريط.
- `<div class="IQDES2-content">`: محتوى الشريط نفسه، والذي يتضمن الرسائل والفواصل والروابط.

CSS

CSS:

.IQDES2-container {
  width: 100%;
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 10px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.IQDES2-title {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  color: #007bff;
  z-index: 1;
}

.IQDES2-content-wrapper {
  overflow: hidden;
  position: relative;
  width: calc(100% - 120px);
  margin-right: 120px;
}

.IQDES2-content {
  display: inline-block;
  white-space: nowrap;
  color: #333;
}

.IQDES2-content a {
  color: #007bff;
  text-decoration: none;
}

.IQDES2-content a:hover {
  text-decoration: underline;
}

.IQDES2-separator {
  display: inline-block;
  margin: 0 10px;
  color: #007bff;
}

@media screen and (max-width: 600px) {
  .IQDES2-content {
    animation: IQDES2-scroll-mobile 20s linear infinite;
  }
  @keyframes IQDES2-scroll-mobile {
    0% {
      transform: translate3d(20%, 0, 0);
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
}

قسم CSS يحدد التنسيق والأنماط المرئية للعناصر المختلفة في الشريط:

- `.IQDES2-container`: تنسيق الحاوية الرئيسية، بما في ذلك العرض والخلفية والتباعد والحدود وظل الصندوق.
- `.IQDES2-title`: تنسيق عنوان الشريط، بما في ذلك الموضع والخط والخلفية واللون.
- `.IQDES2-content-wrapper`: تنسيق حاوية المحتوى، بما في ذلك الفيض والموضع والعرض.
- `.IQDES2-content`: تنسيق محتوى الشريط، بما في ذلك العرض والمسافات البيضاء واللون.
- `.IQDES2-content a`: تنسيق الروابط داخل المحتوى.
- `.IQDES2-separator`: تنسيق الفواصل بين الرسائل.

يتضمن قسم CSS أيضًا استعلام وسائط (`@media screen`) لتحديد تنسيق مختلف للشريط على الشاشات الصغيرة (الأجهزة المحمولة). يتم تطبيق حركة مختلفة على الشاشات الصغيرة باستخدام `@keyframes` و `animation` لتحسين تجربة المستخدم على الأجهزة المحمولة.

JavaScript

JavaScript:

const IQDES2_content = document.querySelector('.IQDES2-content');
const IQDES2_contentWrapper = document.querySelector('.IQDES2-content-wrapper');
const IQDES2_scrollSpeedDesktop = 30; // سرعة الحركة للشاشات الكبيرة بالثواني
const IQDES2_direction = 'ltr'; // اتجاه الكتابة: 'rtl' للعربية، 'ltr' للإنجليزية

function IQDES2_startAnimation() {
  const IQDES2_scrollSpeed = IQDES2_scrollSpeedDesktop;
  const IQDES2_keyframes = `@keyframes IQDES2-scroll {
    0% {
      transform: translate3d(${IQDES2_direction === 'rtl' ? '100%' : '-100%'}, 0, 0);
    }
    100% {
      transform: translate3d(${IQDES2_direction === 'rtl' ? '-100%' : '100%'}, 0, 0);
    }
  }`;
  const IQDES2_style = document.createElement('style');
  IQDES2_style.innerHTML = IQDES2_keyframes;
  document.head.appendChild(IQDES2_style);

  IQDES2_content.style.animation = `IQDES2-scroll ${IQDES2_scrollSpeed}s linear infinite`;
}

IQDES2_startAnimation();
window.addEventListener('resize', IQDES2_startAnimation);

// إيقاف الحركة مؤقتًا عند النقر على الشريط في الأجهزة المحمولة
IQDES2_contentWrapper.addEventListener('click', function() {
  if (IQDES2_content.style.animationPlayState === 'paused') {
    IQDES2_content.style.animationPlayState = 'running';
  } else {
    IQDES2_content.style.animationPlayState = 'paused';
  }
});

// إيقاف الحركة مؤقتًا عند تحريك الماوس فوق الشريط في أجهزة سطح المكتب
IQDES2_contentWrapper.addEventListener('mouseover', function() {
  IQDES2_content.style.animationPlayState = 'paused';
});

// استئناف الحركة عند إزالة الماوس من فوق الشريط في أجهزة سطح المكتب
IQDES2_contentWrapper.addEventListener('mouseout', function() {
  IQDES2_content.style.animationPlayState = 'running';
});

قسم JavaScript يوفر الحركة والتفاعل للشريط:

- `IQDES2_startAnimation()`: دالة لبدء حركة الشريط. تقوم بإنشاء `@keyframes` ديناميكيًا بناءً على اتجاه الكتابة وتطبيق الحركة على محتوى الشريط.
- `window.addEventListener('resize', IQDES2_startAnimation)`: يستدعي دالة `IQDES2_startAnimation()` عند تغيير حجم نافذة المتصفح لضمان تحديث الحركة.
- تفاعلات النقر وتحريك الماوس: توفر إمكانية إيقاف الحركة مؤقتًا واستئنافها عند النقر على الشريط في الأجهزة المحمولة، وعند تحريك الماوس فوق الشريط في أجهزة سطح المكتب.

يمكن تخصيص سرعة الحركة واتجاه الكتابة عن طريق تعديل المتغيرات `IQDES2_scrollSpeedDesktop` و `IQDES2_direction` حسب الحاجة.

إمكانيات التخصيص

يوفر الكود العديد من الخيارات لتخصيص شريط المحتوى المتحرك حسب متطلباتك:

1. تغيير المحتوى: يمكنك تعديل النص والروابط والفواصل داخل عنصر `<div class="IQDES2-content">` لتخصيص الرسائل المعروضة.

2. تعديل التصميم: يمكنك تغيير الألوان والخطوط والأحجام والهوامش وغيرها من خصائص التصميم في قسم CSS لتتناسب مع تصميم موقعك.

3. ضبط سرعة الحركة: يمكنك تعديل قيمة `IQDES2_scrollSpeedDesktop` في JavaScript لتغيير سرعة حركة الشريط على الشاشات الكبيرة.

4. تغيير اتجاه الكتابة: يمكنك تعديل قيمة `IQDES2_direction` في JavaScript لتحديد اتجاه كتابة الشريط، سواء من اليمين إلى اليسار (`'rtl'`) للغة العربية أو من اليسار إلى اليمين (`'ltr'`) للغات الأخرى.

5. إضافة المزيد من التفاعل: يمكنك إضافة المزيد من الأحداث والوظائف في JavaScript لتوفير تفاعلات إضافية، مثل النقر على عناصر محددة داخل الشريط أو التحكم في الحركة بناءً على إجراءات المستخدم.

كيفية الدمج في صفحات الويب

لدمج شريط المحتوى المتحرك في صفحة ويب، اتبع الخطوات التالية:

1. انسخ قسم HTML وألصقه في المكان المناسب داخل ملف HTML الخاص بصفحتك.

2. انسخ قسم CSS وألصقه داخل عنصر `<style>` في رأس ملف HTML، أو في ملف CSS خارجي مرتبط بصفحتك.

3. انسخ قسم JavaScript وألصقه داخل عنصر `<script>` في نهاية ملف HTML، قبل إغلاق وسم `</body>`.

4. قم بتخصيص المحتوى والتصميم والسلوك حسب احتياجاتك، كما هو موضح في قسم "إمكانيات التخصيص".

بعد اتباع هذه الخطوات، سيظهر شريط المحتوى المتحرك في صفحتك ويبدأ في عرض الرسائل بشكل ديناميكي.

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

هناك العديد من الاستخدامات المحتملة لشريط المحتوى المتحرك في صفحات الويب، مثل:

1. عرض الأخبار العاجلة أو التحديثات الهامة.
2. عرض الإعلانات أو العروض الترويجية.
3. عرض شهادات العملاء أو ملاحظاتهم.
4. عرض روابط لصفحات أو منتجات ذات صلة.
5. عرض تعليمات أو نصائح مفيدة للمستخدمين.

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

الكود بالكامل مرفق في المرفقات.
مثال للكود في الموقع هنا.

[كود CODE] شريط محتوى متحرك باستخدام HTML و CSS و JavaScript

AnGeL

صاحب الامتياز

المرفقات