Button Gambar Berjalan Dengan jQuery & CSS3

Sekaranglah saatnya kita bermain script jquery yang di padukan dengan CSS3. Di sini fungsi CSS3 hanya untuk memodifikasi gambar yang akan kita buat berjalan.Tutorial ini saya dapatkan di http://jquery.com/ namun di sini sedikit di kembangkan. Tutorial kali ini kita akan membahas bagaimana membuat gambar berjalan dengan bantuan jquery, CSS3 dan gambar tersebut akan kembali lagi dengan gambar yang berbeda, di sini sobat juga bisa menghentikan gambar untuk melihat animasi berikutnya, bisa menambahkan fungsi hover dengan scale, skew, blur, atau yang lainnya itu semua tergantung kreasi dari sobat. 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 ini 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:320px;height:230px;position:relative;left:0px; top:10px;background:url(http://picturestack.com/415/441/5V3cats1YI.jpg);display:none;-moz-border-radius: 10px;-webkit-border-radius:10px;}
#amdhas.potobaru {background:url(http://picturestack.com/419/787/JPocatsPmX.jpg);-webkit-box-shadow:0px 0px 60px red;-moz-box-shadow: 0px 0px 60px red;-moz-border-radius:10px;-webkit-border-radius:10px;}
#mulai {margin-bottom:10px;font-weight:bold;text-align:center;cursor:pointer;text-shadow:2px 1px 8px #000, 0px -1px 3px #000, 2px 2px 2px #000;color:#fff;font-family:courier new;font-size:15px;background:darkred;padding:8px;width:10%;border:1px solid #fff;border-radius:5px;box-shadow: 1px 1px 20px #33F;-webkit-box-shadow: 0px 0px 60px #fff;-moz-box-shadow: 2px 2px 4px #fff;}
#stop {font-weight:bold;text-align:center;cursor:pointer;text-shadow:2px 1px 8px #000, 0px -1px 3px #000, 2px 2px 2px #000;color:#fff;font-family:courier new;font-size:15px;background:darkred;padding:8px;width:10%;border:1px solid #fff;border-radius:5px;box-shadow: 1px 1px 20px #fff;-webkit-box-shadow: 0px 0px 60px #fff;-moz-box-shadow: 2px 2px 4px #fff;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="mulai">
Play !</div>
<div id="stop">
Stop !</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>

Keterangan :
Seperti contoh di atas apabila sobat mengklik Play ! 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);
.animate({left:'-=900'},1500);

Kode tersebut sobat bisa ganti valuenya di +=900 apabila semakin besar maka gambar akan bergerak semakin jauh.
Dan teks yang berwarna merah anda bisa ganti dengan alamat URL image sobat.
Untuk css3nya sobat bisa berkreasi sendiri.


Please rate this article: