Sabtu, 01 Oktober 2011

Membuat gambar animasi kedap kedip dengan jquery



Assalamualaikum wr wb, Di postingan kali ini saya akan membahas cara membuat gambar animasi kedap kedip dengan jquery seperti apa itu gambar kedap kedip untuk anda yang penasaran silahkan Liat Demo nya. . . .

DEMO

Silahkan lihat gambar nya perhatikan baik - baik, apakah gambar nya kedap kedip atau tidak,
emm gimana. . . . . .?? apa sudah anda lihat gambarnya, ok bila anda ingin membuat seperti itu caranya cukup mudah,

  1. silahkan LOG IN di blog anda
  2. klik Rancangan / Tata Letak
  3. klik Tambah Gadget
  4. Pilih HTML/Javascript
  5. Masukan kode di bawah ini di dalam kotak yang ada

<img alt="zinto-exzet" id="zinto-exzet" src="URL gambar anda" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function() {
var w = $(window),
bgImage = $("#zinto-exzet"),
aspect = bgImage.width()/bgImage.height();
bgImage.addClass("zinto-exzet");
function backgroundBreathe(ms){
ms = (Math.floor(ms/2))*2;
bgImage.animate({opacity: ".1"}, ms/3).animate({opacity: "3"}, ms/2);
window.BBKDtimer = setTimeout(function(){backgroundBreathe(ms);}, ms);
} 
function bgResize() {
var imageWidth = (bgImage.width()/bgImage.height()) < aspect? w.height() * aspect : bgImage.css("minWidth");
bgImage.css({"minWidth": imageWidth});
}
w.resize(bgResize);
backgroundBreathe(5500);
});
</script>

silahkan anda ganti kode berwarna Biru dengan url gambar sobat. lalu Simpan dan Lihat hasilnya. semoga bermanfaat Wassalamulaikum . . . . . .!!