3 Langkah Mudah Membuat Animasi Pac-Man Dengan CSS3

Membuat animasi dengan aplikasi tertentu memang sudah umum. Tapi pernahkah Anda membuat animasi menggunakan style CSS?

Artikel ini memuat cara pembuatan animasi Pac-Man menggunakan sedikit kode HTML dan style CSS3 serta aplikasi Notepad. Cara pembuatannya hanya membutuhkan tiga langkah yang mudah untuk dipraktekkan. Berikut tiga langkah mudah tersebut:

Membuat kode HTML
Hal pertama yang diperlukan untuk membuat animasi ini adalah sebuah tautan (link) untuk memanggil file CSS dan dua elemen div dalam sebuah file HTML. Elemen div yang pertama akan digunakan untuk membuat wajah Pac-Man, sedangkan elemen div yang kedua untuk memberi mata.

Buka Notepad, lalu copy-paste kode berikut:
```
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="pacman">
        <div id="mata"></div>
    </div>
</body>
</html>
```
Perhatikan bahwa elemen div yang pertama dinamai pacman, sedangkan elemen div yang kedua dinamai mata. Div #pacman akan digunakan untuk membuat wajah Pac-Man, sedangkan div #mata untuk menambahkan mata pada Pac-Man yang kita buat. Simpan file dan beri nama pacman.html

Pastikan Anda memilih All Files (*) pada pilihan Save as type di Notepad. Jika tidak, file yang Anda buat akan menjadi file Text (.txt), bukan HTML.

Pilih All Files (*) pada pilihan Save as type
Desain obyek dengan CSS
Setelah membuat file HTML, kini kita akan membuat file stylesheet CSS untuk membuat obyek wajah dan mata Pac-Man. Buka dokumen Notepad baru, lalu simpan dengan nama style.css. Sekali lagi, pastikan Anda memilih All Files (*) pada pilihan Save as type ketika menyimpan di Notepad (lihat gambar diatas).
- Membuat wajah Pac-Man dimulai dari mengatur ukuran pada div #pacman dengan lebar 0 piksel dan tinggi 0 piksel. Ini digunakan untuk menghilangkan bentuk yang akan dibuat. Selanjutnya, tambahkan garis tepi (border) setebal 80 piksel dengan pengaturan warna sebagai berikut: garis tepi atas: orange; garis tepi kanan: transparent (tidak terlihat); garis tepi bawah: orange; garis tepi kiri: orange.
  Tulis blok style CSS berikut pada file style.css:
```
div#pacman {
    border-color: orange transparent orange orange;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-style: solid;
    border-width: 80px;
    height: 0;
    position: relative;
    width: 0;	
}
```
- Membuat mata Pac-Man
  Pada bagian ini hanya diperlukan sebuah elemen div yang lebar dan tingginya 15 piksel dengan warna oranye gelap (kode RGB: #B35900). Elemen div tersebut akan tampak seperti lingkaran didalam div wajah Pac-Man (#pacman).
  Tambahkan blok style CSS berikut pada file style.css, dibawah blok style div#pacman:
```
div#mata {
    background: #B35900;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    bottom: 60px;
    height: 15px;
    position: relative;
    width: 15px;
    z-index: 100;
}
```
  Penggunaan z-index disini dimaksudkan untuk menampakkan posisi lebih awal daripada div sebelumnya.

Tambahkan style CSS3 untuk menjalankan Pac-Man
Kita akan menggunakan properti animation dan rule @keyframes untuk menambahkan animasi pada obyek Pac-Man yang kita buat.

Properti animation berfungsi untuk menambahkan animasi pada Pac-Man. Pada pembuatan animasi Pac-Man yang kita buat, properti animation ditulis didalam blok style div wajah Pac-Man, yakni div#pacman:

div#pacman {
	border-color: orange transparent orange orange;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	border-style: solid;
	border-width: 80px;
	height: 0;
	position: relative;
	width: 0;	

	animation: animasi-pacman 6s infinite;
	-moz-animation: animasi-pacman 6s infinite;
	-webkit-animation: animasi-pacman 6s infinite;
	-o-animation: animasi-pacman 6s infinite;

}

Perhatikan baris ke-13 hingga baris ke-16, dimana properti animation ditambahkan dalam blok div#pacman.

Rule @keyframes digunakan untuk mengatur bagaimana Pac-Man akan dijalankan. Tanpa @keyframes, Pac-Man yang kita buat hanya akan berdiam diri di pojok kiri halaman. Penulisan @keyframes harus diikuti dengan nama animasi (disini kita akan menggunakan nama animasi-pacman). Jika Anda masih awam mengenai @keyframes, ada baiknya Anda membaca CSS3 @keyframes rule terlebih dahulu.

