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. . . .
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,
- silahkan LOG IN di blog anda
- klik Rancangan
- klik tambah Gadget
- Pilih HTML/Javascript
- 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 . . . . . .!!
Tidak ada komentar:
Posting Komentar