نستمر في جولة من CSS و HTML code التي يمكن تنفيذها على موقعنا على الإنترنت لمنحها تلك اللمسة الخاصة لتمييزها عن البقية. بفضل عنصر التحكم + c بالإضافة إلى التحكم + v يمكننا ذلك لدينا كود في يدنا سيجعل الويب جاهزًا ليتم نشرها في التطوير بعد قضاء أيام أو أسابيع في الاختبار.
حان الوقت الآن لـ 27 شريط تمرير في HTML و CSS والتي ستسمح لنا بإعداد تلك المساحة التي عادةً ما ندمج فيها الكثير من المحتوى في بضع وحدات بكسل مربعة. تتراوح أشرطة التمرير هذه من على البطاقة ، مقارن ، ملء الشاشة ، سريع الاستجابة وأبسط ، ولكن في نفس الوقت أيضًا أنيقة جدًا. نحن نذهب مع 27 شريط تمرير لن يترك أي شخص غير مبال ، وخاصة العميل أو المستخدم الذي يمر عبر موقع الويب الخاص بك لقراءة المحتوى أو شراء منتج أو ببساطة استخدام شريط تمرير مقارن لمقارنة صورة قبل وبعد.
شاشات على البطاقات
شريط تمرير سهل الاستخدام للغاية في HTML و CSS يتعامل معه خذ سلسلة من البطاقات إلى موقع الويب الخاص بك التي يتم تمريرها من واحد إلى آخر مع الرسوم المتحركة بأسلوب رائع. إن الرسوم المتحركة وتدرج الخلفية بالضبط هما اللذان يضفيان هذه اللمسة الدقيقة على كود HTML و CSS هذا الذي يبرز أيضًا في بعض جافا سكريبت. الأناقة هي الكلمة التي تستخدم لتصوير شريط تمرير الجودة هذا.
شريط تمرير بطاقة المعلومات
شريط تمرير بطاقة المعلومات هذا هو أيضًا رمز في HTML و CSS و JavaScript. إنه بالأحرى عن سلسلة من البطاقات هذا لا يجذب الكثير من الانتباه للرسوم المتحركة ، على الرغم من بساطتها هي أكبر قيمة لها. شريط تمرير آخر للنظر في هذه القائمة.
منزلق الصورة المقارنة
هذا المنزلق ذات فائدة كبيرة وبالتأكيد شاهدته على العديد من مواقع الويب حيث تتم مقارنة الصور قبل وبعد مع شريط عمودي ينزلق أفقيًا. إنها مساعدة كبيرة للمقارنات ، لذلك جعلناها أحد العناصر الأساسية في قائمة أشرطة التمرير هذه.
شريط تمرير مقارن بدون جافا سكريبت
الجودة الرائعة لهذا المنزلق هي أن يأتي بدون JavaScript، لذلك سيتعين عليك فقط تنفيذ كود CSS و HTML على موقع الويب الخاص بك لإجراء مقارنة أخرى. سيتعين عليك استخدام الصندوق الأسود الموجود أسفل الصورة لتحريكه من جانب إلى آخر لمشاهدة مقارنة الصور. ليس بديهيًا مثل السابق ، ولكنه مفيد جدًا بدون JavaScript.
ثلاث طبقات الصورة المقارنة المنزلق
اسمها يقول كل شيء ، صورة المنزلق يسمح لك بمقارنة ما يصل إلى ثلاثة في وقت واحد. المثال المعطى هو أحد الأمثلة لرؤية الرأس في الملف الشخصي ، وآخر لإظهار العضلات وشريط تمرير آخر لرؤية العظام. يستخدم HTML و CSS و JavaScript لتشغيله.
سلايدر صورة الفانيليا JS
شريط تمرير صورة مقارنة آخر بزر كبير التي يمكن من خلالها تحريك الصورة من جانب إلى آخر. مبسط ، مع القليل من JavaScript ونهاية بصرية رائعة. واحدة من أكثر الصور مقارنة الصور المدهشة.
تقسيم الشاشة قطريا
هذا منزلق الصورة المقارنة تم إنشاؤه بواسطة Envato Tuts ويتميز بأن شريط التمرير يتم وضعه قطريًا لإحداث أنواع أخرى من الأحاسيس عند مقارنة صورتين. يستخدم JavaScript و CSS و HTML ليكون شريط تمرير مقارن عالي الجودة.
شريط تمرير ملء الشاشة
وصلنا إلى جزء من منزلقات ملء الشاشة للقاء يتميز الانتقال المنزلق بالانتقال نفذتها رسوم متحركة ذات تأثير كبير. إذا كنت تخطط لعرض الصور في وضع ملء الشاشة وأنك تقوم بالتمرير بحذر شديد ، فقم بتشفير JavaScript و CSS و HTML.
منزلق أفقي مع اختلاف المنظر
إلى مراوح المنظر تؤثر على هذا المنزلق مع Swiper.js و HTML و CSS. بصرف النظر عن القدرة على الانزلاق باستخدام الزرين الموجودين على كل جانب ، على الجانب الأيمن ، لدينا جميع صور الدائرة الكاملة في صورة مصغرة. شريط تمرير مرئي مختلف وعالي الجودة لن يترك أي شخص يزور موقعنا غير مبال.
منزلق منظور ثلاثي الأبعاد سلس
شريط تمرير سريع الاستجابة اتبع حركات المؤشر الفأر. إنه قادر على إحداث تأثير كبير في المنظور يمكن أن يؤدي إلى مشاعر مختلطة لدى الزائر. إذا كنت تعرف كيفية استخدامه بشكل صحيح ، فيمكنك إعطاء تلك اللمسة الأصلية والرائعة لموقعنا على الويب. كود JavaScript و CSS و HTML ليست مفقودة.
شريط التمرير ملء الشاشة البطل
شريط تمرير صورة بطل ملء الشاشة في HTML و CSS و JavaScript. عند تأثير ترتد في كل الرسوم المتحركة هذا يعطيها ذلك وبشكل عام نواجه منزلق ملء الشاشة بجودة عالية مثل بقية القائمة.
شريط تمرير VELO.JS بحدود
أحد النقاط البارزة هو شريط تمرير ملء الشاشة مع رسوم متحركة رائعة للانتقال. نوصيك بالذهاب لرؤيته قيد التشغيل لبدء التفكير في كيفية تنفيذه على الويب. استخدم تأثيرات السرعة لتحسين الرسوم المتحركة التي تستخدم أزرار الأسهم ، ونقرة واحدة في التنقل وحتى التمرير ، ببساطة مثالية.
شريط تمرير عمودي CSS متجاوب مع صور مصغرة
ننتقل إلى أشرطة التمرير استجابة CSS للجوال جودة رائعة مثل هذه. سيكون لديك سلسلة من الصور المصغرة على اليمين والتي عند الضغط عليها ستبدأ الرسوم المتحركة في السقوط العمودي. تأثير رائع يستخدم CSS فقط لترك شريط تمرير لأفضل هذه القائمة.
فليكس بوكس منزلق الصورة
آخر شريط تمرير الصورة المتجاوب المصنوع من JavaScript وأن تكون أنيقًا للغاية. قصير وبسيط وبسيط ولا يوجد شيء أكثر من هذا. لها مكانها في قائمة منزلقات Flexbox.
Motion Blur مع مرشحات SVG
تجربة تحاكي تأثير ضبابية الحركة في كل مرة شريحة انه مفعل. يستخدم مرشح SVG Gaussian blur وبعض مفاتيح الرسوم المتحركة CSS. الشفرة المستخدمة في JavaScript هي فقط للمثال المحدد ووظائف شريط التمرير.
شريط تمرير متحرك
شريط تمرير متحرك تستجيب مع JavaScript و HTML و CSS. لدينا أسهم على الجانب الأيمن تسمح لنا بالمرور عبر الصور التي تنشأ من خلال الرسوم المتحركة الرشيقة والموجزة. يتم تحقيق تأثير كبير في كل شريحة لإبراز نفسها. حديثة جدًا في الرسوم المتحركة.
منزلق الصورة مع أنماط SVG
واحد آخر من تلك التجارب التي تحاول تحمل أنماط SVG لإنشاء بعض صور القناع لشريط تمرير CSS. إنه ينتج تأثير ضبابي مذهل للغاية مع لمسة نهائية رائعة. آخر من تلك الشرائح لإثارة المشاعر الطيبة لدى زائر موقعنا.
منزلق طبقة بسيط
شريط تمرير به أكثر من الرسوم المتحركة المتميزة يقدم هذا التأثير الموجي في كل مرة نضغط فيها على الأيقونة لتحريك صورة جديدة. تم في HTML و CSS و JavaScript ، يصبح شريط تمرير صورة آخر.
منزلق Pure CSS
من أبسط أشرطة التمرير CSS المحض. واحدة من مزاياها في وضع أسفل اليسار سلسلة من النقاط ستكون بمثابة الأزرار للوصول إلى كل صورة ستمر أمامنا دون أي رسوم متحركة خاصة.
كب كيك فقط المنزلق CSS
El أحلى منزلق في القائمة وأنه فقط في CSS و HTML. إنها واحدة من أكثر أنواع الكب كيك تميزًا في القائمة بأكملها على الجانب الأيمن. انقر فوق أحدها وسيظهر كب كيك بحركة رائعة تنتهي بتأثير ارتداد رائع. واحد من الأفضل بلا شك.
تأثير حركة شريط التمرير
واحدة من أكثر المتزلجون أناقة في الرسوم المتحركة وماذا تمكن من إدهاشنا عند التغيير الأول. منذ اللحظة الأولى لظهور الرسوم المتحركة ، تتركنا شفرة HTML و CSS و JavaScript الخاصة بها متفاجئة. آخر من أفضل اللمسات البسيطة التي يعطيها.
شريحة المنزلق
Un شريط تمرير الانتقال الذي يستخدم فئة إضافة بسيطة والتي تتميز برسوم متحركة سلسة للغاية لتصبح واحدة من المفضلة في هذه القائمة. إذا كنت تريد أن تميز نفسك في إصدار الجوال من الويب ، فهو أحد الأساسيات. قدر كبير بصريا.
سلايدر بارالاكس نيويورك
واحدة من أكبر مزايا هذا المنظر المنزلق في CSS هو أنه يمكن تخصيصه كثيرًا. هذا يعني أنه يمكنك تغيير الخط وحجمه ولونه وسرعة الرسوم المتحركة. يظهر الحرف الأول من كل مدينة في سلسلة مصفوفة JavaScript جديدة على شريحة جديدة. آخر من أشرطة التمرير القيمة لهذا المنشور.
انبثاق المنزلق
مع يتم تقديم هذا المنزلق بأسلوب مبسط حيث يظهر كل جزء من الصورة مع كل شريحة. مبدع للغاية ومختلف عما هو موجود في قائمة أشرطة التمرير وهذا يقف في مكانه الخاص.
المنزلق مع تأثير تموج
Un شريط تمرير ملء الشاشة عالي التأثير بألوان مسطحة لتحصل على كل ما لديها من عصير. JavaScript و HTML و CSS لشريط تمرير آخر مع تأثير لافت للنظر.
شريط التمرير مع معاينة الصورة
المنزلق GSAP مع معاينة الشرائح القادمة التي سيتم تقديمها للمستخدم. مثالي للنمذجة على موقع الموضة أو التصميم.
المتزلجون الانتقالات
ننهي القائمة ب منزلق عالي الجودة مع تأثير منمق وسلسلة من الرسوم المتحركة التي تحصل على تلك اللمسة الخاصة على موقعنا. يمكن تنشيط تأثير المنظر.
لا تفوت هذا قائمة رموز CSS أخرى للأزرار.
جيد جدا هذا المنشور ، شكرا جزيلا لك على المشاركة. يذهب إلى المفضلة مباشرة بدون توقف.
تحياتي يا صديقي.