PDA

View Full Version : falling snow code



JoAngus
10-27-2005, 03:00 PM
Hi all,
I've just joined today, basically 'cos I've got a big Q, I'll get working on my profile and introduce myself properly in a little while, in the meantime can anyone help me with this... It's not urgent, I'd just like to know how.

I've downloaded the 'falling snow' code from this site and changed the snow to ghosts for halloween. How can I get the ghosts to come up from the bottom not fall from the top. If it makes more sense you can see what I mean here - http://www.999graffix.co.uk/halloween.html

Any ideas, I know it's too late for this halloween really, but I'd like to know for future ref.

Jo

Wizard13335
10-29-2005, 03:53 AM
That isn't PHP script. It belongs in the JavaScript section.

jscheuer1
10-30-2005, 07:48 AM
Falling snow isn't a very good script in my opinion. Some time ago, I adapted the following script from the falling leaves script, to fall up. Just now I've tweaked it a bit more just to make it work a bit better cross browser. Put it in the body of the page, good for FF, IE and Opera:


<script type="text/javascript">
<!--

//Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
//Modified by Dynamic Drive for NS6 functionality
//visit http://www.dynamicdrive.com for this script
//Modified by jscheuer1 in http://www.dynamicdrive.com/forums
//to fall up, add doctype compatibility & account for
//differences in speeds among browsers

var speed=60 // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="bubble.gif";
Image1=new Image();
Image1.src=grphcs[1]="bubble.gif"
Image2=new Image();
Image2.src=grphcs[2]="bubble.gif"
Image3=new Image();
Image3.src=grphcs[3]="bubble.gif"
Image4=new Image();
Image4.src=grphcs[4]="bubble.gif"
Image5=new Image();
Image5.src=grphcs[5]="bubble.gif"

//////////////// Stop Editing //////////////

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all||window.opera)?1:0;

speed=ns6? speed-12 : speed

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= (Math.random()*5+3)*-1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:iecompattest().scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:iecompattest().scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < 0 ){
Ypos[i]=WinHeight+60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=(Math.random()*5+3)*-1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i])+wscrll+'px';
document.getElementById("si"+i).style.top=Ypos[i]+hscrll-100+'px';
}
else{
document.all["si"+i].style.left=Xpos[i]+wscrll+'px';
document.all["si"+i].style.top=Ypos[i]+hscrll+'px';
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',speed);
}

window.onload=fall
//-->
</script>

ViRoy
11-17-2005, 11:42 PM
I like the falling snow however i had to make a few modifications to it.

Changes i have made:
-Snow / leaves now fall at independently random rates creating a much more natural feel.
-Increased the horizontal move distance of falling snow / leaves due to increased speed.
--------------------------------------------------------------------------------





<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Random Fall Rate modification by ViRoy
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
*This notice must stay intact for use
******************************************/

//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;
// 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 = "windowheight";

///////////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)? "snow3.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width - 20); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*30; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = Math.random() * 5 ;
if (sty[i] < .5) {sty[i]=1} // 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] = Math.random() * 5 ;
if (sty[i] < .5) {sty[i]=1}
}
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)
}

</script>

Trishah
12-31-2010, 04:22 AM
I'd like to use this script for confetti. It works and accepts multiple images that I like, but I need them to come from top to bottom instead of bottom to top. How do I turn this around?

Or is there another script that is better for what I want to do?

jscheuer1
12-31-2010, 07:19 PM
Give this one a shot:


<!DOCTYPE html>
<html>
<head>
<title>Bubble Leaves - Bidirectional</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">

/* Inspired by Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
* Modified by Dynamic Drive for NS6 functionality
* visit http://www.dynamicdrive.com for the original script
* Modified by jscheuer1 in http://www.dynamicdrive.com/forums
* 01/11 for optional direction, allow effect to
* work fully on wide pages, to not create 'dancing scrollbars' on small
* pages & use jQuery methods. Requires standards mode DOCTYPE
* tested in all current version major browsers including IE 8 & IE 9 Beta. */

jQuery(function($){
var rise_fall = {
dir: 1, // Set the direction (1 for down, -1 for up)
speed: 20, // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
sway: 6, // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway

//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
grphcs: [
"al.gif",
"bl.gif",
"cl.gif",
"dl.gif",
"el.gif",
"fl.gif" //<-- no trailing comma after last image
],

//////////////// Stop Editing //////////////

loadem: function(){
for(var i = 0; i < this.grphcs.length; ++i){
$(new Image()).attr('src', this.grphcs[i]);
}
},
Ypos: [],
Xpos: [],
Speed: [],
Step: [],
Cstep: [],
els: [],
$master: $('<div style: "position:fixed,top:0,left:0;">'),
WinHeight: $(window).height(),
WinWidth: $(window).width(),

writeem: function(){
var i = this.Amount - 1, els = [];
this.grphcs.sort(function(){return 0.5 - Math.random();});
for (i; i > -1; --i){
this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;">').appendTo(this.$master));
this.Ypos.push(Math.floor(Math.random()*this.WinHeight));
this.Xpos.push(Math.floor(Math.random()*this.WinWidth));
this.Speed.push((Math.random()*5+3)*this.dir);
this.Cstep.push(0);
this.Step.push(Math.random()*0.1+0.05);
}
$('body').append(this.$master);
},

moveem: function(){
this.WinHeight = $(window).height();
this.WinWidth = $(window).width();
for (var i = 0, sy, sx; i < this.Amount; ++i){
sy = this.Speed[i]*Math.sin(90*Math.PI/180);
sx = this.Speed[i]*Math.cos(this.Cstep[i]);
this.Ypos[i] += sy;
this.Xpos[i] += sx*this.sway*0.1;
if (this.Ypos[i] > this.WinHeight&&this.dir === 1||this.Ypos[i] < 0 && this.dir === -1){
this.Xpos[i] = Math.round(Math.random()*this.WinWidth);
this.Speed[i] = (Math.random()*5+3)*this.dir;
}
this.Ypos[i] = (this.Ypos[i] > this.WinHeight&&this.dir === 1)? -60 : (this.Ypos[i] < 0 && this.dir === -1)? this.WinHeight+60 : this.Ypos[i];

sx = Math.min(this.WinWidth,this.Xpos[i]);
sy = this.Ypos[i];
this.els[i].css({left: sx, top: sy});

this.Cstep[i] += this.Step[i];
}
},
init: function(){
this.loadem();
this.writeem();
this.moveem();
setInterval(function(){rise_fall.moveem();}, this.speed);
}
};
rise_fall.init();

});
</script>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#">Test</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>