[2.5] Tạo Hiệu Ứng Bông Tuyết Rơi!

Mình muốn tạo hiệu ứng cho các bông tuyết rơi trên trang Web thì phải làm thế nào vậy?
mấy Mem ai biết hướng dẫn giúp nhé!

 

C1. Vào file index.php của templates đang sử dụng chèn mã dưới vào
C2. Vào quản lý module, tạo một modules mới dạng custum HTML cho hiện thị ở đâu cũng được & chọn ẩn tiêu đề modules,Tại vùng soạn thảo nội dung của module, chuyển qua giao diện soạn thảo dạng HTML, chèn đoạn mã dưới & lưu lại!

HTML:

<SCRIPT type="text/javascript">
 
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35
 
// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
 
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")
 
// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"
 
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6
 
// Set the maximum-size of your snowflakes
var snowmaxsize=30
 
// Set the minimal-size of your snowflakes
var snowminsize=8
 
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
 
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
 
 
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
 
function randommaker(range) {
		rand=Math.floor(range*Math.random())
	return rand
}
 
function initsnow() {
		if (ie5 || opera) {
				marginbottom = document.body.scrollHeight
				marginright = document.body.clientWidth-15
		}
		else if (ns6) {
				marginbottom = document.body.scrollHeight
				marginright = window.innerWidth-15
		}
		var snowsizerange=snowmaxsize-snowminsize
		for (i=0;i<=snowmax;i++) {
				crds[i] = 0;
			lftrght[i] = Math.random()*15;
			x_mv[i] = 0.03 + Math.random()/10;
				snow[i]=document.getElementById("s"+i)
				snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
				snow[i].size=randommaker(snowsizerange)+snowminsize
				snow[i].style.fontSize=snow[i].size+'px';
				snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
				snow[i].style.zIndex=1000
				snow[i].sink=sinkspeed*snow[i].size/5
				if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
				if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
				if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
				if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
				snow[i].posy=randommaker(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 movesnow() {
		for (i=0;i<=snowmax;i++) {
				crds[i] += x_mv[i];
				snow[i].posy+=snow[i].sink
				snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[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*lftrght[i])){
						if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
						if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
						if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
						if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
						snow[i].posy=0
				}
		}
		var timer=setTimeout("movesnow()",50)
}
 
for (i=0;i<=snowmax;i++) {
		document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
		window.onload=initsnow
}
 
</SCRIPT>
 

 

thank tranngochien89 nhé! mình làm được rồi!

 

tranngoctrien89 ơi! mình muốn chỉnh cho cái hình hoa tuyết to hơn thì chỉnh đoạn nào trong phần code đó vậy?

 

Tại sao mình copy code vào HTML thì nó ko hiện ra gì hết

mình có past đoạn mã vào tem rồi

 

Chỗ snow.style.fontSize=snow.size+'px';
Bạn nghiên cứu đi, độ rộng của mấy bông tuyết được phát sinh ngẫu nhiên dựa vào số bông tuyết, nên muốn chỉnh hơn khó ah!

 

Bạn debug xem, có chạy được đoạn script đó chưa. Bạn thanhvuk01 nhúng được mà! Vấn đề là do web bạn chứ không phải đoạn script nhúng bông tuyết bị lỗi!

 

Bạn có thể teamview chỉ mình đc ko

[email protected]

THanks nhìu

 

Mình chỉnh được ròi! bạn có thế vào đây tham khảo nhé!
http://tinhoc.myaco.org/

 

bạn có thể chỉ mình đc ko

 

Nếu không được thì bạn có thể vào google search tìm với từ khóa "chèn tuyết rơi vào website" có rất nhiều huớng dẫn!
Mình bận lắm không có nhiều thời gian nên teamview được, thông cảm!

 

Vậy bạn cho mình hỏi nhúng doạn mã đó vào đâu cho đúng! cũng có thể tại mình chưa để đúng vị trí

 

Đó mã javascipt, bạn có thể nhúng vào đâu bất kỳ trên website của bạn! miễn sao nó thực thi được mã script đó thôi!

 

Thanks bạn

 

Chèn vào file index.php xong save vào là đc

 

Các bác cho em hỏi là muốn chuyển bông tuyết rơi thành hoa đào rơi thì làm thế nào ạ. Thanks!

 

Đổi hình bông tuyết thành hình hoa đào thui

 

Đổi thế nào hả bác, vì mới vọc nên nhờ cậy bác vậy. Thanks!

 

Mã:

var snowsrc = "assets/styles/img/snow.png";
// Configure below to change number of snow to render
var no = 100;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
 
///////////Stop Config//////////////////////////////////
 
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById && !document.all) ? 1 : 0;
 
function iecompattest() {
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
 
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
 
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
 
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc = (snowsrc.indexOf("dynamicdrive.com") != -1) ? "assets/styles/img/snow.png" : snowsrc
for (i = 0; i < no; ++i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random() * (doc_width - 50); // set position variables
yp[i] = Math.random() * doc_height;
am[i] = Math.random() * 20; // set amplitude variables
stx[i] = 0.02 + Math.random() / 10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up || ns6up) {
if (i == 0) {
document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" + snowsrc + "' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" + snowsrc + "' border=\"0\"><\/div>");
}
}
}
 
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height - 50) {
xp[i] = Math.random() * (doc_width - am[i] - 30);
yp[i] = 0;
stx[i] = 0.02 + Math.random() / 10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot" + i).style.top = yp[i] + "px";
document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
}
snowtimer = setTimeout("snowIE_NS6()", 10);
}
 
function hidesnow() {
if (window.snowtimer) clearTimeout(snowtimer)
for (i = 0; i < no; i++) document.getElementById("dot" + i).style.visibility = "hidden"
}
 
if (ie4up || ns6up) {
snowIE_NS6();
if (hidesnowtime > 0)
setTimeout("hidesnow()", hidesnowtime * 1000)
}

Bạn đổi: snow.png thành hoadao.png và tương tự là đổi hình bông tuyết thành hình hoa đào.
chúc bạn thành công

 

Đây, Script dành cho hoa mai rơi nè:

HTML:

<script type="text/javascript" src="http://chopho.vn/script/hoamai.js"></script>

Nếu muốn thì bạn down file đó và thư mục:

HTML:

	http://chopho.vn/script/hoamai/hoa7.gif
	http://chopho.vn/script/hoamai/hoa1.gif
	http://chopho.vn/script/hoamai/hoa2.gif
	http://chopho.vn/script/hoamai/hoa3.gif
	http://chopho.vn/script/hoamai/hoa4.gif
	http://chopho.vn/script/hoamai/hoa7.gif

Up vào thư mục hoamai (hoamai và hoamai.js ngang hàng nhau.)


Demo: http://savacotourist.com