Cara Membuat Efek Grayscale Menggunakan Jquery

Jquery merupakan library javascript yang dirancang sedemikian rupa untuk mempermudah sipengembang website dalam menerapkan animasi, menyeleksi elemen DOM, serta membangun aplikasi AJAX.

Dan dipembahasan kali ini kita akan membahas tentang Cara Membuat Efek Grayscale Menggunakan Jquery, dimana merupakan salah satu contoh keistimewahan dan kemudahan jquery. oke silahkan teman-teman download jquery grayscalenya disini -> grayscale dan Mari kita praktekan.

Langkah pertama buat folder terlebih dahulu, lalu silahkan teman-teman siapkan sebuah gambar berwarna apa saja, dan disini saya menggunakan gambar dibawah ini :

Jika sudah langkah selanjutnya teman-teman jalankan/run text-editornya, dan silahkan ketik/copy script HTML dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>efek grayscale jquery</title>
</head>
<body>
	<img src="cara-membuat-efek-grayscale-menggunakan-jquery.jpg" class="greyScale" width="400">

</body>
</html>

Jika sudah, langkah selanjutnya teman-teman masukan script jquery seperti dibawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/greyScale.min.js"></script>
<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>

Dan hasil dari kedua script diatas akan menjadi seperti dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>efek grayscale jquery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/greyScale.min.js"></script>
</head>
<body>
	<img src="cara-membuat-efek-grayscale-menggunakan-jquery.jpg" class="greyScale" width="400">

	<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>

Jika sudah silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :

Kesimpulannya efek grayscale yang disediakan oleh jquery ini membuat gambar yang tadinya gelap ketika mouse berada diposisi gambar tsb akan berubah menjadi normal/cerah seperti semula.

Oke jadi seperti itulah contoh sederhana tentang Cara Membuat Efek Grayscale Menggunakan Jquery. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Efek Grayscale Menggunakan Jquery

Kategori