Membuat Animasi Perubahan Warna Menggunakan Color Animation
Di pembahasan kali ini saya akan membahas mengenai cara Membangun Animasi Perubahan Warna Menggunakan Color Animation. Color animation, Plugin ini didasarkan di Color Animasi oleh John Resig. Ini perbaikan bug utama dan pun menambahkan dukungan bagi Bordercolor-properti. Color animation ini adalah sebuah plugin dari jquery, karenanya dari itu bagi menggunakannya kita membutuh pun file jquerynya. Bagi mendapatkannya silahkan teman – teman kunjungi halaman blog berikut ini https://jquery.com/ .
Jquery pun menambahkan Plugin RGBA-warna, jadi kini teman – teman dapat merancang transparansi latar belakang dan teks latar depan secara independen. Namun ada yang perlu teman – teman ingat bahwa Internet Explorer 8 dan sebelumnya tak mendukung RGBA-warna. Oke seketika saja bagi Membangun Animasi Perubahan Warna Menggunakan Color Animation, silahkan simak panduan berikut ini, silahkan bikin script dibawah ini;
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>jQuery UI Effects - Animate demo</title>
<link rel=stylesheet href=//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css>
<link rel=stylesheet href=/resources/demos/style.css>
</head>
<body>
<div class=toggler>
<div id=effect class=ui-widget-content ui-corner-all>
<h3 class=ui-widget-header ui-corner-all>Animate</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<button id=button class=ui-state-default ui-corner-all>Toggle Effect</button>
</body>
</html>
kalau telah silahkan tambahkan file css berikut ini diantara tag <head> dan </head>, kenapa diantara tag <head> dan </head> karena saya menggunakan manfaat CSS internal. Bagi CSS di sini saya tak akan membahasnya lagi, silahkan teman – teman lihat di sini bagi referensi CSS nya. Klik…!!!
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
Oke kalau telah silahkan teman – teman tambahlkan lagi file dibawah ini, manfaat dari file jquery nya ;
<script src=https://code.jquery.com/jquery-1.12.4.js></script>
<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
<script>
$( function() {
var state = true;
$( #button ).on( click, function() {
if ( state ) {
$( #effect ).animate({
backgroundColor: #aa0000,
color: #fff,
width: 500
}, 1000 );
} else {
$( #effect ).animate({
backgroundColor: #fff,
color: #000,
width: 240
}, 1000 );
}
state = !state;
});
} );
</script>
Oke kalau telah silahkan save, dan jalankan di browsernya karenanya hasilnya kan seperti di bawah ini;
Oke lumayan gampang bukan, silahkan lihat hasil demo cara Membangun Animasi Perubahan Warna Menggunakan Color Animation di sini. LIHAT…!!!
Sumber https://kursuswebsite.org
