How To Marquee Elements in 2022 (Best Practices)

نشرت: 2022-08-23

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

إطار التحديد هو قسم لا نهائي من النص و / أو العنصر المرئي (مثل الصور) والذي يتم تمريره أفقيًا تلقائيًا.

على الرغم من إهمال عنصر HTML <marquee> الرسمي وعدم تشجيعه بشدة على استخدامه ، فإن التأثير العام للتمرير والعناصر المستمرة المستخدمة لإضفاء الحيوية على صفحة ويب ما زالت حية وبصحة جيدة في عام 2022 ، وتظهر في العديد من مواقع الويب العصرية.

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

هذا ليس ذكيًا ، لكنه لا يزال يعمل. أسباب تجنب استخدام هذا العنصر في عام 2022 واضحة:

لا يمكن الوصول إليه حقًا
لقد تم إهلاكها بنسبة 100٪ ويمكن إزالة الدعم لها (وربما سيتم إزالتها في وقت ما)
لم يكن أبدًا عنصر HTML حقيقي لتبدأ به (ليس جزءًا من أي معيار)

تم إهلاك HTML Marquee - لا تستخدمه. — شرح MDN docs حول سبب عدم استخدامك لهذا العنصر

ومع ذلك ، فقد كنا دائمًا معجبين بالخراطيش في Isotropic.

ألق نظرة على العديد من مواقع Awwwards العصرية وسترى نصًا أو صورًا أو مزيجًا من الاثنين يتحركان أفقيًا ، مثل:

هذا سرادق تجريبي

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

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

تم الحصول على الكود الخاص بعمل هذا العرض التوضيحي من CodePen بواسطة Ryan Mulligan ، وهي (على الأرجح) أفضل طريقة لإحداث تأثير مستطيل في عام 2022. كما يكتب عن هذا الرمز في مدونته ، https://ryanmulligan.dev/ مدونة / Css-Marquee.

يمكن الوصول إليه (يدعم الحركة المنخفضة) ، لانهائي ، يسمح لأي نوع من عناصر html ، وخفيف الوزن وسهل التنفيذ.

كما أنها مصنوعة من 100٪ CSS ولا تحتوي على JS.

 <div class = "marquee">
  <div class = "marquee__group">
    <img src = 'https: //images.unsplash.com/photo-1548199973-03cce0bbc87b؟
    <img src = 'https: //images.unsplash.com/photo-1583511666445-775f1f2116f5؟
    <img src = 'https: //images.unsplash.com/photo-1586917383423-c25e88ac05ce؟
    <img src = 'https: //images.unsplash.com/photo-1560743173-567a3b5658b1؟
    <img src = 'https: //images.unsplash.com/photo-1603232644140-bb47da511b92؟
  </div>

  <div aria-hidden = "true" class = "marquee__group">
    <img src = 'https: //images.unsplash.com/photo-1548199973-03cce0bbc87b؟
    <img src = 'https: //images.unsplash.com/photo-1583511666445-775f1f2116f5؟
    <img src = 'https: //images.unsplash.com/photo-1586917383423-c25e88ac05ce؟
    <img src = 'https: //images.unsplash.com/photo-1560743173-567a3b5658b1؟
    <img src = 'https: //images.unsplash.com/photo-1603232644140-bb47da511b92؟
  </div>
</div>

<div class = "Marquee Marquee - border">
  <div class = "marquee__group">
    <p> كلاب Unsplash </p>
    <p aria-hidden = "true"> كلاب Unsplash </p>
    <p aria-hidden = "true"> كلاب Unsplash </p>
  </div>

  <div aria-hidden = "true" class = "marquee__group">
    <p> كلاب Unsplash </p>
    <p> كلاب Unsplash </p>
    <p> كلاب Unsplash </p>
  </div>
</div>

<div class = "Marquee Marquee - reverse">
  <div class = "marquee__group">
    <img src = 'https: //images.unsplash.com/photo-1546421845-6471bdcf3edf؟
    <img src = 'https: //images.unsplash.com/photo-1518378188025-22bd89516ee2؟
    <img src = 'https: //images.unsplash.com/photo-1571772805064-207c8435df79؟
    <img src = 'https: //images.unsplash.com/photo-1602067340370-bdcebe8d1930؟
    <img src = 'https: //images.unsplash.com/photo-1508948956644-0017e845d797
  </div>

  <div aria-hidden = "true" class = "marquee__group">
    <img src = 'https: //images.unsplash.com/photo-1546421845-6471bdcf3edf؟
    <img src = 'https: //images.unsplash.com/photo-1518378188025-22bd89516ee2؟
    <img src = 'https: //images.unsplash.com/photo-1571772805064-207c8435df79؟
    <img src = 'https: //images.unsplash.com/photo-1602067340370-bdcebe8d1930؟
    <img src = 'https: //images.unsplash.com/photo-1508948956644-0017e845d797
  </div>
