شريط تمرير محتوى المغلق سريع الاستجابة. شريط تمرير مستجيب في CSS3

في هذا البرنامج التعليمي ، سننشئ صفحة متجاوبة بسيطة مع عنوان مزين بحرف دائري تنزلق فيه الصور من اليمين إلى اليسار. لا يستخدم حلنا JavaScript ، ويعتمد عرض الشرائح على الرسوم المتحركة CSS3 المدعومة في معظم المتصفحات الحديثة: Firefox 15+ و Chrome 22+ و Safari 5.1+ و Opera 12.1+ و IE10.

الخطوة 1 - الإعدادية

سنحتاج إلى 4 صور كبيرة (في مثالنا ، الحجم 1200 بكسل × 390 بكسل). بالنسبة إلى شريط التمرير الأفقي ، سنقوم بإعداد صورة بدقة 4800 بكسل × 390 بكسل في Photoshop ، ووضع جميع صورنا أفقيًا واحدة تلو الأخرى وحفظ النتيجة بتنسيق مناسب للويب (" slider -orizontal.jpg”).

الخطوة الثانية - HTML

سنقوم في الواقع بتحريك خاصية background-position لعنواننا. يحتوي الرأس نفسه على ترميز بسيط للغاية:

L "إيل دي باتز

يبدو رمز الصفحة الكامل كما يلي:

L "إيل دي باتز

الخطوة 3. CSS للأجهزة المحمولة

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

الجسم (العرض: 90٪ ؛ الحد الأدنى للعرض: 300 بكسل ؛ العرض الأقصى: 1200 بكسل ؛ الهامش: 0 تلقائي ؛ المساحة العلوية: 1em ؛ اللون: # 504331) الرأس (محاذاة النص: المركز ؛ الموضع: نسبي ؛) h1 ( حجم الخط: 2.75em ؛ الخلفية: أبيض ؛ العرض: كتلة مضمنة ؛ المساحة المتروكة: 0 10 بكسل ؛ الهامش السفلي: .25em ؛) h1: بعد (المحتوى: "" ؛ الارتفاع: 2 بكسل ؛ العرض: الكتلة ؛ الموضع: مطلق ؛ يسار: 0 ؛ يمين: 0 ؛ أعلى: .5em ؛ فهرس z: -1 ؛ أعلى الحدود: 1 بكسل صلب # 504331 ؛ الحد السفلي: 1 بكسل صلب # 504331 ؛). الروابط (الخلفية: url (../ images / map.png) مركز القاع بدون تكرار ؛ الحشوة السفلية: 177 بكسل ؛)

الخطوة 4. أنماط الشاشات الكبيرة

على شاشات كبيرة المقاطع .الأساسيةو .شاشةيجب أن يتم عرضها بشكل مختلف. الجزء .حلقة الوصلسيكون عرضه 300 بكسل ويتم وضعه كالشريط الجانبي الأيمن والقسم .الأساسيةستبقى على اليسار. سنضيف أيضًا سطرًا مزدوجًا لفصل الأقسام. سنستخدم استعلامmedia لتحديد عرض الشاشة الأكبر من 1024 بكسل:

شاشةmedia only and (min-width: 1024px) (.content (position: النسبي ؛). main (margin-right: 320px؛ padding: .5em 20px .5em 0؛ / * أضف سطرًا مزدوجًا * / border-right : 1px solid # 504331؛ box-shadow: 2px 0 white، 3px 0 # 504331؛). الروابط (الموضع: مطلق ؛ اليمين: 0 ؛ أعلى: 0 ؛ العرض: 300 بكسل ؛ محاذاة النص: اليمين ؛))

الخطوة 5: صور الرأس سريعة الاستجابة

لنبدأ العمل على الجزء الرئيسي من برنامجنا التعليمي: شريط تمرير CSS سريع الاستجابة في الرأس. أولاً ، لنجعل صورة الخلفية تستجيب.

العنوان (الخلفية: url (../ images / slider -orizontal.jpg) 0 تكرار سفلي ؛ حجم الخلفية: 400٪ ؛ المساحة المتروكة: 32.5٪ ؛)

استخدام قيمتين معبر عنها كنسبة مئوية (400٪ للممتلكات حجم الخلفيةو 32.5٪ للحشو السفلي) سيتم عرض خلفية العنوان بشكل صحيح بغض النظر عن حجم الشاشة.

لماذا 400٪؟ لدينا 4 شرائح ، لذلك ستعرض 1/4 من صورة الخلفية في الرأس. وهذا يعني أن حجم الخلفية يجب أن يكون 4 مرات أكبر من العنوان.

لماذا 32.5٪؟ نضع خلفيتنا في الجزء السفلي من الرأس. يبلغ ارتفاع صورة الخلفية 390 بكسل ، وعرض الشريحة الفردية 1200 بكسل ، و 390/1200 = 0.325 ، وبالتالي يبلغ الارتفاع 32.5٪ من العرض.

الخطوة 6. الرسوم المتحركة

سنقوم بتحريك الممتلكات خلفية الموقف... لعرض خاصية الصورة الثانية خلفية الموقفيجب أن يهم 33.33333٪ أسفل، الثالث - 66.66667٪ أسفلوالرابع هو 100٪ قاع... يتم عرض الصورة الأولى بقيمة خاصية خلفية الموقفمساو 0 أسفلأو 133.33333٪ أسفل(وضعنا التكرارات على كرر- x).

كل صورة لها 25٪ من وقت "المجد". يتم عرض الأول من 0 إلى 25٪ ، والثاني من 25٪ إلى 50٪ ، والثالث من 50٪ إلى 75٪ ، والأخير من 75٪ إلى 100٪. قمنا بتعيين الانتقالات بحيث تبدأ الصورة في الانزلاق قبل ذلك بقليل (استخدم قيمة 5٪) قبل انقضاء 25٪ من وقت الإخراج. هكذا تبدو تضمين التغريدة:

keyframes h_slide (0٪ (موضع الخلفية: 0٪ أسفل ؛) 20٪ (موضع الخلفية: 0٪ أسفل ؛) 25٪ (موضع الخلفية: 33.33333٪ قاع ؛) 45٪ (موضع الخلفية: 33.33333٪ أسفل ؛) 50٪ (موضع الخلفية: 66.66667٪ قاع ؛) 70٪ (موضع الخلفية: 66.66667٪ قاع ؛) 75٪ (موضع الخلفية: 100٪ قاع ؛) 95٪ (موضع الخلفية: 100٪ أسفل ؛) 100٪ (موضع الخلفية: 133.33٪ قاع ؛))

لاحظ أنك تحتاج إلى إضافة بادئات المتصفح: @ -webkit-keyframes (لمتصفح Chrome و Safari و iOS Safari و Android) و @ -moz-keyframes (لمتصفح Firefox 15).

فيما يلي رمز الرأس الكامل. تتكرر الرسوم المتحركة "h_slide" الخاصة بنا كل 24 ثانية (6 ثوانٍ لكل شريحة) في حلقة لا نهائية. وظيفة الوقت مهمة التخفيف منبحيث تتباطأ كل شريحة في نهاية الانتقال.

الرأس (محاذاة النص: المركز ؛ الموضع: نسبي ؛ الخلفية: url (../ images / slider -orizontal.jpg) 0 تكرار سفلي x ؛ حجم الخلفية: 400٪ ؛ المساحة السفلية: 32.5٪ ؛ -webkit- الرسوم المتحركة: h_slide 24s easy-out لانهائي ؛ -moz-animé: h_slide 24s easy-out infinite ؛ الرسوم المتحركة: h_slide 24s easy-out لانهائي ؛)

حاليًا ، شريط تمرير - دائري - وظيفة تحتاجها فقط إلى موقع ويب لنشاط تجاري أو موقع ويب - محفظة أو أي مورد آخر. جنبًا إلى جنب مع منزلقات الصور بملء الشاشة ، تتلاءم منزلقات الرف الدائري الأفقية جيدًا مع أي تصميم ويب.

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

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

Slick - مكون إضافي منزلق حديث - دائري

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

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

Owl Carousel 2.0 - jQuery - مكون إضافي سهل الاستخدام

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

يحتوي شريط التمرير على بعض المكونات الإضافية المضمنة لتحسين الوظائف العامة. الرسوم المتحركة ، تشغيل الفيديو ، التشغيل التلقائي لشريط التمرير ، التحميل البطيء ، الضبط التلقائي للارتفاع هي السمات الرئيسية.

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

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

AnoSlide - منزلق jQuery مدمج للغاية وسريع الاستجابة

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

دائري البومة - منزلق Jquery - دائري

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

معرض ثلاثي الأبعاد - دائري

الاستخدامات ثلاثي الأبعاد- التحولات على أساس CSS- اساليب وقليلا جافا سكريبتالشفرة.

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

دائري باستخدام التمهيد

متزلج مستجيب - دائري يستخدم التكنولوجيا المناسبة تمامًا لموقع الويب الجديد الخاص بك.

استنادًا إلى Bootstrap - إطار عمل منزلق متحرك لـ Moving Box

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

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

يبدو شريط التمرير ممتعًا جدًا في الوضع الدائري. يتم تنفيذ دعم الأسلوب بشكل ممتاز السحب والإفلاتونظام التمرير التلقائي للشرائح.

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

واو - منزلق - دائري

يحتوي على أكثر من 50 تأثيرًا يمكن أن تساعدك في إنشاء شريط تمرير أصلي لموقعك على الويب.

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

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

Scrollbox - jQuery plugin

صندوق التمريرمكون إضافي مضغوط لإنشاء شريط تمرير - دائري أو خط تمرير نصي. تشمل الميزات الرئيسية التمرير الرأسي والأفقي مع توقف مؤقت عند الماوس فوقه.

شريط تمرير بسيط - دائري. إذا كنت تريد مكونًا إضافيًا سريعًا ، فهذا جيد بنسبة 100٪. يأتي فقط مع الوظائف الأساسية المطلوبة لعمل شريط التمرير.

Flexisel: البرنامج المساعد JQuery Slider سريع الاستجابة - دائري

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

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

Elastislide - شريط تمرير سريع الاستجابة - دائري

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

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

دائري مذهل

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

4 نوفمبر 2019 تم تحديث الإدخال

يوري نيمتس

منزلقات CSS نقية + منزلق إضافي

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

هذا ما وجدته على الموقع حول أشرطة التمرير:

1. منزلق صورة CS3

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

2. شريط تمرير صورة مصغرة CS3

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

3. معرض CSS

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

4. شريط تمرير CSS بدون روابط

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

5. شريط تمرير مستجيب في CSS3

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

*** BONUS SLIDER ***

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

انتاج |

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

العناصر التي تمت مناقشتها في المقالة.

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

ترميز HTML

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

CSS

يستخدم شريط التمرير الرسوم المتحركة anim_slides و anim_titles CSS3. الأول يستخدم للشرائح الفردية ، والثاني يستخدم لنص الوصف. يتم أيضًا تغيير الموضع والعتامة للوصف.

/ * Slider * / .slides (الارتفاع: 300 بكسل ؛ الهامش: 50 بكسل تلقائي ؛ تجاوز السعة: مخفي ؛ الموضع: نسبي ؛ العرض: 900 بكسل ؛). الشرائح ul (نمط القائمة: لا شيء ؛ الموضع: نسبي ؛) / * إطارات الرسوم المتحركة # anim_slides * / @ -webkit-keyframes anim_slides (0٪ (عتامة: 0 ؛) 6٪ (عتامة: 1 ؛) 24٪ (عتامة: 1 ؛) 30٪ (عتامة: 0 ؛) 100٪ (عتامة: 0 ؛) ) @ -moz-keyframes anim_slides (0٪ (عتامة: 0 ؛) 6٪ (عتامة: 1 ؛) 24٪ (عتامة: 1 ؛) 30٪ (عتامة: 0 ؛) 100٪ (عتامة: 0 ؛)). الشرائح ul li (العتامة: 0 ؛ الموضع: مطلق ؛ أعلى: 0 ؛ / * css3 animation * / -webkit-animation-name: anim_slides ؛ -webkit-animation-duration: 24.0s ؛ -webkit-animation-tim-function: خطي ؛ -webkit-animation-iteration-count: infinite ؛ -webkit-animation-direction: normal ؛ -webkit-animation-delay: 0 ؛ -webkit-animation-play-state: قيد التشغيل ؛ -webkit-animé-fill-mode : إلى الأمام ؛ -moz-animation-name: anim_slides. عدد الحصص: لانهائي ؛ -موز-اتجاه الرسوم المتحركة: عادي ؛ -موز-الرسوم المتحركة-تأخير: 0 ؛ -moz-animé-play-state: قيد التشغيل ؛ -موز-الرسوم المتحركة-ملء-الوضع: إلى الأمام ؛ ) / * Css3 delays * / .slides ul li: nth-child (2)، .slides ul li: nth-child (2) div (-webkit-animation-delay: 6.0s؛ -moz-animation-delay: 6.0 s ؛). الشرائح ul li: nth-child (3) ، .slides ul li: nth-child (3) div (-webkit-animation-delay: 12.0s ؛ -moz-animation-delay: 12.0s ؛). slides ul li: nth-child (4)، .slides ul li: nth-child (4) div (-webkit-animation-delay: 18.0s؛ -moz-animation-delay: 18.0s؛) .slides ul li img (display: block؛) / * إطارات الرسوم المتحركة #anim_titles * / @ -webkit-keyframes anim_titles (0٪ (يسار: 100٪ ؛ عتامة: 0 ؛) 5٪ (يسار: 10٪ ؛ عتامة: 1 ؛) 20٪ ( اليسار: 10٪ ؛ العتامة: 1 ؛) 25٪ (يسار: 100٪ ؛ عتامة: 0 ؛) 100٪ (يسار: 100٪ ؛ عتامة: 0 ؛)) @ -moz-keyframes anim_titles (0٪ (يسار: 100 ٪؛ عتامة: 0؛) 5٪ (يسار: 10٪؛ عتامة: 1؛) 20٪ (يسار: 10٪؛ عتامة: 1؛) 25٪ (يسار: 100٪؛ عتامة: 0؛) 100٪ (يسار : 100٪ ؛ عتامة: 0 ؛)). الشرائح ul li div (لون الخلفية: # 000000 ؛ نصف قطر الحدود: 10 بكسل 10 بكسل 10 بكسل 10 بكسل ؛ ظل الصندوق: 0 0 5 بكسل #FFFFFF داخلي ؛ اللون: #FFF FFF. حجم الخط: 26 بكسل ؛ اليسار: 10٪؛ الهامش: 0 تلقائي ؛ الحشو: 20 بكسل ؛ الموقف: مطلق. أعلى: 50٪؛ العرض: 200 بكسل ؛ / * Animation css3 * / -webkit-animation-name: anim_titles؛ مدة -webkit- الرسوم المتحركة: 24.0 ثانية ؛ -وظيفة موقع الويب للرسوم المتحركة والتوقيت: خطي ؛ عدد التكرار - الرسوم المتحركة - مجموعة الويب: لانهائي ؛ -webkit-animé-direction: عادي ؛ -تأخير موقع الويب للرسوم المتحركة: 0 ؛ حالة -webkit-animé-play-play: قيد التشغيل ؛ وضع ملء مجموعة الويب للرسوم المتحركة: إعادة توجيه ؛ -موز-اسم-رسوم متحركة: anim_titles ؛ - مدة الرسوم المتحركة: 24. 0 ثانية ؛ -موز-الرسوم المتحركة-توقيت-وظيفة: خطي ؛ عدد مرات تكرار الرسوم المتحركة: لانهائي ؛ -موز-اتجاه الرسوم المتحركة: عادي ؛ -موز-الرسوم المتحركة-تأخير: 0 ؛ -moz-animé-play-state: قيد التشغيل ؛ -موز-الرسوم المتحركة-ملء-الوضع: إلى الأمام ؛ )

ج مجموعة مجانية شريط تمرير HTML و CSSأمثلة التعليمات البرمجية: بطاقة ، مقارنة ، ملء الشاشة ، متجاوب ، بسيط، إلخ. تحديث مجموعة يونيو 2018. 7 عناصر جديدة.

جدول المحتويات

مقالات ذات صلة

حول الكود

مجموعة من شاشات الإعداد بتنسيق HTML / CSS / JS. تجربة شخصية مع طبقات أيقونات PNG ، وانتقالات CSS3 ، و flexbox.

شريط تمرير بطاقة معلومات HTML و CSS و JavaScript.
من صنع آندي تران
23 نوفمبر 2015

شريط تمرير الصور يعمل على متصفحات سطح المكتب والجوال.
صنع بواسطة تارون
29 سبتمبر 2014

مقارنة (قبل / بعد) المتزلجون

حول الكود

شريط تمرير مقارنة صور بسيط ونظيف ، سريع الاستجابة بالكامل ويعمل باللمس جاهز باستخدام CSS و jQuery.

حول الكود

A قبل وبعد شريط التمرير مع html و css فقط.

حول الكود

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

Vanilla JS ، بسيط ، جميل المظهر.
من صنع Huw
3 يوليو 2017

حول الكود

عنصر شريط تمرير "تقسيم الشاشة" مع JavaScript.

تجربة صغيرة لشريط تمرير قبل وبعد كل ذلك داخل SVG. اخفاء يجعلها بسيطة جدا. نظرًا لأن كل شيء في SVG ، فإن الصور والتعليقات التوضيحية تتدرج معًا بشكل جيد. تم استخدام المكونات الإضافية Draggable و ThrowProps الخاصة بـ GreenSock للتحكم في شريط التمرير.
صنع بواسطة كريج روبلوسكي
17 أبريل 2017

يستخدم إدخال نطاق مخصص لشريط التمرير.
من صنع دودلي ستوري
14 أكتوبر 2016

شريط تمرير مقارنة الصور المتجاوبة مع HTML و CSS و JavaScript.
من صنع Ege Görgülü
3 أغسطس 2016

فيديو HTML5 و CSS3 و JavaScript شريط تمرير المقارنة قبل وبعد.
من صنع دودلي ستوري
24 أبريل 2016

شريط تمرير سهل السحب لمقارنة صورتين بسرعة ، مدعوم من CSS3 و jQuery.
صنع بواسطة CodyHouse
15 سبتمبر 2014

المتزلجون ملء الشاشة

حول الكود

شريط تمرير بسيط يعتمد على مدخلات الراديو. 100٪ HTML + CSS نقي. يعمل أيضا مع مفاتيح الأسهم.

متجاوب: نعم

التبعيات: -

حول الكود

تأثير انتقال لطيف لمنزلق ملء الشاشة.

حول الكود

المنظر الأفقي المنزلق المنزلق مع Swiper.js.

حول الكود

شريط تمرير منظور ثلاثي الأبعاد مستجيب عند تحريك الماوس.

شريط تمرير صورة البطل بملء الشاشة (سمة لوحات التمرير) باستخدام HTML و CSS و JavaScript.
من صنع توبياس بوغليولو
25 يونيو 2017

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

شريط تمرير بسيط بأسلوب مبسط لاظهار الصور. يظهر جزء من الصورة على كل شريحة.
صنع بواسطة ناثان تايلور
22 يناير 2017

الشيء سهل التخصيص. يمكنك بأمان تغيير الخط وحجم الخط ولون الخط وسرعة الرسوم المتحركة. سيظهر الحرف الأول من سلسلة جديدة في المصفوفة في JS على شريحة جديدة. من السهل إنشاء (أو حذف) شريحة جديدة: 1. أضف مدينة جديدة في المصفوفة في JS. 2. تغيير متغير عدد الشرائح ووضع صورة جديدة في قائمة scss في CSS.
صنعه رسلان بيفوفاروف
8 أكتوبر 2016

1. مسار المقطع لإخفاء حدود المستطيل (webkit فقط).
2. وضع المزج لهذا القناع.
3. نظام ألوان ذكي ، ما عليك سوى وضع اسم اللون الخاص بك وقيمته في خريطة sass ثم إضافة فئة مناسبة مع اسم اللون هذا إلى العناصر وسيعمل كل شيء!
4. قائمة جانبية رائعة للاعتمادات (انقر فوق الزر الصغير في وسط العرض التوضيحي).
5. شبيبة الفانيليا مع فقط< 200 lines of code (basically it’s just adds/removes classes).

من صنع نيكولاي تالانوف
7 أكتوبر 2016

هذا المنزلق المنحرف مع التمرير بناءً على JS و CSS خالص (بدون مكتبات).
من صنع فيكتور بيلوزيوروف
3 سبتمبر 2016

رسم متحرك منزلق بتصميم بوكيمون.
صنع بواسطة فام ميكون
18 أغسطس 2016

شريط تمرير HTML و CSS و JavaScritp مع رسوم متحركة معقدة ونص نصف مائل.
صنعه رسلان بيفوفاروف
13 يوليو 2016

تأثير المنظر المنزلق مع HTML و CSS و JavaScript.
من صنع مانويل ماديرا
28 يونيو 2016

شريط تمرير HTML و CSS وجافا سكريبت مع تأثير مضاعف.
من صنع بيدرو كاسترو
21 مايو 2016

Clip-Path يكشف عن شريط تمرير مع HTML و CSS و JavaScript.
من صنع نيكولاي تالانوف
16 مايو 2016

GSAP + Slick slider مع معاينة الشرائح السابقة / التالية.
من صنع كارلو فيديك
27 أبريل 2016

شريط تمرير صفحة كاملة HTML و CSS وجافا سكريبت.
صنعه جوزيف مارتوتشي
28 فبراير 2016

نموذج أولي كامل منزلق مع HTML و CSS و JavaScript.
صنع بواسطة Gluber Sampaio
6 من كانون الثاني 2016

شاشة كاملة ، نوع من الاستجابة ، عرض شرائح متحرك مع Greensocks TweenLite / Tweenmax.
من صنع أردن
12 ديسمبر 2015

من صنع أردن
5 ديسمبر 2015

شريط تمرير ملء الشاشة (مخطط GSAP الزمني) # 1 مع HTML و CSS وجافا سكريبت.
صنع بواسطة دياكو لطف الله
23 نوفمبر 2015

شريط تمرير HTML و CSS مع تأثيرات مخصصة.
من صنع نيكولاي تالانوف
12 نوفمبر 2015

شريط التمرير بملء الشاشة مع اختلاف المنظر مع HTML و CSS و JavaScript.
من صنع نيكولاي تالانوف
12 نوفمبر 2015

دليل على مفهوم الدورية المنزلق. يستخدم Clip-path والكثير من الرياضيات.
من صنع تايلر جونسون
16 أبريل 2015

شريط تمرير CSS و jQuery بسيط بملء الشاشة باستخدام translateX وسلاسة ثلاثية الأبعاد!
صنع بواسطة جوزيف
19 أغسطس 2014

المتزلجون المستجيبون

حول الكود

صور التعتيم المنزلق

شريط تمرير عتامة الصور في HTML و CSS.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

تخطيط الشرائح المرنة المكدسة

يوضح هذا المثال كيفية إنشاء تخطيط الشرائح المكدسة على بعضها البعض (مفيدة بشكل خاص لانتقالات التلاشي للداخل / الخارج). يتم تحقيقه بدون ضبط ارتفاعها وتجنب الموضع: مطلق ؛ لذا فهي مرنة تمامًا ويسهل الاحتفاظ بها في تدفق الصفحات العادي.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

المتزلج المستجيب

شريط تمرير سريع الاستجابة متحرك في HTML و CSS و JavaScript.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: animate.css

حول الكود

شريط التمرير مع نص مقنع

شريط تمرير CSS فقط مع نص مقنع.

المتصفحات المتوافقة: Chrome ، Edge (جزئي) ، Firefox ، Opera ، Safari

متجاوب: نعم

التبعيات: -

حول الكود

الصورة والمحتوى مع تأثير اختلاف المنظر.

حول الكود

CSS معرض الشرائح فقط.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

نقي HTML / CSS المتزلج

منزلق HTML / CSS خالص مع شريط تقدم SVG دائري.

المتصفحات المتوافقة: Chrome ، Edge (جزئي) ، Firefox (جزئي) ، Opera ، Safari

متجاوب: نعم

التبعيات: font-awesome.css

حول الكود

تجربة لإنشاء شريط تمرير عمودي متجاوب تمامًا مع صور مصغرة باستخدام CSS فقط ، والاحتفاظ بنسبة العرض إلى الارتفاع للصور.

حول الكود

منزلق / دائري صورة Flexbox بسيط مصنوع من Vanilla JavaScript.

حول الكود

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

حول الكود

بارد يحرك شريط التمرير مع JS.

حول الكود

هذه تجربة حول كيف يمكن أن تساعدنا أنماط SVG في إنشاء صور تشبه الأقنعة لشريط تمرير صور CSS فقط.

استكشاف بعض انتقالات شريط التمرير. التمرير Swiper مع تمكين خيار المنظر. اللعب باستخدام مرشحات CSS هنا في الغالب.
من صنع ميركو زوريتش
12 يونيو 2017

شريط تمرير GSAP بسيط مع بعض الرسوم المتحركة البسيطة.
من صنع جوران فربان
9 يونيو 2017

Slider UI مع HTML و CSS و JavaScript.
من صنع مرغم أوجكاني
6 يونيو 2017

المنزلق GSAP virsion 2.
من صنع م و
4 مايو 2017

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

الاستفادة من صورة حدود CSS ومسار المقطع لإنشاء تأثير حركة شريط التمرير.
من صنع إميلي هايمان
31 ديسمبر 2016

منزلق صغير مبني مع فليكس بوكس. مستجيب إلى حد ما ، ويمكن أن يحتوي على عناصر ثابتة بجانب منطقة شريط التمرير.
من صنع روبرت
28 نوفمبر 2016

شريط تمرير قماش HTML و CSS.
صنع بواسطة Nvagelis
29 أكتوبر 2016

المنزلق السلس HTML و CSS و JavaScript ثلاثي الأبعاد.
من صنع إدواردو اليغريني
19 أكتوبر 2016

المنزلق كب كيك HTML و CSS مع الرشات!
من صنع جيمي كولتر
14 أكتوبر 2016

من صنع ماريو ماسيلي
12 أكتوبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 2 باستخدام HTML و CSS و JavaScript.
من صنع ماريو ماسيلي
22 سبتمبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 3 باستخدام HTML و CSS و JavaScript.
من صنع ماريو ماسيلي
22 سبتمبر 2016

سلايدر التجارة الإلكترونية v2.0 مع HTML و CSS و JavaScript.
من صنع بيدرو كاسترو
17 سبتمبر 2016

شريط تمرير نظيف HTML و CSS وجافا سكريبت بخلفية منحنية.
صنعه رسلان بيفوفاروف
13 سبتمبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 1 باستخدام HTML و CSS و JavaScript.
من صنع ماريو ماسيلي
8 سبتمبر 2016

استمتع بقوة CSS: لأعلى ولأسفل كل صورة في المنتصف وشريط تمرير مرقّم مع Lightbox.
صنع بواسطة Kseso
15 أغسطس 2016

التعريض المزدوج هو أسلوب فوتوغرافي يجمع صورتين مختلفتين في صورة واحدة.
من صنع ميساكي ناكانو
3 أغسطس 2016

شريط التمرير باستخدام مقطع خاصية CSS3.
من صنع بيدرو كاسترو
1 مايو 2016

شريط تمرير CSS سريع الاستجابة.
من صنع geekwen
19 أبريل 2016

هذه تجربة شريط تمرير بسيطة تعرض كلمات ذات معاني جميلة لا يمكن ترجمتها مباشرة. التركيز: طباعة أنيقة وانتقالات بسيطة وجذابة.
من صنع جو هاري
5 أبريل 2016

تتمثل فكرة الرسوم المتحركة في تغيير قيمة مسار مقطع CSS ، وبالتالي عمل تأثير إخفاء.
صنعه بهاكتي الأكبر
31 مارس 2016

المنزلق النقطي مع HTML و CSS و JavaScript.
من صنع ديريك نغوين
16 من آذار 2016

شريط تمرير تأثير المنشور مع HTML و CSS و JavaScript.
صنع من قبل فيكتور
12 مارس 2016

معرض الخلفية المنزلق مع HTML و CSS و JavaScript.
من صنع رون جيرلاخ
30 نوفمبر 2015

حل منزلق HTML و CSS و JavaScript.
من صنع يورغن جينسر
30 سبتمبر 2015

شريط تمرير منتج مدعوم من Sequence.js. Sequence.js - إطار عمل رسوم متحركة CSS سريع الاستجابة لإنشاء أشرطة تمرير وعروض تقديمية وشعارات وتطبيقات أخرى تعتمد على الخطوات.
من صنع إيان لون
15 سبتمبر 2015

شريط التمرير المخصص لدائرة صغيرة.
من صنع برام دي هان
11 أغسطس 2015

شريط تمرير GTA V سريع الاستجابة مع HTML و CSS و JavaScript.
من صنع إدوارد ماير
24 يناير 2014

إنه يشبه المنزلق ولكنه يدور بشكل مكعب لأسباب غير معروفة.
من صنع إريك بروير
4 ديسمبر 2013

من صنع هوغو داربي براون
28 أغسطس 2013

المتزلجون البسيطون

شريط تمرير تراكب الصور مع HTML و CSS وجافا سكريبت الفانيليا.
من صنع يوجام
7 يونيو 2017

ظهرت صور المنزلق HTML و CSS.
من صنع جوشوا هيبرت
16 يونيو 2016

متعدد المحاور صورة المنزلق

شريط تمرير صور متعدد المحاور مع HTML و CSS و JavaScript.
من صنع بوراك كان
22 يوليو 2013

منزلق مكعب ، تجربة صغيرة مع تحويلات HTML5 / CSS3 ثلاثية الأبعاد.
صنع بواسطة إيليا ك.
26 يونيو 2013