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