Cara Membuat Gambar Berjalan Dengan Jquery dan Css3

Membuat gambar animasi dengan Jquery dan Css3 mungkin sudah tidak asing lagi bagi temen-temen dan pada saat ini saya akan mempostingkan bagaimana cara membuat Gambar Berjalan Dengan Jquery dan Css3
Inilah langkah-langkahnya:
1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4.  Selanjutnya cari kode ]]></b:skin>
 Jika kode sudah ketemu masukkan kode dibawah ini di dalam kotak

#photos,#mulai,#stop { background: -moz-linear-gradient(top, #2F2727, #1a82f7); -webkit-box-shadow: 0px 5px 10px #000; -moz-box-shadow: 0px 5px 10px #000,0px 10px 20px #000; -moz-border-radius:10px; -webkit-border-radius:10px; } #mulai:active,#stop:active{ background: -moz-linear-gradient(bottom, #2F2727, #1a82f7); } #photos { background:url(Masukan-url-gambar:fungsi-gambar-yg-muncul)no-repeat center; margin:3px; width:448px; height:218px; position:relative; left:0px; top:10px; display:none; } #photos.photohover{ background:url(masukan-url-gambar:fungsi-gambar-aktif-kembali)no-repeat center; } #mulai { cursor:pointer; text-shadow:0px 1px 2px #000; color:#bbb; font-size:15px; margin-bottom:10px; padding:8px;width:20%; } #stop { cursor:pointer; text-shadow:0px 1px 2px #000; color:#bbb; font-size:15px; padding:8px;width:20%; }

Kemudian Cari Kode Letakkan Kode di bawah ini Tepat di atas kode

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $("#mulai").click(function () {$("#photos").show("slow");$("#photos").animate({left:'+=900'},5000);$("#photos").queue(function (){$(this).addClass("photohover");$(this).dequeue();});$("#photos").animate({left:'-=900'},1500);$("#photos").queue(function (){$(this).removeClass("photohover");$(this).dequeue();});$("#photos").slideUp(); });$("#stop").click(function () {$("#photos").clearQueue();$("#photos").stop(); }); </script>

Dan ini kode Html untuk memanggilnya masukan di bagian Edit HTML

<div id="wrap"> <div id="mulai">Mulai !</div> <div id="stop">Berhenti !</div> <div id="photos"></div></div>

Selesai....

Artikel terkait :