Hoverizr – Tampilan mendalam dari plugin jQuery

Diterbitkan: 2015-10-19

Sebagai seorang desainer web, dari waktu ke waktu, Anda mungkin perlu membuat gambar skala abu-abu memudar menjadi warna dengan mouse. Jadi solusi tipikalnya adalah membuat setiap gambar desaturasi untuk mencapai efek skala abu-abu di Photoshop. Kemudian, Anda harus menambahkan beberapa div dan tag gambar tambahan ke markup dan kemudian menambahkan beberapa keajaiban jQuery untuk memudarkan gambar masuk dan keluar. Atau, Anda dapat menggabungkan dua gambar menjadi satu gambar yang lebih besar dengan tinggi dua kali lipat dan bermain-main dengan pemosisian latar belakang dalam file CSS dan Javascript.

Mari kita lihat pro dan kontra dari masing-masing dari dua solusi tersebut:

Kelebihan:

  • Jika Anda menggunakan sprite gambar (kedua gambar dalam satu file) maka Anda memiliki satu permintaan HTTP yang lebih sedikit untuk setiap gambar.

Kontra:

  • Anda harus memanipulasi setiap gambar secara terpisah, yang berarti bahwa klien mungkin tidak dapat memperbarui gambar dengan efek itu secara dinamis dan ini adalah proses yang memakan waktu.
  • Jika Anda menggunakan dua gambar maka Anda akan memiliki banyak permintaan HTTP. Either way, jika gambarnya besar situs menjadi sangat lambat.
  • Anda perlu menulis kode jQuery untuk efek hover dan fade.

Harus melakukan itu setiap kali benar-benar membuat saya bingung, jadi saya mencari metode untuk melakukan ini secara dinamis untuk setiap gambar, tanpa perlu kehilangan markup semantik dan harus memproses setiap gambar.

Masukkan elemen kanvas. Dengan diperkenalkannya HTML5, elemen kanvas menjadi semakin menonjol di komunitas. Sebagian besar dari Anda pasti sudah mendengar tentang apa yang dilakukan kanvas, jadi saya tidak akan membahasnya di sini. Yang saya butuhkan dari kanvas adalah kemampuan manipulasi gambarnya. Anda dapat mengimpor gambar di dalam kanvas Anda dan memanipulasi nilai setiap piksel.

Cukup banyak yang saya butuhkan untuk mengembangkan Plugin Hoverizr saya. Plugin jQuery yang secara dinamis menambahkan efek (skala abu-abu, blur, atau inversi warna) ke gambar yang ditargetkan dan menyertakan efek fade out/in effect pada kursor mouse. Dan, mengikuti tren desain web, ini sepenuhnya responsif.

Inilah yang akan kita capai dengan fade out yang bagus dari versi yang dimanipulasi di atas:

Anda dapat melihat contoh langsung bersama dengan demo efek lain dari Hoverizr di sini.

Sekarang mari selami.

Arahkan kursor

Hoverizr dipisahkan menjadi tiga bagian.

  1. Inisialisasi dan buat elemen yang dibutuhkan.
  2. Buat elemen kanvas dan tambahkan efeknya.
  3. Tambahkan efek hover fade in/out untuk elemen gambar yang ditargetkan.

Hoverizr mengambil markup sederhana seperti ini…

 <img class="namakelas" src="file-gambar" />

…dan menghasilkan sesuatu seperti ini…

 <div class="hoverizr-container">
	<img class="namakelas" src="file-gambar" />
	<canvas class=".canv"></canvas>
</div>

Bagian 1. Inisialisasi dan Buat Elemen yang Diperlukan

Untuk mencapai markup ini dan menambahkan gaya penting pada kanvas, gambar, dan wadah div, saya menggunakan jQuery di bawah ini di dalam fungsi .each() untuk memengaruhi semua gambar yang ditargetkan:

 $(this).wrap('<div class="hoverizr-container" />');
$(ini).parent('.hoverizr-container').css({'position':'relative'});
$(this).parent('.hoverizr-container').append('<canvas class="canv"></canvas>');
$(this).next('.canv').css({'position':'absolute','top':'0','left':'0','z-index':10});

$(this) mengacu pada setiap gambar yang ditargetkan dengan kode kami dalam inisialisasi. Kami membuat div yang membungkus elemen gambar target, kami mengatur posisinya menjadi relatif agar gambar dan kanvas di atas satu sama lain. Kemudian kita membuat elemen kanvas di bawah elemen gambar dan akhirnya menambahkan beberapa gaya untuk memposisikan kanvas tepat di atas gambar.

Tentu saja, dalam kode plugin beberapa bagian berbeda.

Bagian 2. Buat Elemen kanvas dan tambahkan Efek

