Know Your Enemy

Cara Simple Membuat Animasi Gambar Dengan jQuery

Posted by Diposting oleh Moh. Farrah Aidid on di 10.25 | Label: Blogger |

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.

<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br /><script src="http://kang-onk.googlecode.com/files/Aminasi-1.js" type="text/javascript"><br /></script><script src="http://kang-onk.googlecode.com/files/Aminasi-2.js" type="text/javascript"></script><br /><script src="http://kang-onk.googlecode.com/files/Aminasi-3.js" type="text/javascript"><br /></script><style type="text/css"><br />.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"><br /><img height="200" src="URL Gambar 1" width="400" /><br /><img height="200" src="URL Gambar 2" width="400" /><br /><img height="200" src="URL Gambar 3" width="400" /></div><br /><script type="text/javascript"><br /><br />Kode jQuery yang anda suka<br /><br /></script><br />

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 :

jQuery01

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

jQuery02

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

jQuery03

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

jQuery04

$('#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});

jQuery05

$('#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});

jQuery06

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

jQuery07

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

jQuery08

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

jQuery09

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

jQuery10

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

jQuery11

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