5 Ücretsiz Resim Karşılaştırma Kaydırıcı Script

Üst üste bindirilmiş kaydırıcılar, iki görüntü birbirinin üzerine bindirilmiş, genellikle önceki türden iki görüntü arasında karşılaştırma yapmanızı sağlar. Kullanılabilen bir kaydırıcı, önceki görüntüden daha az ve sonraki görüntüden daha azını göstermek için kullanıcı tarafından sürüklenebilir;.

Mars atmosferinin sert etkilerini görmek veya şehir manzaralarının yüzyılın yarısında nasıl değiştiğini görmek gibi bazı senaryolar için mükemmel bir yöntem.

Tasarımcılar için, bir teknik veya yaklaşımın orijinal görüntüdeki değişim miktarını yansıtmak için de harika bir yoldur. Karşılaştırma amacıyla kullanabileceğiniz çeşitli JS kütüphaneleri vardır. İşte bunlardan 5 tanesi.

Yirmi yirmi

Yirmi yirmi İki resim arasındaki farkları not etmeyi kolaylaştırmak için görsel bir araçtır. Çalışma jQuery ve jquery.event.move kullanan bu araç. Kullanımı çok kolaydır, sadece iki görüntü bir kaba koyun, sonra arayın yirmi yirmi(); konteyner için.

Sonra:

 $ ( "# Kapsayıcı") twentytwenty ().; 

Yirmi yirmi duyarlı ve tüm cihazlar için çalışıyor ve Temel çerçevesini kullanırsanız, bu kutudan çıkacak.

yan yana koymak

yan yana koymak iki ortam parçasını karşılaştırmanıza yardımcı olur (fotoğraflar veya GIF) ve görüntüler arasındaki değişimi zaman içinde vurgulamanızı kolaylaştırır. Bu eklentinin kullanımı kolaydır ve tüm cihazlarda çalışır. Sadece iki resim sağlayın, ardından eklentiyi mevcut seçeneklerle çağırın.

Seçeneklerde, kaydırıcının başlangıç ​​konumunu ayarlayabilir, dikey veya yatay olarak ayarlayabilir, etiket ve kredi ekleyebilir, animasyon ve daha birçok şey yapabilirsiniz..

Aşağıda bir demo deneyin:

imgSlider

imgSlider Görüntü karşılaştırma kaydırıcısını yapmak için basit bir jQuery eklentisi. Kullanımı basit ve kolaydır: JS ve CSS'yi ekledikten sonra, görüntüleri div ile ayrıldı için sınıf önce görüntü ve sağ için sınıf sonra görüntüyü çağırarak etkinleştirin .kaydırıcı();. Eklenti seçenekleri, kaydırıcının başlangıç ​​konumunu belirlemeyi ve kaydırıcıya talimat eklemeyi / göstermeyi içerir.

Eklentiyi arayın:

 $ ( 'Sürgü') sürgünün (.); 

Cocoen

Cocoen jQuery-Touch Etkinliğinin kullanımıyla dokunmaya olanak sağlar. Benzer bir HTML yapısı nedeniyle uygulanması kolaydır. Yirmi yirmi Eklenti. Betik yığında, jQuery dışında, bu eklentinin yanında jQuery Touch Event kütüphanesini de eklemeniz gerekir..

 
   
 $ (document) .ready (function () $ ('. cocoen'). cocoen (););

Aşağıda bir demo deneyin:

Görüntü Karşılaştırma Kaydırıcısı

CodyHouse, drag etkinliğini işlemek ve mobil destek eklemek için CSS3, jQuery ve bazı komut dosyaları içeren bir resim karşılaştırma kaydırıcısının tanıtımını yaptı. Bu eklentiyi burada açıklamanın ve talimatların tamamını takip edebilir ve demoyu buradan izleyebilirsiniz..

Aşağıda bir demo deneyin:

İşte 3 tane daha var:

Cato - Diğer eklentiler bağımlılık olarak jQuery'e ihtiyaç duyar ancak Cato Çalışmak için bir bağımlılık gerektirmez, bu da görüntü karşılaştırma sürgüleri için daha hafif bir kütüphane yapar. Kullanımı kolaydır, sadece Cato'nun CSS ve JS kütüphanesini ekleyin ve HTML yapısını izleyin.

Kaydırıcınıza uygulanabilecek seçenekler var, araç ipucu ekleme, kaydırma yönünü değiştirme, hatta sepya ve gri tonlama gibi filtre efekti ekleme dahil. Ancak, Cato’nun şu anda yalnızca WebKit’i desteklediğini unutmayın..

Önce sonra - Bu hafif, tamamen duyarlı ve herhangi bir düzen ve boyutta çalışıyor. Codepen'deki canlı gösterileri görebilirsiniz..

HTML5 Video Karşılaştırma Kaydırıcısı - Başka bir geliştirici, görüntüler için karşılaştırma kaydırıcısı yapmaya çalıştığında, Dudley Storey kaydırıcıyı videoya uygular. İş yapmak için jQuery'den ve birkaç satır koddan faydalanır. Aksiyonu görmek için Codepen demosuna bakın..