Walaupun di dalam menampilkan gambar HTML sudah mendukung dengan file gambar bersifat gif, tetapi jika teman-teman seperti saya dimana laptop teman-teman belum terinstall sebuah software edit foto seperti Photoshop pasti bingung ingin membuat animasi gambar bergerak, sekarang tidak usah khawatir karena disini kita akan belajar cara membuat efek orang berjalan menggunakan javascript. jadi tanpa photoshop pun kita bisa, bagaimana cara membuatnya simak terus ya teman-teman.
Untuk cara membuat efek orang berjalan menggunakan javascript, saya harapkan teman-teman sudah paham dasar sebuah HTML, CSS dan Javascript. supaya memahami kodingan kita nanti, dan caranya nanti gambar yang kita tampilkan di website itu menggunakan CSS background ya, jadi bukan tag img src, karena apa, karena nanti kita akan bermain menggunakan background position, oiya karena contoh gambar bahanya seperti ini:
gambar ini saya ambil dari google, jika teman-teman lihat gambar itu ada 3 jenis dengan gaya yang berbeda, bisa dilihat, dan gambar itu kesamping, maka yang cocok adalah kita gunakan background-position-x ya, supaya berganti gambar yang di sampingnya, oke sudah paham ya.
dan cara untuk mengulangnya yang kita gunakan dalam javascript adalah kita mengguankan setInterval, dimana setInterval itu adalah mengulang terus menerus ya, berbeda dengan setTimeout. Supaya tambah paham silahkan teman-teman copy kode berikut, dan paste di lembar kerja teman-teman.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <title><strong>cara membuat efek orang berjalan menggunakan javascript</strong></title> <style type="text/css"> .background{ background: url(background.png) no-repeat; width: 400px; position: relative; width: 555px; height: 180px; background-size: cover; } .orang-lari { position: absolute; height: 260px; width: 105px; background: url(animasi_bergerak_javascript.jpg); background-size: 320px 320px; top: -79px; left: 228px; } </style> </head> <body> <h1><strong>cara membuat efek orang berjalan menggunakan javascript</strong></h1> <div class="background"> <div class="orang-lari" id="orang"></div> </div> <script type="text/javascript"> var x = 0; setInterval(function(){ x -= 110 if( x == -330){ x = 0; } document.getElementById('orang').style.backgroundPositionX = String(x) + "px"; }, 150); </script> </body> </html> |
bisa dilihat di setInterval saya memberikan posisi pertama = 0, dimana jika setInterval itu berjalan kita akan kurangin -110px, jadi pindah gambar sebelahnya sampai dengan maksimal, jadi 110px itu lebar dari 1 gaya, karena ada 3 jadi 330px, lebar keseluruhannya, jadi jika sudah 330px, maka akan kembali lagi ke 0px, bagaimana cukup simple bukan,dan hasil yang saya dapatkan seperti ini:
Seperti yang saya tulis pada paragraf pertama di karenakan laptop saya tidak terinstall photoshop jadi gambar orangnya masih ada background putihnya belum saya edit menjadi png, mungkin akan sangat cantik jika tidak ada background putihnya ya, jadi bagi teman-teman yang ingin mencoba silahkan teman-teman edit terlebih dahulu.
oke saya rasa cukup sampai disini belajar kita tentang cara membuat efek orang berjalan menggunakan javascript semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.