Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How to add a Falling Snow Javascript


Guest

Recommended Posts

Hello,

 

We are almost in Christmas and i would like my catalog page to have snow falling...

 

I would like to have a beautiful javascript snow, not that simple background efects...

 

Do you know where I can get it and what are the changes i have to do to the code?

 

Thanks for all you help

 

:thumbsup:

Link to comment
Share on other sites

Hello,

 

We are almost in Christmas and i would like my catalog page to have snow falling...

 

I would like to have a beautiful javascript snow, not that simple background efects...

 

Do you know where I can get it and what are the changes i have to do to the code?

 

Thanks for all you help

 

:thumbsup:

 

I already place one on my website. Thank you anyway

Link to comment
Share on other sites

Hi. Can you tell me how you did this please, as I would like to have the same effect on my site. Thanks.

 

I agree it is not the best idea, and it will slow the site down, but here is the code to do it, put it anywhere in between your body tags on index page

 

<script language="JavaScript1.2" type="text/javascript">
<!-- Begin
var no = 15; // snow number
var speed = 9; // smaller number moves the snow faster
var snowflake = "snowflake.gif";

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
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 (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
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 (ns4up) {					  // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
  }
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
  }
  }
}
function snowNS() {  // Netscape main animation function
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();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {  // IE main animation function
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();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>

 

then save this pic snowflake.gif to your own folder and upload snowflake.gif to your root folder where index is or make your own snowflake image.

"I must admit that I personally measure success in terms of the contributions an individual makes to her or his fellow human beings."

---Margaret Mead---

 

"The answer is never the answer. What's really interesting is the mystery. If you seek the mystery instead of the answer, you'll always be seeking. I've never seen anybody really find the answer -- they think they have, so they stop thinking. But the job is to seek mystery, evoke mystery, plant a garden in which strange plants grow and mysteries bloom. The need for mystery is greater than the need for an answer.

--Ken Kesey"

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...