June 21, 2013

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. :)

32 comments

  1. asekkkkkkkkkkkk pertama ya gan...

    ReplyDelete
  2. Buat postingan atau tata letak? huhhh

    ReplyDelete
    Replies
    1. terserah saja gan maunya dimana... shake tergantung difungsikan untuk apa...

      Delete
    2. buat dua2nya juga boleh :) iya kan mbak..

      Delete
  3. trmksih sobat infonya dengan sedikit sentuhan jagung dengan Css Sebuah Elemen tampil beda y mas trmks dah berbagi bos

    ReplyDelete
  4. weits pake tombol dih...
    ada juga bisa yg sekali hover...

    ReplyDelete
    Replies
    1. maap gan masih newbie jd yg pake tombol aja dulu :D

      Delete
  5. izin nyimak mb,,,,
    kapan" bisa,di coba ni

    ReplyDelete
  6. Wiihh.. mantab.. terus berkreasi dengan kode script yang buat saya kliyengan :D

    ReplyDelete
    Replies
    1. tenang aja mba, saya temenin kliyengannya... omg peace2

      Delete
  7. wuih wuih... asekkkk bisa berubah gitu ya, kayak kesatria baja hitam... saya lagi nyari tutorial ngubah file .swf jadi html, mba. adakah di sini.

    ReplyDelete
    Replies
    1. wah ini bukan kayak ksatria baja hitam gan, tapi berubah seperti iron man... peace2 wah kalo tutorial yang seperti agan cari tidak ada... spoiled

      Delete
  8. aku penasaran nih mbak, mau coba dulu ya. bikin 2 sebelahan coba kalo di klik ntar bisa tabrakan gak :) hehehe

    ReplyDelete
    Replies
    1. ok gan, tp jangan lupa hati2 gan, biar ga parah tabrakannya... :D peace2

      Delete
  9. wah keren juga gan saya ijin BM dulu saja

    ReplyDelete
  10. hanya dengan script tertentu bisa membuat efek seperti itu mba, bagus sekali happy blogging mba pleased

    ReplyDelete
  11. Tutor yang menarik. mungkin pake yang biasa aja supaya gak terlalu berat.

    ReplyDelete
  12. Makin Cantik blog Ungu,,.. lama nggak mampir, maaf ya.
    Oke deh, aye coba pakai Effect animated + Warna dari sobat Blog Ungu Cantik ini.
    Makasih sudah mau berbagi.

    ReplyDelete
    Replies
    1. sama-sama gan, terima kasih juga atas kunjungannya...

      Delete
  13. saya coba kok gak bisa ya ? tolong donks....

    ReplyDelete