HTML 5, membuat sebuah background bergerak

Akhirnya sempat juga untuk mulai belajar HTML 5, disini saya akan berbagi script bagaimana cara untuk membuat sebuah gambar berjalan. Hasilnya sebagai berikut :)


Your browser do not support HTML5

Adapun cara pembuatannya sebagai berikut (disini hanya untuk gambar background yang bergerak saja, sedangkan untuk orang jalan itu menggunakan gambar gif ) :

  1. Buat sebuah file html
  2. Kopikan kode berikut ke dalam html, jangan lupa untuk memasukkan path image dengan benar. (* penjelasanya ada pada script di bawah ) :
    <canvas id="bgmove" height="300" width="600" style="border:#000000 2px solid">
    	Your browser do not support HTML5
    </canvas>
    </div>
    <script type="application/javascript">
    	myCanvas = document.getElementById("bgmove");
    	content = bgmove.getContext('2d');
    	gambar = new Image();
    	gambar.src = "http://blog.canisnfelis.com/wp-content/uploads/2012/09/ororor.jpg"; //disini merupakan path untuk image background yang bergerak
    
    	setInterval(movebg, 100);
    	var x = 0;
    	var v = -1;
    
    	function movebg() {
    		content.clearRect(0, 0, bgmove.width, bgmove.height);
    		x+=v;
    		if (x > 0 || x < -(gambar.width-bgmove.width)) v = -v;
    		content.drawImage(gambar,x,0);
    	}
    </script>
  3. Akses melalui Browser

Selamat mencoba !!!

With a lot of smile :) ~ adim_sikiji

4 Responses to HTML 5, membuat sebuah background bergerak

  1. ritsa says:

    so funny.. :)

  2. ipoenk23 says:

    keren dim, siip mkasih ilmunya

Leave a Reply

Your email address will not be published. Required fields are marked *


− 5 = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>