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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Membuat Animasi Bintang Kedip-Kedip menggunakan Javascript</title> </head> <body> <div class="container"> <h1>Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript</h1> <div class="div1 fa satu"></div> <div class="div2 fa dua"></div> <div class="div1 fa tiga"></div> <div class="div2 fa empat"></div> <div class="div1 fa lima"></div> <div class="div2 fa enam"></div> <div class="div1 fa tujuh"></div> <div class="div2 fa delapan"></div> </div> </body> </html> |
Jika sudah selesai jangan lupa letakan link awesome di dalam tag head dan berikut linknya ya teman-teman.
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Langkah selanjutnya kita masuk ke javacsript .
|
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 |
<script> function ratestar() { var a = document.getElementsByClassName("div1"); a[0].innerHTML = ""; a[1].innerHTML = ""; a[2].innerHTML = ""; a[3].innerHTML = ""; setTimeout(function () { a[0].innerHTML = ""; a[1].innerHTML = ""; a[2].innerHTML = ""; a[3].innerHTML = ""; }, 500); } ratestar(); setInterval(ratestar, 1000); function ratestar2() { var a = document.getElementsByClassName("div2"); a[0].innerHTML = ""; a[1].innerHTML = ""; a[2].innerHTML = ""; a[3].innerHTML = ""; setTimeout(function () { a[0].innerHTML = ""; a[1].innerHTML = ""; a[2].innerHTML = ""; a[3].innerHTML = ""; }, 1000); } ratestar2(); setInterval(ratestar2, 2000); </script> |
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.
Lalu langsung saja kita buat style cssnya. Disini saya akan membuat dua jenis ukuran bintang yang berbeda dan berikut cssnya ya 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<style> .container{ background-color: black; width: 400px; margin: auto; padding: 20px; position: relative; height: 300px; } h1{ color: white; text-align: center; font-size: 20px; } .div1 { font-size:30px !important; color: white; } .div2 { color: white; } .satu{ position: absolute; top:100px; left:10px; } .dua{ position: absolute; top:200px; left:100px; } .tiga{ position: absolute; bottom:30px; left:52px; } .empat{ position: absolute; top:175px; left:300px; } .lima{ position: absolute; top:138px; left:200px; } .enam{ position: absolute; bottom:50px; left:200px; } .tujuh{ position: absolute; bottom:20px; right:50px; } .delapan{ position: absolute; top:100px; right:50px; } </style> |
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.
Demikian artikel tentang cara Membuat Animasi Bintang Kedip-Kedip Menggunakan Javascript . Semoga bermanfaat dan selamat mencoba.