gambar berjalan dengan CSS3 dan Jquery

 Untuk melihat animasi yang tercipta antara jquery dan css3 sobat bisa melihat contoh di bawah dengan mengklik tombolnya. Silahkan di coba terlebih dahulu sebelum kita membahasnya, siapa tau sobat tertarik ingin membuatnya.

Apabila sobat tertarik ingin membuatnya silahkan masukan kode di bawah di dalam postingan, di edit html bukan di compose. Setelah itu di preview terlebih dahulu untuk melihat hasilnya karena siapa tau sobat ingin berkreasi yang lain.

<style type="text/css">
#amdhas { margin:3px; width:550px; height:230px;position:relative; left:0px; top:10px;background:url(masukan url gambar 1);display:none;-moz-border-radius: 10px;-webkit-border-radius: 10px;}#amdhas.potobaru {background:url(masukan url gambar 2); -webkit-box-shadow: 0px 0px 60px lime;-moz-box-shadow: 0px 0px 60px lime;-moz-border-radius:10px;-webkit-border-radius:10px;}#mulai {cursor:pointer;text-shadow:2px 2px 6px lime;color:lime;font-size:15px;background:#274e13;margin-bottom:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px lime;-moz-box-shadow: 2px 2px 4px lime;}#stop {cursor:pointer;text-shadow:2px 2px 6px lime;color:lime;font-size:15px;background:#274e13;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px lime;-moz-box-shadow: 2px 2px 4px lime;}
</style><script src="http://code.jquery.com/jquery-latest.min.js">
</script><div id="mulai">Mulai !</div><div id="stop">
Berhenti !</div><div id="amdhas"></div><script>
$("#mulai").click(function () {$("#amdhas").show("slow");$("#amdhas").animate({left:'+=900'},5000);$("#amdhas").queue(function (){$(this).addClass("potobaru");$(this).dequeue();});$("#amdhas").animate({left:'-=900'},1500);$("#amdhas").queue(function (){$(this).removeClass("potobaru");$(this).dequeue();});$("#amdhas").slideUp();
});$("#stop").click(function () {$("#amdhas").clearQueue();$("#amdhas").stop();
});</script>

Selamat mencoba semoga berhasil

KETERANGAN DARI KODE JQUERY:
Seperti contoh di atas apabila sobat mengklik Jalankan! maka gambar akan berjalan ke kanan, Nah.. di situ sobat bisa berkreasi seberapa jauh gambar itu berjalan dan kembali lagi. Silahkan amati kode dibawah:
.animate({left:'+=900'},5000);
Kode tersebut sobat bisa ganti valuenya di +=900 apabila semakin besar maka gambar akan bergerak semakin jauh. Untuk css3nya sobat bisa berkreasi sendiri. Selamat mencoba, semoga bermanfaat dan berguna. 

SUMBER : PANDET

Tweet