5 صورة مجانية مقارنة البرامج النصية المتزلج

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

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

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

Twentytwenty

Twentytwenty هي أداة مرئية لتسهيل ملاحظة الاختلافات بين صورتين. هذه الأداة تستخدم jQuery و jquery.event.move للعمل. إنه سهل الاستخدام ، ما عليك سوى تكديس صورتين في حاوية ، ثم الاتصال twentytwenty ()؛ للحاوية.

ثم:

 $ ( "# حاوية") twentytwenty ()؛ 

Twentytwenty هو استجابة ويعمل مع جميع الأجهزة ، وإذا كنت تستخدم إطار عمل Foundation ، فسوف ينجح ذلك.

وضع شيئا بجانب الآخر

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

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

جرب العرض التوضيحي أدناه:

imgSlider

imgSlider هو البرنامج المساعد jQuery بسيط لجعل منزلق مقارنة الصور. الاستخدام بسيط وسهل: بعد تضمين JS و CSS الخاص به ، قم بلف الصور بتقسيم div اليسار الطبقة ل قبل الصورة ، و حق الطبقة ل بعد الصورة ، ثم تفعيلها عن طريق الاتصال .المنزلق()؛. تتضمن خيارات المكوّن الإضافي تعيين الموضع الأولي لشريط التمرير ، وإضافة / إظهار الإرشادات على المنزلق.

اتصل بالمكون الإضافي:

 $ ( '. المنزلق') شريط التمرير ()؛ 

Cocoen

Cocoen يتيح اللمس باستخدام حدث jQuery-Touch. من السهل التقديم بسبب بنية HTML مشابهة للبنية Twentytwenty توصيل في. في حزمة البرامج النصية ، إلى جانب jQuery ، يجب عليك تضمين مكتبة حدث jQuery Touch ، إلى جانب هذا البرنامج المساعد.

 
   
 $ (مستند). جاهزة (دالة () $ ('. cocoen'). cocoen ()؛)؛

جرب العرض التوضيحي أدناه:

مقارنة الصورة المتزلج

قامت CodyHouse بعمل عرض توضيحي لشريط تمرير مقارنة الصور باستخدام CSS3 و jQuery وبعض البرامج النصية للتعامل مع حدث السحب وإضافة دعم للهاتف المحمول. يمكنك اتباع الشرح الكامل وتعليمات استخدام هذا البرنامج المساعد هنا ومشاهدة العرض التوضيحي هنا.

جرب العرض التوضيحي أدناه:

هنا 3 أخرى:

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

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

قبل بعد - هذا خفيف الوزن وسريع الاستجابة ويعمل على أي تخطيط وحجم. تستطيع أن ترى في العروض الحية على Codepen.

HTML5 فيديو مقارنة المتزلج - عندما يحاول مطورون آخرون عمل شريط تمرير مقارنة للصور ، فإن تطبيق Dudley Storey يطبق شريط التمرير على الفيديو. لجعل العمل ، وقال انه يستخدم jQuery وفقط بضعة أسطر من التعليمات البرمجية. رؤية التجريبي على Codepen لرؤية العمل.