</div>

 import url ("https://fonts.googleapis.com/css2؟family=Corben:wght@700&display=swap") ؛

* {
  تحجيم الصندوق: مربع الحدود ؛
}

هيئة {
  الحد الأدنى للارتفاع: 100 فولت ؛
}

هيئة {
  - الفضاء: 2rem ؛

  عرض: شبكة ؛
  محاذاة المحتوى: مركز ؛
  إخفاء الفائض؛
  فجوة: var (- مساحة) ؛
  العرض: 100٪؛
  عائلة الخطوط: "Corben"، system-ui، sans-serif؛
  حجم الخط: 1.5rem ؛
  ارتفاع الخط: 1.5 ؛
}

.marquee {
  - المدة: 60 ثانية ؛
  - الفجوة: var (- مسافة) ؛

  عرض: فليكس ؛
  إخفاء الفائض؛
  تحديد المستخدم: لا شيء ؛
  فجوة: فار (- فجوة) ؛
  تحويل: انحراف (-3 درجة) ؛
}

.marquee__group {
  فليكس يتقلص: 0 ؛
  عرض: فليكس ؛
  محاذاة العناصر: مركز ؛
  تبرير المحتوى: الفضاء حول ؛
  فجوة: فار (- فجوة) ؛
  العرض الأدنى: 100٪ ؛
  الرسوم المتحركة: التمرير var (- المدة) الخطي اللانهائي ؛
}

media (يفضل تقليل الحركة: تقليل) {
  .marquee__group {
    حالة تشغيل الرسوم المتحركة: متوقف مؤقتًا ؛
  }
}

marquee__group. img {
  أقصى عرض: مشبك (10rem ، 1rem + 28vmin ، 20rem) ؛
  نسبة العرض إلى الارتفاع: 1 ؛
  الكائن المناسب: غطاء ؛
  نصف قطر الحدود: 1rem ؛
}

.marquee__group p {
  صورة الخلفية: التدرج الخطي (
    75 درجة
    hsl (240deg 70٪ 49٪) 0٪ ،
    hsl (253deg 70٪ 49٪) 11٪ ،
    hsl (267deg 70٪ 49٪) 22٪ ،
    hsl (280deg 71٪ 48٪) 33٪ ،
    hsl (293deg 71٪ 48٪) 44٪ ،
    hsl (307deg 71٪ 48٪) 56٪ ،
    hsl (320deg 71٪ 48٪) 67٪ ،
    hsl (333deg 72٪ 48٪) 78٪ ،
    hsl (347deg 72٪ 48٪) 89٪ ،
    hsl (0deg 73٪ 47٪) 100٪
  ) ؛
  -webkit-background-clip: نص ؛
  -لون تعبئة النص -webkit: شفاف ؛
}

.marquee - الحدود {
  كتلة الحدود: 3 بكسل الصلبة dodgerblue ؛
  كتلة الحشو: 0.75rem ؛
}

.marquee - عكس .marquee__group {
  اتجاه الرسوم المتحركة: عكس ؛
  تأخير الرسوم المتحركة: احسب (var (- المدة) / -2) ؛
}

keyframes التمرير {
  0٪ {
    التحويل: translateX (0) ؛
  }

  100٪ {
    التحويل: translateX (calc (-100٪ - var (- gap))) ؛
  }
}

دعنا نلقي نظرة على كيفية إنشاء هذا ولماذا هو رائع جدًا.

فيما يلي نظرة عامة ، قبل أن نلقي نظرة على جميع الكود:

