Hallo teman-teman Dumet School. Ketemu lagi bersama saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript. Kalo teman-teman perhatikan pembahasan kali ini tidak jauh beda dengan pembahasan yang sebelumnya tentang membuat animasi emotion dan animasi battery charging di minggu sebelumnya. Perbedaannya hanya dalam pembahasan kali ini saya menggunakan nama class dalam javascript.

Oke langsung saja langkah pertama dalam Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript yaitu membuat struktur htmlnya seperti pada script di bawah ini.

Jika sudah selesai jangan lupa letakan link awesome di dalam tag head dan berikut linknya ya teman-teman.

Langkah selanjutnya kita masuk ke javacsript .

Teman-teman bisa perhatikan script di atas. Disini saya menggunakan dua interval dan timeout yang berbeda. Teman-teman bisa sesuaikan sesuai yang teman-teman inginkan. Teman-teman jang lupa mengganti semua script yang bentuknya kotak-kotak pada gambar di atas dengan script yang ada pada gambar di bawah ini.

Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript

Lalu langsung saja kita buat style cssnya. Disini saya akan membuat dua jenis ukuran bintang yang berbeda dan berikut cssnya ya teman-teman.

Oke jika sudah selesai langsung saja di simpan dengan format html. Dan jika teman-teman jalankan di browser masing-masing maka akan tampak seperti pada gambar di bawah ini.

Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript

Demikian artikel tentang cara Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript . Semoga bermanfaat dan selamat mencoba.

WhatsApp chat