Membuat efek salju pada halaman website dengan html5 dan javascript | Hallo kawan, Anda tentu pernah kan melihat salju. Walaupun di Indonesia tidak ada musim salju, tapi kita bisa melihat musim salju yang terjadi di negara lain seperti di Eropa, Amerika dan Jepang melalui televisi.
Jika dikaitkan dengan dunia website, maka efek animasi hujan salju itu asik juga jika diterapkan di website. Ini tentu akan bisa menambah asik tampilan website Anda. Apalagi jika website tersebut memang bertemakan salju.
Kita bisa membuat efek hujan salju tersebut dengan bantuan kanvas HTML5 dan javascript.
Cara membuat efek salju dengan HTML5 canvas dan Javascript
HTML
Pertama kita perlu untuk mempersiapkan canvas HTML. Untuk membuat file HTML5 pertama tentu harus menyertakan doctype khusus HTML, seperti berikut pada baris pertama file.
Selanjutnya kita buat kanvasnya seperti berikut, cukup satu baris saja dengan #ID kanvas bernama town.
CSS
Selanjutnya kanvas itu harus kita isi dengan sebuah gambar pemandangan atau gambar apapun yang Anda inginkan. Cara memasukannya yaitu dengan memberikan background-image pada canvas tersebut dan mengatur background-size nya menjadi cover agar gambar memenuhi canvas. Gunakan kode dibawah ini.
Untuk gambar bunga sakuranya bisa Anda download disini. Sedangkan pattern background bisa di download disini.
Javascript
Tampilan website sudah terlihat rapih dengan css, terdapat pula gambar pemandangan yang cukup indah dengan tambahan bunga sakura agar terlihat lebih asri.
Sekarang tinggal menambahkan efek salju agar tampilannya menjadi lebih ciamik. Tambahkan script javascript berikut di halaman HTML Anda. Script nya ditaruh di bagian bawah dokumen ya, tepatnya sebelum tag [/body].
Nah jika Anda sudah menuliskan semua script dan tahapannya dengan benar, maka Anda bisa melihat contoh demonya dibawah ini. Kalau tertarik ingin menggunakan bisa juga download scriptnya.
Efek salju diatas tentu akan lebih baik jika digunakan untuk website yang memang layak diberikan efek salju, misalnya ketika Anda ingin membuat website untuk memperingati datangnya musim salju, atau jika sebuah toko pakaian penghangat (jaket) ingin memberikan diskon pada musim salju, bisa juga ketika membuat webiste dengan tema jepang, website musim dingin dan lain sebagainya.
– Baca juga: 25 Alat Untuk Membuat Animasi Web CSS3, HTML5 & Javascript
Semoga berguna ya :)
tempat masukkan script nya dimana yea ?
Download saja, lalu bukan dan baca scriptnya untuk mengetahui dimana harus ditaruh.
minta ya datanya, terima kasih
itu maksudnya apa kog susah di mengerti