Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design.Di pembahasan sebelumnya saya membahas tentang cara Membuat Animasi Battery Charging dan kali ini saya akan membahas tentang cara Membuat Animasi Emotion Menggunakan Javascript. Pembahasannya hampir sama ya teman-teman, hanya saja ikonnya yang berbeda.

Oke langkah pertama untuk Membuat Animasi Emotion Menggunakan Javascript yaitu kita buat struktur htmlnya terlebih dahulu seperti pada script di bawah ini.

Jika suda selesai, teman-teman bisa memasukan link awesomenya di dalam tag head dan berikut linknya.

Langkah ketiga kita masuk ke javascript untuk membuat animasi emotion senyum . Berikut scriptnya ya teman-teman.

Seperti biasa yang gambar kotak-totak teman-teman ganti dengan script di bawah ini, sesuai urutan dari atas ya teman-teman.

Membuat Animasi Emotion Menggunakan Javascript

Dan terakhir kita berikan style cssnya dan letakan di dalam tag head dan berikut scriptnya.

Jika sudah selesai jangan lupa teman-teman simpan dengan format html. Dan jika dijalankan di browser masing-masing maka tampilannya akan tampak seperti pada gambar di bawah ini.

Membuat Animasi Emotion Menggunakan Javascript

Animasi ini berlangsung selama empat detik dan terus berulang. Dimana pada detik pertama menampilkan emotion senyum. Dan detik kedua ikon berubah dengan ikon baru yang menampilkan emotion datar. Kemudian lanjut ke detik ketiga dimana ikon berubah dengan menampilkan emotion sedih. Dan di detik ke empat ikon berubah menjadi ikon baru yang menampilkan emotion datar sama seperti pada detik ke dua dan terus berulang seperti itu. Bisa dilihat pada gambar di bawah ini ururtan emotionnya ya teman-teman.

Membuat Animasi Emotion Menggunakan Javascript

Demikian artikel tenatng cara Membuat Animasi Emotion Menggunakan Javascript. Sampai jumpa di pembahasan selanjutnya, semoga bermanfaat dan selamat mencoba ya teman-teman.