UP

Latest News

Home » Tips Blog » Animasi gambar berjalan

Animasi gambar berjalan

Diposkan oleh Unknown di 22:21

Postingan saya kali ini akan menerang kan Animasi Gambar Berjalan,yanga mana animasi ini bisa anda taruh di awal atau di akhir postingan sobat semua,untuk mempercantik postingan anda semua,sehingga menarik pengunjung untuk terus mengikuti blog kita..

baik kita mulai saja Tutorial nya...

dalam membuat gambar berjalan yag sobat perlu perhatikan adalah

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.

Mulai !

Berhenti !

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:320px; height:230px;position:relative; left:0px; top:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAqNWWzpfpQ-gYiFYRYpbGbROYFhsg1TWIHoFooLfjG30qVaj-v258h5dvCJvo_6Tl0tq-OoeH840yH_s-0f3m6yv6OyfZyn17_KNB6bDGv-shKjgQqyxFEhomI1qhf8TT_opu4XEHTk/s400/soekarno-presidenku.jpg);display:none;-moz-border-radius: 10px;-webkit-border-radius: 10px;}#amdhas.potobaru {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAqNWWzpfpQ-gYiFYRYpbGbROYFhsg1TWIHoFooLfjG30qVaj-v258h5dvCJvo_6Tl0tq-OoeH840yH_s-0f3m6yv6OyfZyn17_KNB6bDGv-shKjgQqyxFEhomI1qhf8TT_opu4XEHTk/s400/soekarno-presidenku.jpg); -webkit-box-shadow: 0px 0px 60px red;-moz-box-shadow: 0px 0px 60px red;-moz-border-radius:10px;-webkit-border-radius:10px;}#mulai {cursor:pointer;text-shadow:2px 2px 6px #333;color:red;font-size:15px;background:#eee;margin-bottom:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px #333;-moz-box-shadow: 2px 2px 4px #333;}#stop {cursor:pointer;text-shadow:2px 2px 6px #333;color:red;font-size:15px;background:#eee;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:8px;width:20%; -webkit-box-shadow: 0px 0px 60px #333;-moz-box-shadow: 2px 2px 4px #333;} </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>

Keterangan dalam kode

seperti contoh di atas,bila sobar mengklik jalan kan maka gambar akan jalan.untuk gambar nya sobat bisa berkereasi sendiri sesuai kreatipitas sobat..

Selamat Mencoba

Saran Dan Kritik Anda Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Tutorial Blog Ini...

No comments:

Post a Comment