19 شريط تمرير أو دائري CSS و HTML لموقع الويب الخاص بك

وجود مواقع الويب التي تشغل عرض الشاشة بالكاملوجدنا أنه يمكن دمج بعض العناصر التي يمكن أن تكون في متناول اليد لعرض عينة كاملة من المنتجات المعروضة للبيع أو الرحلات التي قد نقدمها لفصل الصيف. تعد الدوارات أو أشرطة التمرير أحد عناصر الويب التي تتيح لنا عرض منتجاتنا بطريقة لافتة للنظر بصريًا.

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

دوارات أفقية

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

المادة ذات الصلة:

27 منزلقات HTML و CSS لإضفاء لمسة خاصة على موقع الويب الخاص بك

دائري متجاوب لانهائي

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

رد فعل دائري

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

السلس 3D المتزلج

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

المادة ذات الصلة:

46 Javascript Sliders and Scrollers

دائري تلقائي لانهائي

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

تحوم دائري

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

مكتبة الجوال

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

Instagram Feed Carousel

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

رف متزامن بسيط

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

دوارات أفقية ثلاثية الأبعاد

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

دائري CSS

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

Ambilight Bootstrap Carousel

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

فريق كاروسيل

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

مكعب دائري

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

مفاتيح الأسهم دائري

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

الدوارات العمودية

شريط تمرير ذو تأثير مرئي رائع يتم تشغيله تلقائيًا في حركة رأسية مستمرة تتميز بأوراقها ذات الزوايا الدائرية. حديثة جدًا وواحدة من تلك التي تبرز بمفردها من هذه القائمة بأكملها.

نقي CSS دائري

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

يتفاعل دائري عمودي

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

دائري منفصل ثلاثي الأبعاد

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