Cara Simple Membuat Animasi Gambar Dengan jQuery

Biasa, sesudah buka puasa ramadhan saya selalu jalan-jalan karena seharian sudah menahan lapar, haus, nafsu dan segala yang membatalkan puasa. Eh, tapi jalan-jalan kali ini bukan didunia nyata melainkan didunia maya dan ketemu pada gambar yang menggunakan animasi yang berbeda dari yang saya tahu sebelumnya.

Dan intinya, jika anda berminat memasang foto/gambar dengan animasi ikuti langkah Kang Onk dibawah nantinya. Ini beda dengan animasi-animasi sebelumnya, yakni Membuat Slideshow pada Gambar Blog, Membuat Slideshow dengan jQuery V-2 dan Membuar Slideshow Gambar V-3 pada Blog

Pada tutorial kali ini sangatlah mudah alias simple. Langsung ke TKB aja ya?
Berbeda dengan tutorial Blogger sebelumnya karena animasi ini bisa dipasang dimanapun anda mau, entah didalam rumah ataupun di dapur... hehehhe, Intinya, setaiap anda memasang kode dibawah ini pastikan bahwa yang dipilih adalah HTML/JavaScript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kang-onk.googlecode.com/files/Aminasi-1.js" type="text/javascript">
</script><script src="http://kang-onk.googlecode.com/files/Aminasi-2.js" type="text/javascript"></script>
<script src="http://kang-onk.googlecode.com/files/Aminasi-3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL Gambar 1" width="400" />
<img height="200" src="URL Gambar 2" width="400" />
<img height="200" src="URL Gambar 3" width="400" /></div>
<script type="text/javascript">

Kode jQuery yang anda suka

</script>

Catatan : - Ubah URL Gambar 1, 2 dan 3 dengan URL Gambar Anda serta pilih kode-kode dibawah sesuai keinginan yang anda suka lalu ganti Kode jQuery yang anda suka

• Berikut pilihan Kode jQuery :

$('#ke2').cycle({fx:'zoom',speedIn:2500,speedOut: 500,easeIn:'bouncein',easeOut: 'easeout',sync:0,delay:-4000});

$('#ke2').cycle({fx:'custom',cssBefore:{left: 232,top: -232,display: 'block'},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -3000});

$('#ke2').cycle({fx:'custom',sync: 0,cssBefore: {top:0,left: 360,display: 'block'},animIn:{left: 0},animOut: {top: 232},delay: -1000});

$('#ke2').cycle({fx:'custom',cssBefore: {left: 115,top: 115,width: 0,height: 0,opacity: 1,zIndex: 1},animOut: {opacity: 0},animIn: {left: 0,top: 0,width: 400,height: 200},cssAfter: {zIndex: 0},delay: -3000});

$('#ke2').cycle({fx: 'custom',cssBefore: {top:0,left: 0,width: 0,height: 0,zIndex: 1},animIn:{width: 400,height: 200},animOut:{top:200,left: 200,width: 0,height: 0},cssAfter:{zIndex: 0},delay: -1000});

$('#ke2').cycle({fx:'shuffle',shuffle: {top:-280,left: 280},easing:'backinout',delay: -2000});

$('#ke2').cycle({fx:'curtainX',sync: false,delay: -2000});

$(function(){$('#ke2').cycle({fx:'cover',delay:-2000,cssBefore:{opacity:1 },animOut:{ opacity: 0 }});});

$('#ke2').cycle('wipe');

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,clip:'zoom'});

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,delay:-4000,clip:'l2r'});

Selamat berkreasi, semoga berhasil dan bermanfaat.