يمكننا بسهولة التحكم في سرعة واتجاه تأثير التمرير. للسرعة ، حددنا وللتوجيه ، نستخدم فئة .marquee--reverse .
إنه نمطي - يمكنك الحصول على أي عدد تريده من المجموعات عن طريق تغليف المحتوى في div بفئة .marquee والمحتوى الداخلي بـ .marquee__group .
التحجيم سريع الاستجابة وسلاسة لأنه يستخدم متغيرات CSS والمشابك.
يمكن الوصول إليه باستخدام تسميات aria والإيقاف المؤقت إذا تم ضبط الحركة المنخفضة في CSS على تقليلها.
الحركة عبارة عن رسم متحرك CSS قياسي يستخدم إطارات مفتاحية (بحيث يمكنك التوقف مؤقتًا عند التمرير إذا كنت تريد). لا يوجد JS على الإطلاق.
إنه أيضًا نسخ / لصق جميل. ما عليك سوى تبديل المحتوى الخاص بك ، وتنفيذ HTML و CSS ، وستحصل على شاشة اسمية صغيرة رائعة.

لقد تم إجراؤه بشكل جيد حقًا ، ويجب أن تكون (imo) هي الطريقة القياسية التي يتم بها تنفيذ تأثير الشاشة الاسمية في عام 2022.

ها هو HTML:

<div class = "marquee"> <div class = "marquee__group"> <img src = 'https: //images.unsplash.com/photo-1548199973-03cce0bbc87b؟ -1.2.1 & q = 80 & w = 400 'alt ='> <img src = 'https: //images.unsplash.com/photo-1583511666445-775f1f2116f5؟ .1 & q = 80 & w = 400 'alt =' '> <img src =' https: //images.unsplash.com/photo-1586917383423-c25e88ac05ce؟ = 80 & w = 400 'alt =' '> <img src =' https: //images.unsplash.com/photo-1560743173-567a3b5658b1؟ = 400 'alt =' '> <img src =' https: //images.unsplash.com/photo-1603232644140-bb47da511b92؟ 8fHx8fHx8fDE2NTk0MDQ4MDE & ixlib = rb-1.2.1 & q = 80 & w = 400 'alt =' '> </div> <div aria-hidden = "true" class = "marquee__group"> <img src =' https: //images.unsplash.com /photo-1548199973-03cce0bbc87b؟crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3Mz = -1583511666445-775f1f2116f5؟ -c25e88ac05ce؟ ؟ Crop = entropy & cs = tinysrgb & fit = max & fm = jpg & ixid = MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU & ixlib = rb-1.2.1 & q = 80 '47 's> = ent ropy & cs = tinysrgb & fit = max & fm = jpg & ixid = MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE & ixlib = rb-1.2.1 & q = 80 'w'> 400 'alt = " : 100s "> <div class =" marquee__group "> <p> The Dogs of Unsplash </p> <p aria-hidden =" true "> The Dogs of Unsplash </p> <p aria-hidden =" true " > The Dogs of Unsplash </p> </div> <div aria-hidden = "true" class = "marquee__group"> <p> The Dogs of Unsplash </p> <p> The Dogs of Unsplash </p> <p> The Dogs of Unsplash </p> </div> </div> <div class = "marquee marquee - reverse"> <div class = "marquee__group"> <img src = 'https: // images. unsplash.com/photo-1546421845-6471bdcf3edf؟crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ1 com / photo-1518378188025-22bd89516ee2؟ s.unsplash.com/photo-1571772805064-207c8435df79؟crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0M unsplash.com/photo-1602067340370-bdcebe8d1930؟ com / photo-1508948956644-0017e845d797؟ "marquee__group"> <img src = 'https: //images.unsplash.com/photo-1546421845-6471bdcf3edf '> <img src =' https: //images.unsplash.com/photo-1518378188025-22bd89516ee2؟ 0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib= rb-1.2.1 & q = 80 & w = 400 'alt =' '> <img src =' https: //images.unsplash.com/photo-1602067340370-bdcebe8d1930؟ 1.2.1 & q = 80 & w = 400 'alt ='> <img src = 'https: //images.unsplash.com/photo-1508948956644-0017e845d797؟ 1 & q = 80 & w = 400 'alt = "> </div> </div>

يمكننا أن نرى في العرض التوضيحي ثلاثة خراطيش. يتم عكس الأول والثالث بفئة .marquee--reverse . لديهم سرعة قياسية وتحتوي على صور.

الثاني (الأوسط) هو النص بالكامل ، ويقوم بتنفيذ حدود بفئة مخصصة. كما أن لها مدة أبطأ تحددها سمة النمط: .

ستلاحظ أيضًا وجود نسخ مكررة بشكل أساسي داخل .marquee div ، وهي نفسها باستثناء علامة aria.

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

يمكن الوصول إلى هذا باستخدام aria-hidden="true" ، مما يزيل المحتوى المكرر من شجرة إمكانية الوصول.

