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.

efek salju html5

 

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.

<!DOCTYPE html>

Selanjutnya kita buat kanvasnya seperti berikut, cukup satu baris saja dengan #ID kanvas bernama town.

<canvas id="town" width="640" height="450"></canvas>

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.

body {
  background: url(img/pattern.png);
  min-height: 100vh;
  margin-top: 3rem;
  font-family: 'Poiret One', cursive;
}
.header{
  text-align: center;
}
.header h1{
  font-size: 24px;
  color: #ffffff;
}
.header p{
  color: #ddd;
}
.header p a{
  color: #fff;
}
canvas {
  box-sizing: border-box;
  background-image: url(img/sakura.jpg);
  background-size: cover;
  border: 20px solid #111;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  box-shadow: 0px 0px 50px 1000px rgba(0,0,0,0.3);
}

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].

var canvas = document.getElementById("town"),
ctx = canvas.getContext("2d"),
W = canvas.width,
H = canvas.height,
maxParticles = 25,
maxParticleSize = 8,
minParticleSize = 2,
maxMove = 1,
angle = 0,
particles = [];
	for (var i = 0; i < maxParticles; i++) {
		particles.push({
			x: Math.random() * W, 
			y: Math.random() * H, 
			wh: Math.random() * maxParticleSize + minParticleSize
		})
	}
	
function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.beginPath();
		for (var i = 0; i < maxParticles; i++) {
			var p = particles[i];
			ctx.moveTo(p.x, p.y);
      ctx.rect(p.x, p.y, p.wh, p.wh);
      var radgrad = ctx.createRadialGradient(p.x + p.wh/2,p.y + p.wh/2,0,p.x + p.wh/2,p.y + p.wh/2,p.wh/2);
  radgrad.addColorStop(0, 'rgba(255, 255, 255, 1)');
  radgrad.addColorStop(0.5, 'rgba(255, 255, 255, .8)');
  radgrad.addColorStop(1, 'rgba(255,255,255,0)');
      ctx.fillStyle = radgrad;
      ctx.fill();
		}
		update();
	}
	
	function update() {
		angle += 0.01;
		for (var i = 0; i < maxParticles; i++) {
			var p = particles[i];
			p.y += Math.cos(angle) + p.wh/4;
			p.x += Math.sin(angle) * 2;
			if (p.x > W+maxMove || p.x < -maxMove || p.y > H) {
				if (i%3 > 0) {
					particles[i] = {x: Math.random() * W, y: -(maxMove), wh: p.wh };
				} else {
					if (Math.sin(angle) > 0) {
						particles[i] = {x: -maxMove, y: Math.random()*H, wh: p.wh };
					} else {
						particles[i] = {x: W+maxMove, y: Math.random()*H, wh: p.wh };
					}
				}
			}
		}
  requestAnimationFrame(draw);
	}
draw();

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.

DEMO | DOWNLOAD

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 :)

 

Artikel Lain:

tabel responsiveCara Membuat Tabel Responsive Dengan CSS dan HTML background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery bootstrap vs foundationBootstrap digunakan Developer, Foundation oleh Designer kata tim Zurb PSD to HTML CSS16 Video Tutorial Konversi PSD ke HTML dan CSS convert psd to html10 Tutorial Cara Slicing PSD ke HTML dan CSS web design25 Alat Untuk Membuat Animasi Web CSS3, HTML5 & Javascript responsive menu1001 Tutorial dan Contoh Menu Responsive Dengan CSS, Js & Jquery material design framework19 Framework Untuk Membuat Web Material Design Responsive video ditengah layar dengan cssVideo Responsive Ditengah Frame Layar Monitor dengan CSS kunci konten website jqueryKunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool google maps embed codeCara Mendapatkan Kode Embed Google Maps flexbox20 Video Tutorial Belajar Flexbox CSS3 Untuk Desain Website