5 Skrip Slider Perbandingan Gambar Gratis
Slider yang di-overlaid memungkinkan Anda membuat perbandingan antara dua gambar, biasanya jenis sebelum dan sesudah, dengan dua gambar saling bertumpukan. Slider yang dapat dimanipulasi, dapat diseret oleh pengguna untuk menampilkan lebih sedikit gambar sebelum dan lebih banyak gambar setelah, dan sebaliknya.
Ini adalah cara sempurna untuk skenario tertentu seperti melihat efek keras atmosfer Mars atau bagaimana lanskap kota berubah lebih dari setengah abad..
Untuk desainer, ini juga merupakan cara yang bagus untuk merefleksikan jumlah perubahan teknik atau pendekatan terhadap gambar asli. Ada berbagai pustaka JS yang dapat Anda gunakan untuk tujuan perbandingan. Inilah 5 di antaranya.
Dua puluh dua puluh
Dua puluh dua puluh adalah alat visual untuk memudahkan untuk mencatat perbedaan antara dua gambar. Alat ini memanfaatkan jQuery dan jquery.event.move untuk bekerja. Ini sangat mudah digunakan, cukup tumpukan dua gambar ke dalam wadah, lalu panggil twentytwenty (); untuk wadah.
Kemudian:
$ ("# container"). twentytwenty (); Twentytwenty responsif dan berfungsi untuk semua perangkat, dan jika Anda menggunakan kerangka Foundation, ini akan bekerja di luar kotak.
Mendekatkan
Mendekatkan membantu Anda membandingkan dua potong media (foto atau GIF) dan membuatnya mudah bagi Anda untuk menyoroti perubahan antar gambar dari waktu ke waktu. Plugin ini mudah digunakan dan berfungsi di semua perangkat. Cukup sediakan dua gambar lalu panggil plugin dengan opsi yang tersedia.
Pada opsi, Anda dapat mengatur posisi awal slider, mengaturnya vertikal atau horizontal, menambahkan label dan kredit, animasi dan banyak lagi.
Coba demo di bawah ini:
imgSlider
imgSlider adalah plugin jQuery sederhana untuk membuat slider perbandingan gambar. Penggunaannya sederhana dan mudah: setelah memasukkan JS dan CSS, bungkus gambar dalam div dengan kiri kelas untuk sebelum gambar, dan kanan kelas untuk setelah gambar, lalu aktifkan dengan menelepon .slider ();. Opsi plugin termasuk mengatur posisi awal slider, dan menambahkan / menunjukkan instruksi pada slider.
Panggil plugin:
$ ('. slider'). slider (); 
Cocoen
Cocoen memungkinkan sentuhan dengan penggunaan Acara jQuery-Touch. Sangat mudah untuk diterapkan karena struktur HTML yang mirip dengan Dua puluh dua puluh plugin. Pada tumpukan skrip, selain jQuery Anda harus menyertakan pustaka jQuery Touch Event, di samping plugin ini.
$ (dokumen) .ready (function () $ ('. cocoen'). cocoen (););
Coba demo di bawah ini:
Slider Perbandingan Gambar
CodyHouse membuat demo slider perbandingan gambar dengan CSS3, jQuery dan beberapa skrip untuk menangani acara seret dan untuk menambahkan dukungan seluler. Anda dapat mengikuti penjelasan lengkap dan instruksi menggunakan plugin ini di sini dan lihat demo di sini.
Coba demo di bawah ini:
Berikut 3 lainnya:
Cato - Plugin lain membutuhkan jQuery sebagai dependensi tetapi Cato tidak memerlukan ketergantungan untuk berfungsi, menjadikannya perpustakaan yang lebih ringan untuk bilah perbandingan gambar. Penggunaannya mudah, cukup sertakan Cato's CSS dan JS library dan ikuti struktur HTML-nya.
Ada opsi yang tersedia untuk diterapkan pada slider Anda, termasuk menambahkan tooltip, mengubah arah slider, bahkan menambahkan efek filter seperti sepia dan skala abu-abu. Namun Anda harus mencatat bahwa Cato saat ini hanya memiliki dukungan untuk WebKit.
Sebelum setelah - Ini ringan, sepenuhnya responsif, dan bekerja pada tata letak dan ukuran apa pun. Anda dapat melihat demo langsung di Codepen.
Slider Perbandingan Video HTML5 - Ketika pengembang lain mencoba membuat slider perbandingan untuk gambar, maka Dudley Storey menerapkan slider ke video. Untuk membuat pekerjaan, ia memanfaatkan jQuery dan hanya beberapa baris kode. Lihat demo di Codepen untuk melihat aksinya.