Tambahkan blok style CSS3 berikut pada file style.css, dibawah blok style div#mata:

@keyframes animasi-pacman {
    0%		{ top: 20px; left: 50px; border-color: orange transparent orange orange; }
    5%		{ top: 20px; left: 50px; border-color: orange transparent orange orange; }
    10%		{ top: 20px; left: 100px; border-color: orange; }
    15%		{ top: 20px; left: 150px; border-color: orange transparent orange orange; }
    20%		{ top: 20px; left: 200px; border-color: orange; }
    25%		{ top: 20px; left: 250px; border-color: orange transparent orange orange; }
    30%		{ top: 20px; left: 300px; transform: rotate(0deg); border-color: orange; }
    40%		{ top: 70px; left: 300px; transform: rotate(90deg); border-color: orange transparent orange orange; }
    45%		{ top: 120px; left: 300px; border-color: orange; }
    50%		{ top: 170px; left: 300px; border-color: orange transparent orange orange; }
    55%		{ top: 220px; left: 300px; transform: rotate(90deg); border-color: orange; }
    65%		{ top: 220px; left: 350px; transform: rotate(0deg); border-color: orange transparent orange orange; }
    70%		{ top: 220px; left: 400px; border-color: orange; }
    75%		{ top: 220px; left: 450px; border-color: orange transparent orange orange; }
    80%		{ top: 220px; left: 500px; border-color: orange; }
    85%		{ top: 220px; left: 550px; border-color: orange transparent orange orange; }
    90%		{ top: 220px; left: 600px; border-color: orange; }
    95%		{ top: 220px; left: 650px; border-color: orange transparent orange orange; }
    100%	{ top: 220px; left: 700px; transform: rotate(0deg); border-color: orange; }
}

Blok CSS3 diatas digunakan untuk menjalankan Pac-Man dari sisi kiri atas kearah tengah atas, kemudian berputar sekaligus turun. Setelah turun, Pac-Man akan bergerak ke arah kanan.

Simpan file dalam folder yang sama, kemudian buka pacman.html di browser untuk melihat hasilnya.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="pacman">
        <div id="mata"></div>
    </div>
</body>
</html>

/**
 * PacMan 0.1
 * 
 * Dibuat oleh: Agil Tri ST
 * Facebook   : www.facebook.com/agil772
 *
 **/

 div#pacman {
	border-color: orange transparent orange orange;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	border-style: solid;
	border-width: 80px;
	height: 0;
	position: relative;
	width: 0;	

	animation: animasi-pacman 6s infinite;
	-moz-animation: animasi-pacman 6s infinite;
	-webkit-animation: animasi-pacman 6s infinite;
	-o-animation: animasi-pacman 6s infinite;

}
div#mata {
    background: #B35900;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    bottom: 60px;
    height: 15px;
    position: relative;
    width: 15px;
    z-index: 100;
}
@keyframes animasi-pacman {
    0%		{ top: 20px; left: 50px; border-color: orange transparent orange orange; }
    5%		{ top: 20px; left: 50px; border-color: orange transparent orange orange; }
    10%		{ top: 20px; left: 100px; border-color: orange; }
    15%		{ top: 20px; left: 150px; border-color: orange transparent orange orange; }
    20%		{ top: 20px; left: 200px; border-color: orange; }
    25%		{ top: 20px; left: 250px; border-color: orange transparent orange orange; }
    30%		{ top: 20px; left: 300px; transform: rotate(0deg); border-color: orange; }
    40%		{ top: 70px; left: 300px; transform: rotate(90deg); border-color: orange transparent orange orange; }
    45%		{ top: 120px; left: 300px; border-color: orange; }
    50%		{ top: 170px; left: 300px; border-color: orange transparent orange orange; }
    55%		{ top: 220px; left: 300px; transform: rotate(90deg); border-color: orange; }
    65%		{ top: 220px; left: 350px; transform: rotate(0deg); border-color: orange transparent orange orange; }
    70%		{ top: 220px; left: 400px; border-color: orange; }
    75%		{ top: 220px; left: 450px; border-color: orange transparent orange orange; }
    80%		{ top: 220px; left: 500px; border-color: orange; }
    85%		{ top: 220px; left: 550px; border-color: orange transparent orange orange; }
    90%		{ top: 220px; left: 600px; border-color: orange; }
    95%		{ top: 220px; left: 650px; border-color: orange transparent orange orange; }
    100%	{ top: 220px; left: 700px; transform: rotate(0deg); border-color: orange; }
}

[wpfilebase tag=file id=4 tpl=download-button /]

Catatan : Animasi hanya dapat dijalankan pada browser Mozilla Firefox, Chrome, Opera.

Referensi :

(agl)

Leave a Reply Cancel reply