SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slooooooow down!

    Hi all!

    How would I make this trailing script slow down when it processes the images so it looks as if they are gliding rather than clumping alltogether?

    <style><!--
    #trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    #trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    #trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    #trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    #trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    #trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px;

    height: 10px; visibility: visible }
    --></style>

    <script language="JavaScript">
    <!-- Hide from browsers that don't know JavaScript
    var version = 0;
    if (navigator.userAgent.indexOf("MSIE 4") != -1) version = 5;
    else if
    (navigator.userAgent.indexOf("MSIE 3") != -1) version = 1;
    else if
    (navigator.userAgent.indexOf("Mozilla/4") != -1) version = 4;
    else if
    (navigator.userAgent.indexOf("Mozilla/4.5") != -1) version = 7;
    else if
    (navigator.userAgent.indexOf("Mozilla/3") != -1) version = 3;
    else if
    (navigator.userAgent.indexOf("Mozilla/2") != -1) version = 2;
    else if
    (navigator.userAgent.indexOf("MSIE 4.5") != -1) version = 6;
    else version = 8;
    // -->
    </script>


    </HEAD>


    <BODY BGCOLOR="#ffffff" onResize="PW_ReDrawNetscape();" >

    <script LANGUAGE="JavaScript1.1">
    if (version > 3)
    document.write('<div id="trailSprite1"><img src="trailgif5.gif" height="10"

    width="10" border="0" name="trailSprite1img"></div><div id="trailSprite2"><img

    src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite2img"></div><div

    id="trailSprite3"><img src="trailgif5.gif" height="10" width="10" border="0"

    name="trailSprite3img"></div><div id="trailSprite4"><img src="trailgif5.gif" height="10"

    width="10" border="0" name="trailSprite4img"></div><div id="trailSprite5"><img

    src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite5img"></div><div

    id="trailSprite6"><img src="trailgif5.gif" height="10" width="10" border="0"

    name="trailSprite6img"></div>')
    </script>
    <script LANGUAGE="JavaScript"><!--
    NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
    window.name = "main"
    // -->
    </script>
    <script LANGUAGE="Javascript1.1"><!--
    var isNS = (navigator.appName == "Netscape");
    layerRef = (isNS) ? "document" : "document.all";
    styleRef = (isNS) ? "" : ".style";

    var queue = new Array();
    var NUM_OF_TRAIL_PARTS = 6

    for (x=1; x < 7; x++) { ///////////////Image Preload
    eval("trailSpriteFrame" + x + " = new Image(10,10);");
    eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");
    }

    ////////////////////////////////////////////////The trail Object

    function trailSpriteObj(anID) {
    this.trailSpriteID = "trailSprite" + anID; //as before
    this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
    this.currentFrame = 1; //the varible for looking after the frame
    this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
    }

    function animateTrailSprite() {
    if (this.currentFrame <7) { //if there are animation frames left, the change

    sprites the current frame
    if (isNS) { //Detect the browser and perform

    coresponding image switch
    eval("document['"+ this.imgRef + "'].src = trailSpriteFrame" +

    this.currentFrame + ".src");
    } else {
    eval("document['" + this.imgRef + "'].src = trailSpriteFrame" +

    this.currentFrame + ".src");
    }
    this.currentFrame ++; //and increase the objects current frame
    } else { //the current frame has reached

    its limit so hide the sprite
    eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility =

    "hidden"');
    }
    }

    /////////////////////////////////////////////////////////////////

    function processAnim() {
    for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
    queue[x].animateTrailSprite();
    }

    function processMouse(e) {
    currentObj = shuffleQueue();
    if (isNS) {
    eval("document." + currentObj + ".left = e.pageX - 0 ;");
    eval("document." + currentObj + ".top = e.pageY + 5;");
    } else {
    eval("document.all." + currentObj + ".style.pixelLeft = event.clientX +

    document.body.scrollLeft - 0 ;");
    eval("document.all." + currentObj + ".style.pixelTop = event.clientY +

    document.body.scrollTop + 5;");
    }
    }

    function shuffleQueue() {
    lastItemPos = queue.length - 1;
    lastItem = queue[lastItemPos];
    for (i = lastItemPos; i>0; i--)
    queue[i] = queue[i-1];
    queue[0] = lastItem;

    queue[0].currentFrame = 1; //reset the objects frame number & make the

    sprite visible again
    eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility =

    "visible"');

    return queue[0].trailSpriteID;
    }

    function init() {
    for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects
    queue[x] = new trailSpriteObj(x+1) ;

    if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
    document.onmousemove = processMouse;

    setInterval("processAnim();",25);
    }

    if (version > 3)
    window.onload = init;
    // -->
    </script>

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Sparkie. I didn't really read through all the code. I will if this doesn't work though...

    function init() {
    for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects
    queue[x] = new trailSpriteObj(x+1) ;

    if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
    document.onmousemove = processMouse;

    setInterval("processAnim();",25);
    }

    Try changing the 25 to 1000 or something. Remembering that 1000 is 1 full second. If this function does what I hope it will slow down the anmation greatly.

    NM that didn't work...I will have to look at the code more.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to let you know i'll have a look at this for you.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't visualise what this is doing, do you have a
    url i can look at, please?

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will have the URL up soon
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  6. #6
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw:

    Success is when Flawless meets a computer ;-)

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  7. #7
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Flawless_koder
    btw:

    Success is when Flawless meets a computer ;-)

    Flawless
    Hey flawless you can cut and paste the code. It works that way.

    Essentially it is a tail. He wants to slow down the speed the tail recombines (I think) when the mouse is finally stopper.

    Sorry Sparky busy week I haven't had a chance to sit down and play
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  8. #8
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've cut'n'copied the code (and corrected all the line breaks that were screwing things up).

    This animation does not work in the usual way - normally mouse trails work purely on a timer basis, i.e. the animation function is polled every 25ms or similar, using the setInterval() method.

    In contrast, this anim response directly to the movement of the mouse via the onmousemove event, which means that the update rate of the current image of the trail is equal to the update rate of the mouse cursor of the screen, which is in turn determined by the mouse driver you have installed and the type of mouse you have.

    Typically, PS/2 mice have a refresh rate of 60Hz (i.e. that the onscreen mouse cursor will be redrawn up to 60 times per second), whereas USB mice are 125Hz and up.

    The script ALSO uses a setInterval(n)-based timer to set which image of the set will be updated on the next mouse move event.

    I could go on (and on... and on...), but essentially this script cannot be altered to slow down the animation speed (without MAJOR modification anwyay).

    However, it is also not clear what you really DO want it to do! Thus, I cannot suggest a specific script to do the job. Check out this page, which might have one which does what you DO want it to do!!!!

    http://www.dynamicdrive.com/dynamicindex13/index.html

    Let us know which one fits the bill so that we at least discover what it was you wanted the script to do!


    M@rco

  9. #9
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Maelstrom

    He wants to slow down the speed the tail recombines (I think) when the mouse is finally stopper.

    Sorry Sparky busy week I haven't had a chance to sit down and play
    Dont worry about it..the effect I want still shows..but not enough to be annoying, so its just fine afterall!

    PS..I am a she!!
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  10. #10
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sparkie

    PS..I am a she!!
    Crap, I always forget that, or maybe I never knew. And it is partially due to your Avatar. It looks like a puppy and I call all dogs he's and all cats she's. Arg...

    I won't make the mistake again.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


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
  •