Cara Membuat Efek Grayscale Menggunakan Jquery
Jquery adalah library javascript yang dirancang sedemikian rupa bagi mempermudah sipengembang blog pada memakai animasi, menyeleksi unsur DOM, serta membangun program AJAX.
Dan dipembahasan kali ini kita akan membahas mengenai Cara Merancang Efek Grayscale Menggunakan Jquery, dimana adalah diantara contoh keistimewahan dan kemudahan jquery. oke silahkan teman-teman unduh jquery grayscalenya disini -> grayscale dan Mari kita praktekan.
Langkah pertama-tama bikin folder terlebih dahulu, lalu silahkan teman-teman siapkan sebuah gambar berwarna apa saja, dan disini saya menggunakan gambar dibawah ini :
Jikalau telah langkah berikutnya 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>
Jikalau telah, langkah berikutnya 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>
Jikalau telah silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jikalau benar karenanya hasilnya akan sama seperti di gambar dibawah ini :
Kesimpulannya efek grayscale yang disediakan oleh jquery ini membangun gambar yang tadinya gelap ketika mouse berada diposisi gambar tsb akan berubah menjadi normal/cerah seperti semula.
Oke jadi seperti begitulah contoh sederhana mengenai Cara Merancang Efek Grayscale Menggunakan Jquery. Semoga dapat bermanfaat bikin teman-teman dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
