Pada posting sebelumnya saya share 'Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Efek Hujan Salju Pada Dokumen HTML'.
Efek Hujan Salju merupakan sebuah efek yang mirip dengan hujan salju yang dapat mempercantik dan memberi kesan yang berbeda pada dokumen html yang kita buat. Dengan menambahkan javascript pada dokumen html maka dokumen yang kita buat pun dapat seketika terlihat lebih menarik dengan adanya Efek Hujan Salju ini.
Baiklah berikut ini cara membuat Efek Hujan Salju pada sebuah dokumen HTML.
Langkah-langkah:
Cara Membuat Efek Hujan Salju Pada Dokumen HTML:
- Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.
- Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.
- Sekarang mari kita mulai untuk membuat Hujan Salju pada dokumen HTML seperti pada kotak di bawah ini.
- Sisipkan kode '<script src='js/snowstorm.js' type='text/javascript'></script>' tepat di atas kode </head> seperti pada contoh di atas.
- Ganti js/snowstorm.js sesuai dengan Url javascript efek hujan salju Anda. (Sudah disertakan di dalam file download di bawah).
- Silahkan download contoh cara membuat Efek Hujan Salju dalam bentuk file HTML dengan cara klik Link 'Download Example Here' Di bawah ini.
Script Code:
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Efek Hujan Salju Pada Dokumen HTML </title>
<script src='js/snowstorm.js' type='text/javascript'></script>
</head>
<body>
</body>
</html>
<html>
<head>
<title> Cara Membuat Efek Hujan Salju Pada Dokumen HTML </title>
<script src='js/snowstorm.js' type='text/javascript'></script>
</head>
<body>
</body>
</html>
Ilustrasi Efek Hujan Salju:
Keterangan
Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!
0 Comments
