Kemampuan jQuery memang luar biasa. Dari efek animasi, ajax serta ratusan plugin siap pakai membuat sesuatu yang dulu sulit dilakukan sekarang semudah membalik tangan. Salah satu efek yang sekarang sering di pakai adalah efek grayscale pada gambar, saat mouse berada diatas gambar, barulah gambar warna muncul. Jika anda perhatikan, website ini juga menggunakan efek yang sama untuk gambar yang tampil di listing artikel.
Salah satu plugin yang menawarkan efek ini adalah jQuery Grayscale. Ingat,efek grayscale dilakukan “on the fly” dan gambar yang dibutuhkan hanya satu yaitu gambar berwarna. Sekali lagi, ini adalah “magic Trick” ala jQuery.
Berikut ini adalah script untuk menampilkan 3 gambar alam yang ditampilkan dengan efek grayscale, saat mouse anda berada disebuah gambar, baru gambar tersebut berwarna.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Efek Grayscale dengan Jquery </title>
<script src="jquery.js"></script>
<script src="greyscale.min.js"></script>
</head>
<style>
a {
text-align: center;
}
</style>
<body>
<a href="image1.jpg">
<img src="image1.jpg" alt="Image" class="greyScale" />
</a>
<a href="image2.jpg">
<img src="image2.jpg" alt="Image" class="greyScale" />
</a>
<a href="image3.jpg">
<img src="image3.jpg" alt="Image" class="greyScale" />
</a>
<script>
$(function() {
// fade in the grayscaled images to avoid visual jump
$('.greyScale').hide().fadeIn(1000);
});
// user window.load to ensure images have been loaded
$(window).load(function () {
$('.greyScale').greyScale({
// call the plugin with non-defult fadeTime (default: 400ms)
fadeTime: 500,
reverse: false
});
});
</script>
</body>
</html>
Demo
Silahkan coba demonya disini.