Autumn Leaves

[djr33]

That's pretty cool. Could you (without too much trouble) add a fade as the leaves are at the bottom?

[Metermaid]

You might like:

http://home.comcast.net/~jscheuer1/s...ll_rise_jq.htm

I like that effect.

[Metermaid]

The leaves accumulating at the bottom is what they do in reality, as with snow I'd really like it!

[jscheuer1]

Right, and for that other person who wanted them to slide off the screen, if s/he wants them not to accumulate, in this version where it has:

	rise_fall.init({speed: 60, Amount: 10, accumulate: 255});

Make that:

	rise_fall.init({speed: 60, Amount: 10});

And they will slide off the screen at the bottom.

It should be easy to have them fade, I guess you mean as they're lying there they could get a little dimmer? Right now, though you have to watch it for awhile and need to pay pretty close attention to see it happening, once the leaves reach the accumulate limit set in the init, they will start to disappear (fade out) but usually from so deep in the pile you can't tell. But there always seem to be some you can see if you're watching closely as they fade away. With a lower accumulate number, like - say 55, it's much easier to see them fading out.

[Baller95]

Great stuff John, thanks for that!

[Baller95]

You might like:

http://home.comcast.net/~jscheuer1/s...ll_rise_jq.htm

The leaves don't seem to be accumulating for me. Is there anything I need to change?

[Baller95]

Is there a way to integrate the accumulating into this code?

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;
var newie = /MSIE (\d+)/.exec(navigator.userAgent);
if (newie && newie[1] > 8) {
ns6 = true;
}
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:fixed;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 - 66;
WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
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) * dir;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function fall() {
var WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
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 * sway * 0.1;
if (Ypos[i] > WinHeight && dir == 1 || Ypos[i] < 0 && dir == -1) {
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = (Math.random() * 5 + 3) * dir;
}
Ypos[i] = (Ypos[i] > WinHeight && dir == 1) ? -60 : (Ypos[i] < 0 && dir == -1) ? WinHeight + 60 : Ypos[i];
if (ns) {
document.layers['sn' + i].left = Xpos[i] + wscrll;
document.layers['sn' + i].top = Ypos[i] + hscrll;
} else if (ns6) {
var dirFac = dir == 1 ? 60 : 200
document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]) + 'px';
document.getElementById("si" + i).style.top = Ypos[i] - dirFac + 'px';
} else {
document.all["si" + i].style.left = Xpos[i] + 'px';
document.all["si" + i].style.top = Ypos[i] + 'px';
}
Cstep[i] += Step[i];
}
setTimeout('fall()', speed);
}

jQuery(fall);

[jscheuer1]

Not really. Get rid of all of that and use the latest code:

http://home.comcast.net/~jscheuer1/s...se_jq_ssmu.htm

script is here (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...y.fall_rise.js

There are many configuration options including the ability to have two or more fallings/risings going on at once. But generally you will want only one, for leaves, use only the highlighted, comment out the other one as shown in red:

<script type="text/javascript">
var leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
//var bubbles = new rise_fall({speed: 75, dir: -1, grphcs: ['bubble.gif']});
</script>

[Baller95]

John I need it all in one script, I can't do two scripts.

[jscheuer1]

Why not?