Membuat Efek Animasi Dan Warna Pada Sebuah Elemen

Selamat siang...

Pada postingan ini saya hanya ingin share cara membuat efek animasi dan warna pada sebuah elemen. Untuk demo nya bisa dilihat berikut ini :

Pertama, tambahkan javascript berikut ini :

<script>

$(function() {

var state = true;

$( "#button" ).click(function() {

if ( state ) {

$( "#effect" ).animate({

backgroundColor: "#D580FE",

color: "#fff",

width: 600

}, 1000 );

} else {

$( "#effect" ).animate({

backgroundColor: "#fff",

color: "#000",

width: 240

}, 1000 );

}

state = !state;

});

});

</script>

Lalu, tambahkan kode CSS agar tampilan dari elemen yang dimaksud menjadi lebih cantik. Disini saya coba menambahkan fungsi scroll agar tampilan default dari elemen nya tidak terlalu jatuh kebawah meskipun diisi dengan kalimat yang panjang, sehingga kode nya menjadi seperti ini :

.toggler { width: 500px; height: 200px; position: relative; }

#button { padding: .5em 1em; text-decoration: none;background:#FEBFBF }

#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; overflow:auto; }

#effect h3 { margin: 0; padding: 0.4em; text-align: center; background:#FEBFBF; }

Terakhir, eksekusi dengan kode HTML seperti dibawah ini :

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Lorem Ipsum</h3>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

</div>

</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Click Here</a>

Untuk aplikasi pada blog, tinggal tambahkan javascript dan CSS tersebut dalam template dan letakkan kode HTML dimana temen-temen ingin efek seperti ini muncul, misalnya pada sebuah halaman statis atau pada halaman postingan.

Terima kasih dan semoga bermanfaat. :)