Skip to main content

MARQUEE في عمر HTML5 و CSS3

#12 تصميم شريط جانبي في مدونة و اضافة ميزات للمدونة (أبريل 2025)

#12 تصميم شريط جانبي في مدونة و اضافة ميزات للمدونة (أبريل 2025)
Anonim

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

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

خصائص CSS3 جديدة

يضيف CSS3 خمس خصائص جديدة للمساعدة في التحكم في كيفية عرض المحتوى في الشاشة الاسمية: على غرار تجاوز, على غرار سرادق, سرادق للعب العد, سرادق-الاتجاه و سرادق السرعة.

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

على غرار سرادقتحدد هذه الخاصية كيف سينتقل المحتوى إلى العرض (والخروج).

الخيارات هي التمرير, الانزلاق و البديل. يبدأ التمرير بالمحتوى تمامًا خارج الشاشة ، ثم ينتقل عبر المنطقة المرئية حتى يتم إيقاف تشغيله تمامًا. تبدأ الشريحة بالمحتوى تمامًا خارج الشاشة ، ثم تنتقل إلى أن ينتقل المحتوى بالكامل إلى الشاشة ولا يبقى محتوى آخر ينزلق على الشاشة.

وأخيرًا ، يرتد البديل المحتوى من جانب إلى آخر ، وينزلق ذهابًا وإيابًا.

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

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

تفاصيل الشاشة الاسمية

على غرار تجاوزاتجاه اللغةإلى الأمامعكس
خط سرادق-لتراليسارحق
ار تي الحقاليسار
سرادق كتلة فوقأسفل

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

دعم متصفح خصائص سرادق

قد تحتاج إلى استخدام بادئات البائع للحصول على عناصر الشاشة الرئيسية لـ CSS للعمل. وهم على النحو التالي:

CSS3بائع البادئة
overflow-x: marquee-line؛overflow-x: -webkit-marquee؛
على غرار سرادقعلى غرار -webkit-سرادق
سرادق للعب العد-webkit-سرادق التكرار
سرادق الاتجاه: إلى الأمام |-webkit-marquee-direction: forward إلى الوراء
سرادق السرعة-webkit-سرادق السرعة
لا مكافئ-webkit-سرادق-زيادة

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

لكي تعمل نافذة التحديد الخاصة بك ، يجب عليك وضع القيم المسبقة للمورد أولاً ثم اتباعها باستخدام قيم مواصفات CSS3. على سبيل المثال ، هنا هو CSS لـ marquee الذي يمرر النص خمس مرات من اليسار إلى اليمين داخل مربع 200x50.

{ العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ مساحة بيضاء: nowrap؛ إخفاء الفائض؛ تجاوز-س: -webkit-سرادق. -webkit-marquee-direction: forwards؛ -webkit-marquee-style: scroll؛ -webkit-marquee-speed: normal؛ -webkit-marquee-increment: صغير ؛ -webkit-marquee-repetition: 5؛ overflow-x: marquee-line؛ سرادق الاتجاه: إلى الأمام نمط سرادق: التمرير سرادق السرعة: عادي سرادق عدد مرات التشغيل: 5 ؛}