Efek Grayscale dengan jQuery

grayscale efek dengan jquery

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.

grayscale efek dengan 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.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

Tinggalin komentar dong!