Ke bagian kedua, di mana kita akan menginisialisasi kanvas dan melakukan manipulasi gambar. Untuk keperluan tutorial ini saya hanya akan menjelaskan efek grayscale.

Pertama, kita mendapatkan lebar dan tinggi pada dua variabel untuk menggunakannya pada inisialisasi kanvas. Sekali lagi, $(this) merujuk ke setiap gambar yang ditargetkan plugin.

 var lebar = $(ini).lebar();
var tinggi = $(ini).tinggi();

Mari kita buat kanvas kita:

 $(ini).next('.canv').attr({"width": lebar ,"height": tinggi});
var kanvas = $(ini).next('.canv').get(0);
var konteks = kanvas.getContext("2d");
var gambar = $(ini).get(0);
konteks.drawImage(gambar, 0, 0);

Jadi kita mengatur lebar dan tinggi kanvas, kita mendapatkan elemen ke variabel, mendapatkan konteks dan akhirnya menambahkan gambar kita di dalam konteks.

Sekarang untuk keajaiban manipulasi gambar!

 mencoba {
      mencoba { 
	var imgd = context.getImageData(0, 0, lebar, tinggi)  
      } tangkap (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, lebar, tinggi) 
      } 						 
} tangkap (e) {
throw new Error("tidak dapat mengakses data gambar: " + e)
} 
						
var pix = imgd.data;

Seluruh bagian coba dan tangkap ini adalah untuk mengaktifkan hak istimewa ke beberapa browser yang memiliki langkah-langkah keamanan ekstra (tentu saja tidak ada yang kritis). Kami memiliki variabel imgd baru untuk menyimpan data gambar yang kemudian kami simpan di dalam variabel pix sebagai array.

Sekarang efek skala abu-abu:

 for (var i = 0, n = pix.length; i < n; i += 4) {
	var skala abu-abu = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = skala abu-abu; // merah
	pix[i+1] = skala abu-abu; // hijau
	pix[i+2] = skala abu-abu; // biru
	// i+3 adalah alfa (elemen keempat)
}
konteks.putImageData(imgd, 0, 0);

Kami memiliki pola berulang di sini. Masing-masing empat nilai larik pix mewakili nilai merah, hijau, biru, dan alfa dari suatu piksel. Jelas kami tidak ingin mengubah alfa jadi kami akan mengabaikannya. Alih-alih hanya mendapatkan nilai rata-rata dari tiga saluran warna, saya malah menggunakan formula bagus yang saya dapatkan dari tutorial yang bagus, HTML5 Canvas Image Effects: Black & White. Akhirnya kami menempatkan data gambar baru kembali di kanvas kami.

Bagian 3. Tambahkan Efek Hover fade in/out untuk Elemen Gambar yang Ditargetkan

Ini adalah bagian terakhir dan mungkin yang paling mudah. Membuat kanvas memudar untuk mengungkapkan gambar asli di bawah saat mouse melayang.

 this.parent('.hoverizr-container').hover(function() {
	$(ini).anak-anak('.canv').stop(benar,benar).fadeOut("cepat");
	},fungsi() {
	$(ini).anak-anak('.canv').stop(benar,benar).fadeIn("lambat");
});

Sekali lagi ini adalah singkatan dari elemen gambar target. Fungsi hover cukup jelas. Yang kami lakukan hanyalah menargetkan kanvas, menghentikan animasi apa pun yang antri dan keluar. Kecepatan diatur ke "cepat" tetapi dapat diatur ke "lambat" atau nilai bernomor dalam milidetik. Ketika hover selesai, fungsi kedua berlangsung, memudarkan kanvas lagi.

Masalah yang Diketahui

Ukuran keamanan browser mungkin muncul jika Anda mencoba menggunakan gambar dari domain lain. Sayangnya, tidak ada yang bisa kita lakukan saat ini. Gambar harus dihosting di domain yang sama dengan halaman Anda.

Hoverizr vs. Tutorial ini

Hoverizr adalah plugin yang memiliki semua yang Anda butuhkan untuk mencapai efek ini bersama dengan efek blur dan inversi warna. Ini memiliki banyak opsi penyesuaian yang disertakan seperti pengaturan lebar dan tinggi, kecepatan pengaturan fade in dan out dan banyak lainnya. Tujuan dari tutorial ini hanya untuk menunjukkan bagaimana beberapa bagian kerja Hoverizr yang lebih bagus. Kode tidak akan berfungsi sebagaimana adanya karena merupakan bagian dari plugin - dilucuti ke dasar -.

Jika Anda tertarik untuk menggunakan Hoverizr, meningkatkannya, atau memberi saya saran, silakan periksa di sini: Plugin jQuery Hoverizr.