Results 1 to 9 of 9

Thread: Cursor effect

  1. #1
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Smile Cursor effect

    Finally, I found an animated effect that works in IE and Mozilla. Script works correctly, but when I put it on my site - http://souhssz.webnode.com/tjestova/brojach/ - apparently cyclic in the upper left corner.
    This is the script:

    Code:
    <STYLE type="text/css">
        <!--
        .kisser {
          position:absolute;
          top:0;
          left:0;
          visibility:hidden;
        }
        -->
        </STYLE>
    
        <SCRIPT language="JavaScript1.2" type="text/JavaScript">
        <!-- cloak
    
        //Kissing trail
        //Visit http://www.rainbow.arch.scriptmania.com for this script
    
        kisserCount = 15 //maximum number of images on screen at one time
        curKisser = 0 //the last image DIV to be displayed (used for timer)
        kissDelay = 1200 //duration images stay on screen (in milliseconds)
        kissSpacer = 30 //distance to move mouse b4 next heart appears
        theimage = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 1st image to be displayed
        theimage2 = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 2nd image to be displayed
    
        //Browser checking and syntax variables
        var docLayers = (document.layers) ? true:false;
        var docId = (document.getElementById) ? true:false;
        var docAll = (document.all) ? true:false;
        var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
        var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
        var stylebitK = (docLayers) ? "":".style"
        var showbitK = (docLayers) ? "show":"visible"
        var hidebitK = (docLayers) ? "hide":"hidden"
        var ns6=document.getElementById&&!document.all
        //Variables used in script
        var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
        lastX = 0
        lastY = 0
        //Collection of functions to get mouse position and place the images
        function doKisser(e) {
    
          posX = getMouseXPos(e)
          posY = getMouseYPos(e)
          if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
            showKisser(posX,posY)
            lastX = posX
            lastY = posY
          }
        }
        // Get the horizontal position of the mouse
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX+10)
          } else {
            return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
          }
        }
        // Get the vartical position of the mouse
        function getMouseYPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageY)
          } else {
            return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
          }
        }
        //Place the image and start timer so that it disappears after a period of time
        function showKisser(x,y) {
          var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
          if (curKisser >= kisserCount) {curKisser = 0}
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
          if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
            eval("clearTimeout(kissDelay" + curKisser + ")")
          }
          eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
          curKisser += 1
        }
        //Make the image disappear
        function hideKisser(knum) {
          eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
        }
    
        function kissbegin(){
        //Let the browser know when the mouse moves
        if (docLayers) {
          document.captureEvents(Event.MOUSEMOVE)
          document.onMouseMove = doKisser
        } else {
          document.onmousemove = doKisser
        }
        }
        window.onload=kissbegin
        // decloak -->
        </SCRIPT>
    
    
        <!--Simply copy and paste just before </BODY> section of your page.-->
    
        <SCRIPT language="JavaScript" type="text/JavaScript">
        <!-- cloak
        // Add all DIV's of hearts
        if (document.all||document.getElementById||document.layers){
        for (k=0;k<kisserCount;k=k+2) {
          document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
          document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
    
        }
        }
    
        // decloak -->
        </SCRIPT>

    Can you specify what I wrong, please?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's an old script (obvious because it still branches for document.layers - Netscape 4 was the last browser to use that). It also was written without a standards invoking DOCTYPE in mind because no units are assigned to top or left coordinates (highlighted lines, fixed). It's still a mess, but at it least it now works on a standards compliant page:

    Code:
        <style type="text/css">
        .kisser {
          position:absolute;
          top:0;
          left:0;
          visibility:hidden;
        }
        </style>
    
        <script type="text/javascript">
    
        //Kissing trail
        //Visit http://www.rainbow.arch.scriptmania.com for this script
    
        kisserCount = 15 //maximum number of images on screen at one time
        curKisser = 0 //the last image DIV to be displayed (used for timer)
        kissDelay = 1200 //duration images stay on screen (in milliseconds)
        kissSpacer = 30 //distance to move mouse b4 next heart appears
        theimage = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 1st image to be displayed
        theimage2 = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 2nd image to be displayed
    
        //Browser checking and syntax variables
        var docLayers = (document.layers) ? true:false;
        var docId = (document.getElementById) ? true:false;
        var docAll = (document.all) ? true:false;
        var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
        var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
        var stylebitK = (docLayers) ? "":".style"
        var showbitK = (docLayers) ? "show":"visible"
        var hidebitK = (docLayers) ? "hide":"hidden"
        var ns6=document.getElementById&&!document.all
        //Variables used in script
        var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
        lastX = 0
        lastY = 0
        //Collection of functions to get mouse position and place the images
        function doKisser(e) {
    
          posX = getMouseXPos(e)
          posY = getMouseYPos(e)
          if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
            showKisser(posX,posY)
            lastX = posX
            lastY = posY
          }
        }
        // Get the horizontal position of the mouse
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX+10)
          } else {
            return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
          }
        }
        // Get the vartical position of the mouse
        function getMouseYPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageY)
          } else {
            return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
          }
        }
        //Place the image and start timer so that it disappears after a period of time
        function showKisser(x,y) {
          var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
          if (curKisser >= kisserCount) {curKisser = 0}
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = '" + processedx + "px'")
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = '" + y + "px'")
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
          if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
            eval("clearTimeout(kissDelay" + curKisser + ")")
          }
          eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
          curKisser += 1
        }
        //Make the image disappear
        function hideKisser(knum) {
          eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
        }
    
        function kissbegin(){
        //Let the browser know when the mouse moves
        if (docLayers) {
          document.captureEvents(Event.MOUSEMOVE)
          document.onMouseMove = doKisser
        } else {
          document.onmousemove = doKisser
        }
        }
    
        </script>
    
    
        <!-- Copy and paste just before the closing </BODY> tag of your page. -->
    
        <script type="text/javascript">
    
        // Add all DIV's of hearts
        if (document.all||document.getElementById||document.layers){
        for (k=0;k<kisserCount;k=k+2) {
          document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
          document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
    
        }
        }
        kissbegin();
    
        </script>
    There could still be other problems integrating it into a given page. If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

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

    balki (01-08-2012)

  4. #3
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Smile

    Works perfectly, you're great!
    Is there a way to be reduce distance between cursor and effect?

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    On the page you link to (Works), the images are missing, so I can't really tell how far they are from the cursor. In most browsers there is no effect. In IE, there is, albeit a trail of broken image tokens. These appear quite close to the cursor though.

    A lot could depend upon the images - say if they have a lot of blank space in them, that would appear as distance from the cursor. Reducing that blank space, if there's any would make the images appear closer to the cursor. And the faster the cursor moves, as the CPU and video card try to catch up, the farther behind will be the images, I believe that's unavoidable.

    There's also a threshold movement of the cursor that's required before the images appear, that's set here:

    Code:
        //Kissing trail
        //Visit http://www.rainbow.arch.scriptmania.com for this script
    
        kisserCount = 15 //maximum number of images on screen at one time
        curKisser = 0 //the last image DIV to be displayed (used for timer)
        kissDelay = 1200 //duration images stay on screen (in milliseconds)
        kissSpacer = 30 //distance to move mouse b4 next heart appears
        theimage = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 1st image to be displayed
        theimage2 = "http://nivagold.ru/raznoe1/logic/game4/1.gif" //the 2nd image to be displayed
    But that doesn't govern the distance from the cursor, rather how far the cursor must move before the images appear. If the images get too close to the cursor though, you run the risk of them interfering with hover and/or click events on the page.

    That said, the only place where it looks like a distance from the cursor is being created is here:

    Code:
        // Get the horizontal position of the mouse
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX+10)
          } else {
            return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
          }
        }
    You could try reducing that number.
    - John
    ________________________

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

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

    balki (01-09-2012)

  7. #5
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    The image was visible for me, but when I edit it - disappear. I think I encountered a similar problem when the text editor replace the types of quotes.
    I change image, remove the empty space and upload it on Picasa (157 KB). I hope that is currently visible for you.
    Distance doesn't succumb to reduce, but I think it's better.
    Thank you very much for the detailed guidance (:

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's too big of an image, or at least too big for that page you have it on, or it looks out of place for other reasons - colors don't harmonize with the page. The page looks professional, the image and the effect look artistic and lighthearted. It could be fine on a different page.

    Anyways, it's like I said. There's a lot of blank space in the image. You could try adjusting the red numbers:

    Code:
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX+10)
          } else {
            return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
          }
        }
    With that image, you could probably even use negative values, like:

    Code:
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX-30)
          } else {
            return (parseInt(event.clientX-30) + parseInt(document.body.scrollLeft))
          }
        }
    Note: the numbers should be the same as each other. One number is used by most browsers, the other by IE. But both are the distance from the cursor.

    You don't have to use -30 though. You can play with it until you find a number you like.
    - John
    ________________________

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

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

    balki (01-10-2012)

  10. #7
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Yes, I agree that the image isn't quite appropriate. My plans are to edit and test it, but more important for me was the principle on which I can use the effect.
    Unfortunately, marked in red values ​​(return parseInt(e.pageX-60)) set only the implementation of the horizontal effect.

    Thanks again (:

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I didn't say the image was bad, just that it didn't fit the demo page you have there.

    OK. The vertical is right below the horizontal in the next function:

    Code:
        // Get the vartical position of the mouse
        function getMouseYPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageY)
          } else {
            return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
          }
        }
    There you can do like:

    Code:
        // Get the vartical position of the mouse
        function getMouseYPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageY-70)
          } else {
            return (parseInt(event.clientY-70) + parseInt(document.body.scrollTop))
          }
        }
    But I tried this out, and what I said:

    If the images get too close to the cursor though, you run the risk of them interfering with hover and/or click events on the page.
    is true. If the image is over a link say, then you cannot click on the link until the image goes away. One thing you could try at that point is increasing the number for the threshold:

    Code:
        <script type="text/javascript">
    
        //Kissing trail
        //Visit http://www.rainbow.arch.scriptmania.com for this script
    
        kisserCount = 15 //maximum number of images on screen at one time
        curKisser = 0 //the last image DIV to be displayed (used for timer)
        kissDelay = 1200 //duration images stay on screen (in milliseconds)
        kissSpacer = 30 //distance to move mouse b4 next heart appears
    Make that like 100, and in most cases, when the user slows down enough to click something, they'll be able to.
    - John
    ________________________

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

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

    balki (01-10-2012)

  13. #9
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Effect subsides and doesn't wake up from small movements, that why I don't treat interfering with hover and / or click events on the page as a problem.
    I achieve the desired positioning, thanks to you (:

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
  •