Page 6 of 8 FirstFirst ... 45678 LastLast
Results 51 to 60 of 78

Thread: Autumn Leaves

  1. #51
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    There seems to be some question here about the number of images with this latest code. First you have to understand that there are two ways to count images:

    1.) The number of different images
    2.) The number of images falling at once

    So you could have only one image and have 10 of them falling at a time. The defaults in the script are currently set to 6 images falling 18 at a time:

    Code:
    	rise_fall.prototype = {
    		defaults: { //these items may be set in the on page call
    			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
    			zIndex: 1, // Set z-index value for image overlay
    			//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
    			]
    		},
    See, Amount is 18, and there are 6 images. You can set these however you want. I think that what JRR might want is:

    Code:
    	rise_fall.prototype = {
    		defaults: { //these items may be set in the on page call
    			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: 36, // 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
    			zIndex: 1, // Set z-index value for image overlay
    			//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
    			grphcs: [
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf2.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf3.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf4.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf5.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf6.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf7.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf8.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf9.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf10.png",
    				"http://www.jr-richscooterdoc.com/FLeaf/Leaf11.png" //<-- no trailing comma after last image
    			]
    		},
    But remember that the defaults are overridden in the call, and in the call on the demo we have:

    Code:
    leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});
    So, either make that 36 as well or get rid of it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #52
    Join Date
    Oct 2013
    Location
    Toronto, Canada
    Posts
    28
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

    John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum - http://inspiredsciforum.com/

    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);
    Last edited by jscheuer1; 10-27-2013 at 01:06 AM. Reason: Format

  3. #53
    Join Date
    Oct 2013
    Posts
    59
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Good Evening John.

    I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

    I will go back to this old code and as I stated before it has been changed to make just this happen in a unique way. One places the first image in the top part of the code which as you can see I have done. I use my own server/image host to host my images:


    Code:
    //Configure below to change URL path to the snow image
    var snowsrc = "http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png";

    Now as I stated I do not have to do what you suggested with the other code of Baller95. As long as I put the other images in my host with the same exact url but numbered from say in this case Leaf2.png then I can put as many as I want in and in this case I chose 11 different leaves. I also do not according to this code size them over 40px because the max is 60px and that accounts for the scroll bar width which with W8.1 is 17px. The code is set for the scroll bar at 15px so adding 40px to 15px = 55px. If you go over the max image size if 60px the scroll bar and page will jump.

    Now to get it to use the 11 "different" leaves I do my math in the code in two places:

    Code:
    (Math.round(Math.random()*10+1)+".$1"))
    The 1 = the image url of Leaf1 and the 10 = Leaf2 to Leaf11 which again are on my image host and not in the code itself.

    Now here is one cool part of this code and it's the line 8 of the code "var no =" If you just decide to use one image then set it to the original setting on 10 and move on. I have worked with this a lot. I know these leaves and numbers by heart. So to see 11 different leaves the minimum you can set the "var no =" is 36, you can go higher and you may see one image more than another?

    The way it was explained to me is it's like rolling dice. Say you roll a six on your first roll and set this number to 10 then there is a one in ten chance you'll roll a six again so the same with seeing the image. If you set the number to 20 you have doubled the odds and so forth.

    Now what is cool about this is for instance if someone complained for example and said there are too many leaves I could just go change this to a lower number, that's all. I wouldn't have to do anything like delete images on my host just lower this number. I know if you set it to 34 it will drop a leaf and you can set ther for 3 days and only count 10 "different" leaves.

    Also the problem with the leaves moving as you scroll was also on this code but it was corrected by changing part of the old code from this:


    Code:
    doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;

    To this:


    Code:
    doc_height = $(document).height()

    With this the leaves will continue to fall no mater if you scroll the page up or down.

    I'm wondering if this code can be made into a plugin also?

    Thanks.

  4. #54
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Baller95 View Post
    John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum
    Quote Originally Posted by JRR View Post
    Good Evening John.

    I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

    I will go back to this old code
    Let's stick with the latest code. Use that. If there's still a problem, let me know.
    Last edited by jscheuer1; 10-27-2013 at 01:13 AM. Reason: add second quote
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #55
    Join Date
    Oct 2013
    Posts
    59
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks John, I'll just watch this and see how it plays out.

  6. #56
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Oh, and there is another way (many really) of specifying the images. After all, it's just an array. So any method that yields an array of images will do. For instance one could do:

    Code:
    leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
    	var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
    	while(--i){ga.push(gb + i + ge);}
    	return ga;
    })(), accumulate: 255});
    demo:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Metermaid (10-27-2013)

  8. #57
    Join Date
    Sep 2012
    Location
    Lincoln, UK
    Posts
    20
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Looks good John - bit too much sway for me though.

  9. #58
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Windy day.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Metermaid (10-27-2013)

  11. #59
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Somethings else I usually mention whenever this comes up (it allways comes up in the fall for leaves and in winter for snow), this is CPU intensive and distracting/annoying to the visitor. The more images you have, and the more they accumulate, the slower the response from the CPU. Sometimes this is enough to slow down the leaves over time. And/or slow down performance of the computer in general while this effect is going on in a browser.

    Those are the reasons why I've added the ability to stop and start these things independently of the page load or parse events. Once you've started one and assigned it to a variable name, you can stop it with varname.stop(), which will stop the motion, or varname.stop(true), which will stop it and hide the images. So for example you could do:

    Code:
    leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
    	var gb = 'leafimages/Leaf', ge = '.png', i = 12, ga = [];
    	while(--i){ga.push(gb + i + ge);}
    	return ga
    })(), accumulate: 100});
    setTimeout(function(){leaves.stop(true)}, 6000);
    And they would stop and disappear after 6 seconds, freeing up the CPU, and letting the visitor see the page without distraction.

    You can restart them with leaves.restart() or leaves.restart(true). The first will resume them from where they were, the second will wipe out everything and start over.

    So, you could have a button or link on the page whose onclick event was to restart them if the user wants to.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #60
    Join Date
    Sep 2012
    Location
    Lincoln, UK
    Posts
    20
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Windy day.
    Of course!

Similar Threads

  1. Autumn Leaves
    By Metermaid in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 09-17-2012, 08:17 AM
  2. autumn leaves
    By chaotic in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-17-2008, 08:30 PM
  3. Autumn leaves!!!!
    By Don in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-14-2008, 11:14 AM
  4. DD Autumn leaves script
    By ianric in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-05-2008, 07:49 PM
  5. Autumn leaves
    By walshy in forum JavaScript
    Replies: 3
    Last Post: 08-09-2005, 09:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •