Những hiệu ứng cho website mùa giáng sinh

Mùa giáng sinh (Christmas) sắp đến thì các webmasters đều mong muốn website của mình sẽ sinh động hơn trong ngày lễ đặc biệt này. xTraffic.pep.vn sẽ giới thiệu đến các bạn những hệiu ứng tốt nhất cho website của bạn trong mùa giáng sinh.

Những hiệu ứng cho website mùa giáng sinh - Christmas giáng sinh hiệu ứng cho website - Webmasters Tools Phát triển website

Hiệu ứng tuyết rơi bằng Javascript (Demo)

Đây là hiệu ứng tạo những bông tuyết ngẫu nhiên rơi xuống theo độ dài của trang. Hiệu ứng này chạy bằng javascript và bạn có thể sử dụng bằng cách thêm đoạn mã sau vào trang html của bạn :

<script type="text/javascript" language="javascript">
setTimeout(function() {
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//static.pep.vn/library/pepvn/blog-xtraffic/effects/snow-effect/main.min.js";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'blog-xtraffic-snow-effect'));
}, 200);
</script>

Hiệu ứng bão tuyết bằng Javascript (Demo)

Hiệu ứng này cũng tạo ra những bông tuyết ngẫu nhiên rơi trong website của bạn, tuy nhiên hiệu ứng này đẹp mắt hơn hiệu ứng bên trên. Hiệu ứng bão tuyết này cũng sử dụng mã javascript và bạn có thể sử dụng bằng cách thêm đoạn mã sau vào trang html của bạn :

<script type="text/javascript" language="javascript">
window.snowStormConfigs = {
	'snowColor' : '#fff'		//Thay đổi màu sắc của bông tuyết tại đây
	,'snowCharacter' : '&bull;'	//Thay đổi hình dạng của bông tuyết tại đây
}
setTimeout(function() {
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//static.pep.vn/library/pepvn/blog-xtraffic/effects/snow-storm/main.min.js";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'blog-xtraffic-snow-storm'));
}, 100);
</script>

Hiệu ứng hình động (animation) tuyết rơi với cây thông và người tuyết

Demo (xem bên dưới hoặc xem tại đây) :

Để sử dụng hiệu ứng này, bạn cần thực hiện 2 bước sau :

Bước 1 : Thêm tag div sau tại nơi bạn muốn thể hiện hiệu ứng (ví dụ mục header) :

<div id="christmas-tree-snowman-animated"></div>

Bước 2 : Thêm đoạn mã Javascript sau ngay phía trước thẻ “</body>”

<script type="text/javascript" language="javascript">
setTimeout(function() {
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//static.pep.vn/library/pepvn/blog-xtraffic/effects/christmas-tree-snowman-animated-header/main.min.js";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'blog-xtraffic-christmas-tree-snowman-animated-header-js'));
}, 200);
</script>

Leave a Comment