أيضًا ، يتم تقديم الصور مباشرة من Unsplash. قد تجد هذا المورد مثيرًا للاهتمام: كيفية إنشاء صور عشوائية عن طريق URL (مطور الويب)

بشكل عام ، إنها بنية HTML أنيقة وبسيطة.

الآن دعونا نلقي نظرة على CSS

وإليك CSS (مأخوذ مباشرة من CodePen):

import url ("https://fonts.googleapis.com/css2؟family=Corben:wght@700&display=swap") ؛ * {box-sizing: border-box؛ } body {min-height: 100vh؛ } .demo_marquee-wrap {--demo-marquee_space: 2rem؛ عرض: شبكة ؛ محاذاة المحتوى: مركز ؛ إخفاء الفائض؛ فجوة: var (- demo-marquee_space) ؛ العرض: 100٪؛ عائلة الخطوط: "Corben"، system-ui، sans-serif؛ حجم الخط: 1.5rem ؛ ارتفاع الخط: 1.5 ؛ } .marquee {--demo-marquee_duration: 60 ثانية ؛ --demo-marquee_gap: var (- demo-marquee_space) ؛ عرض: فليكس ؛ إخفاء الفائض؛ تحديد المستخدم: لا شيء ؛ فجوة: var (- demo-marquee_gap) ؛ تحويل: انحراف (-3 درجة) ؛ } .marquee__group {flex-shrink: 0 ؛ عرض: فليكس ؛ محاذاة العناصر: مركز ؛ تبرير المحتوى: الفضاء حول ؛ فجوة: var (- demo-marquee_gap) ؛ العرض الأدنى: 100٪ ؛ الرسوم المتحركة: التمرير var (- demo-marquee_duration) خطي لانهائي ؛ }media (يفضل تقليل الحركة: تقليل) {.marquee__group {animation-play-state: paused؛ }} .marquee__group img {max-width: clamp (10rem، 1rem + 28vmin، 20rem)؛ نسبة العرض إلى الارتفاع: 1 ؛ الكائن المناسب: غطاء ؛ نصف قطر الحدود: 1rem ؛ } .marquee__group p {color: # 29303e؛ } .marquee - border {border-block: 3px solid # 29303e؛ كتلة الحشو: 0.75rem ؛ } .marquee - reverse .marquee__group {animation-direction: reverse؛ تأخير الحركة: احسب (var (- demo-marquee_duration) / -2) ؛ }keyframes scroll {0٪ {transform: translateX (0)؛ } 100٪ {transform: translateX (calc (-100٪ - var (- demo-marquee_gap))) ؛ }}

يمكننا أن نرى ما يلي:

كل شيء يستخدم REM والمتغيرات والمشابك ، مما يعني أن التأثير مائع وسيتفاعل مع حجم الشاشة وإعدادات المتصفح.
الرسوم المتحركة 100٪ CSS. يتم تنفيذ ذلك باستخدام "Animation animation: scroll var(--duration) linear infinite; " سطر في .marquee__group . الرسوم المتحركة لا حصر لها ، وخطية ، وتمرير مسمى. يتم التحكم في مدة الجذر بواسطة المتغير --duration ، والذي يمكن استبداله للتحكم في سرعة مجموعة معينة في ترميز HTML (المذكور أعلاه).
التمرير هو تحول أساسي يترجم X.
لعكس الحركة ، لدينا ببساطة " animation-direction: reverse; " في فئة .marquee--reverse .marquee__group .
نحن نستفيد من calc و --gap لغالبية المسافات. هذا يجعل الأمور مرنة ويمكنك تغيير الفجوة لتناسب احتياجاتك.
يوجد تأثير انحراف (3٪) يجعله قطريًا ، ويمكن إزالته لجعله أفقيًا بنسبة 100٪.
إنه يمكن الوصول إليه ومسؤول لأنه لن يتحرك إذا كان يفضل تقليل الحركة: تم تعيين تقليل (تعرف على كيفية اختبار ذلك هنا).

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

للتنفيذ ، ما عليك سوى إضافة HTML إلى صفحتك ، وتبديل النص / الصور ، وإضافة CSS إلى أنماطك العامة.

يمكنك اللعب بالمتغيرات ، ولكن من الناحية الواقعية ، هذا جميل للتوصيل والتشغيل ... ليس هناك الكثير الذي تحتاج إلى تغييره!