/    Sign up×
Community /Pin to ProfileBookmark

Snow effect

Copy linkTweet thisAlerts:
Nov 10.2003

Erm im new at this so…

How do create a button so that wen u click on it it loads up a background effect suh as snow…and wen u click it again it gets rid of the snow…

Thanx in advance for ya help…

to post a comment
JavaScript

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@GollumNov 10.2003 — Animated background effects like the one you mention are often done using scheduled timer events. The 'Effect' code itterates by moving a number of small images over the screen and then scheduling another event in a small period of time (say 50ms or so) to run the next itteration.

I'm guessing you already have a script that does the snow effect. To make it switchable, all you need to do is find the piece of code that schedules the next itteration and put your own switch just before the call to setTimeout("someFunc();",some ms);

You may also want to loop through all the images and make them invisible too.
Copy linkTweet thisAlerts:
@clairec666Nov 10.2003 — I'm not sure about the snow bit, but say you had two different background colours you wanted to toggle between

Insert this in the head section of your page:

<script type="text/javascript">


function change_background(toggle) {

if(toggle == 1) {

document.bgColor = #000000;

}

if(toggle == 2) {

document.bgColor = #FFFFFF;

}

}

</script>

and this part in the body section:

<form name="f">

<input type="button" name="btn1" value="on" onclick="change_background(1)">

<input type="button" name="btn2" value="off" onclick="change_background(2)">

</form>

Does that work okay? I can also show you how to toggle between two background pictures, if that is more useful
Copy linkTweet thisAlerts:
@j_sanauthorNov 10.2003 — Yeh thanx guys this is the code for the snow but i dnt have a clue where to put it or how to make as im not familiar with javascript but i do know where to put it in the html document...

//Configure below to change URL path to the snow image

var snowsrc="snow.gif"

// Configure below to change number of snow to render

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var ns6up = (document.getElementById&&!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||ns6up) {

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" top="15" visibility="show"><a href="http://dynamicdrive.com/"><img src='"+snowsrc+"' border="0"></a></layer>");

} else {

document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src='"+snowsrc+"' border="0"></layer>");

}

} else 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 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()", 10);

}



function snowIE_NS6() { // IE and NS6 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 = ns6up?window.innerWidth : document.body.clientWidth;

doc_height = ns6up?window.innerHeight : document.body.clientHeight;

}

dx[i] += stx[i];

if (ie4up){

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

else if (ns6up){

document.getElementById("dot"+i).style.top=yp[i];

document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);

}


}

setTimeout("snowIE_NS6()", 10);

}



if (ns4up) {

snowNS();

} else if (ie4up||ns6up) {

snowIE_NS6();

}



</script>
Copy linkTweet thisAlerts:
@j_sanauthorNov 11.2003 — anyone??
Copy linkTweet thisAlerts:
@clairec666Nov 11.2003 — Sorry, I was a little slow but I hope you're still out there somewhere :rolleyes: so you can read this.............

<html>

<head>

<script type="text/javascript">

//Configure below to change URL path to the snow image

var snowsrc="snow.gif"

// Configure below to change number of snow to render

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var ns6up = (document.getElementById&&!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||ns6up) {

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" top="15" visibility="show"><a href="http://dynamicdrive.com/"><img src='"+snowsrc+"' border="0"></a></layer>");

} else {

document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src='"+snowsrc+"' border="0"></layer>");

}

} else 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 start_snow() {

if (ns4up) {

snowNS();

} else if (ie4up||ns6up) {

snowIE_NS6();

}

}



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()", 10);

}



function snowIE_NS6() { // IE and NS6 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 = ns6up?window.innerWidth : document.body.clientWidth;

doc_height = ns6up?window.innerHeight : document.body.clientHeight;

}

dx[i] += stx[i];

if (ie4up){

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

else if (ns6up){

document.getElementById("dot"+i).style.top=yp[i];

document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);

}

}

setTimeout("snowIE_NS6()", 10);

}



</script>

</head>

<body>

<form name="f">

<input type="button" value="Start snow" onclick="start_snow()">

<input type="button" value="Stop snow" onclick="stop_snow()">

</form>

</body>

</html>



There is one part I haven't finished in that script, and that is the "stopsnow" function, so clicking on the stop button will bring up an error.



If somebody else could help out here, I can't remember how to do the "cleartimeout" thing properly, so if anyone else knows how to do it, please post it here ?
Copy linkTweet thisAlerts:
@j_sanauthorNov 11.2003 — Hey thanx claire....does anyone no how to do the "cleartimeout" thing??
Copy linkTweet thisAlerts:
@ScriptageNov 12.2003 — var time = setTimout("somefunction()", 1000);

clearTimeout(time);
Copy linkTweet thisAlerts:
@j_sanauthorNov 12.2003 — so where do i out that code scriptage??
Copy linkTweet thisAlerts:
@j_sanauthorNov 12.2003 — i meant put*
Copy linkTweet thisAlerts:
@ScriptageNov 12.2003 — at the line setTimeout("snowIE_NS6()", 10);

var timer = setTimeout("snowIE_NS6()", 10);

where you want to stop the timeout

clearTimeout(timer);
Copy linkTweet thisAlerts:
@j_sanauthorNov 13.2003 — so wot shud the code look like if i insert the "var timer=" bit...sorry im a bit slow....

oh and sorry the actual working code for the snow effect is:

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">

<!-- Begin

var no = 50; // snow number

var speed = 0.5; // smaller number moves the snow faster

var snowflake = "http://freewarejava.com/snow.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+1000); // 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=&#092;"dot"+ i +"&#092;" left=&#092;"15&#092;" ");

document.write("top=&#092;"15&#092;" visibility=&#092;"show&#092;"><img src=&#092;"");

document.write(snowflake + "&#092;" border=&#092;"0&#092;"></layer>");

} else {

document.write("<layer name=&#092;"dot"+ i +"&#092;" left=&#092;"15&#092;" ");

document.write("top=&#092;"15&#092;" visibility=&#092;"show&#092;"><img src=&#092;"");

document.write(snowflake + "&#092;" border=&#092;"0&#092;"></layer>");

}

} else if (ie4up) {

if (i == 0) {

document.write("<div id=&#092;"dot"+ i +"&#092;" style=&#092;"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;&#092;"><img src=&#092;"");

document.write(snowflake + "&#092;" border=&#092;"0&#092;"></div>");

} else {

document.write("<div id=&#092;"dot"+ i +"&#092;" style=&#092;"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;&#092;"><img src=&#092;"");

document.write(snowflake + "&#092;" border=&#092;"0&#092;"></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+1000) {

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>



</BODY>



erm scriptage can u edit this code for me.....thanx agen
Copy linkTweet thisAlerts:
@j_sanauthorNov 14.2003 — bump
Copy linkTweet thisAlerts:
@ScriptageNov 16.2003 — yo been a bit busy...

after what event do you want to clear the timeout?
Copy linkTweet thisAlerts:
@j_sanauthorNov 17.2003 — well i want a continuous loop for the snow so after sum1 presses the "start" snow button the snow will start falling....

And i want the snow to stop after the "stop" button is pressed...

thanx
×

Success!

Help @j_san spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...