That's pretty cool. Could you (without too much trouble) add a fade as the leaves are at the bottom?
That's pretty cool. Could you (without too much trouble) add a fade as the leaves are at the bottom?
Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum
The leaves accumulating at the bottom is what they do in reality, as with snow I'd really like it!![]()
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:
Make that:Code:rise_fall.init({speed: 60, Amount: 10, accumulate: 255});
And they will slide off the screen at the bottom.Code:rise_fall.init({speed: 60, Amount: 10});
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.
Last edited by jscheuer1; 10-21-2013 at 08:38 AM. Reason: add info
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Baller95 (10-21-2013)
Great stuff John, thanks for that!![]()
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);
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:
Code:<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>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Metermaid (10-23-2013)
John I need it all in one script, I can't do two scripts.
Why not?
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Bookmarks