Code tạo hiệu ứng tuyết rơi cho mùa Noel với hướng dẫn chi tiết

  Source Code   54 Lượt xem   0 Bình luận  

Một mùa giáng sinh đang đến gần, bạn là một lập trình viên hay đơn giản chỉ là một blog-er cần trang trí chút gì đó cho web của mình có không khi của mùa noel chứ? Hôm nay chúng ta sẽ cùng tạo hiệu ứng tuyết rơi trên chính website của mình để tô điểm cho mùa noel thêm lung linh nhé.

Với hiệu ứng tuyết rơi này sẽ không gây ảnh hưởng nhiều đến web của bạn đâu vì code rất nhẹ và hiệu ứng không quá nhiều nên cũng không gây lag cho các trình duyệt khi truy cập. Nếu bạn muốn nó đẹp hơn thì hãy cân nhắc đến tốc độ trãi nghiệm người dùng trên web của mình vì càng nhiều hiệu ứng thị tốc độ tải càng chậm và gây giật lag đó.

Để tạo hiệu ứng tuyết rồi bạn hãy tải code snow.js về hoặc copy source bên dưới

/*!
// Snow.js - v0.0.3
// kurisubrooks.com
*/

// Amount of Snowflakes (Số lượng hạt tuyết)
var snowMax = 35;

// Snowflake Colours (Màu tuyết ngẫu nhiên trong mảng)
var snowColor = ["#DDD", "#EEE"];

// Snow Entity (Kí tự đặc biệt tạo ra hạt tuyết)
var snowEntity = "•";

// Falling Velocity (Tốc độ rơi)
var snowSpeed = 0.75;

// Minimum Flake Size (Size hạt nhỏ nhất)
var snowMinSize = 8;

// Maximum Flake Size (Size hạt to nhất)
var snowMaxSize = 24;

// Refresh Rate (in milliseconds)(làm mới)
var snowRefresh = 50;

// Additional Styles
var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";

/*
// End of Configuration
// ----------------------------------------
// Do not modify the code below this line
*/

var snow = [],
	pos = [],
	coords = [],
	lefr = [],
	marginBottom,
	marginRight;

function randomise(range) {
	rand = Math.floor(range * Math.random());
	return rand;
}

function initSnow() {
	var snowSize = snowMaxSize - snowMinSize;
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;

	for (i = 0; i <= snowMax; i++) {
		coords[i] = 0;
		lefr[i] = Math.random() * 15;
		pos[i] = 0.03 + Math.random() / 10;
		snow[i] = document.getElementById("flake" + i);
		snow[i].style.fontFamily = "inherit";
		snow[i].size = randomise(snowSize) + snowMinSize;
		snow[i].style.fontSize = snow[i].size + "px";
		snow[i].style.color = snowColor[randomise(snowColor.length)];
		snow[i].style.zIndex = 1000;
		snow[i].sink = snowSpeed * snow[i].size / 5;
		snow[i].posX = randomise(marginRight - snow[i].size);
		snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
		snow[i].style.left = snow[i].posX + "px";
		snow[i].style.top = snow[i].posY + "px";
	}

	moveSnow();
}

function resize() {
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;
}

function moveSnow() {
	for (i = 0; i <= snowMax; i++) {
		coords[i] += pos[i];
		snow[i].posY += snow[i].sink;
		snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
		snow[i].style.top = snow[i].posY + "px";

		if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
			snow[i].posX = randomise(marginRight - snow[i].size);
			snow[i].posY = 0;
		}
	}

	setTimeout("moveSnow()", snowRefresh);
}

for (i = 0; i <= snowMax; i++) {
	document.write("" + snowEntity + "");
}

window.addEventListener('resize', resize);
window.addEventListener('load', initSnow);

 

Bạn có thể dán trực tiếp code này vào trang web hoặc lưu vào file js và chèn vào. Sau khi thực hiện hãy  tải lại trang web và chiêm ngưỡng nhé.


Cảm ơn bạn đã quan tâm!

BÀI VIẾT LIÊN QUAN
0 BÌNH LUẬN

Chưa có bình luận, hãy là người bình luận đầu tiên

Vui lòng thực hiện đăng nhập để bình luận.