PDA

View Full Version : Cursor effect



balki
01-08-2012, 09:08 PM
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:




<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?

jscheuer1
01-08-2012, 10:02 PM
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:


<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.

balki
01-08-2012, 10:49 PM
Works (http://souhssz.webnode.com/tjestova/brojach/) perfectly, you're great!
Is there a way to be reduce distance between cursor and effect?

jscheuer1
01-09-2012, 02:47 AM
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:


//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:


// 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.

balki
01-09-2012, 08:34 AM
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 (https://lh3.googleusercontent.com/-Aw4VSL9XHqY/Twqhl_15noI/AAAAAAAAB-E/MeO0Fba3hWI/s193/ani-pastel-sparkles.gif), 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 (:

jscheuer1
01-09-2012, 09:26 AM
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:


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:


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.

balki
01-10-2012, 12:48 AM
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 (http://souhssz.webnode.com/tjestova/brojach/).

Thanks again (:

jscheuer1
01-10-2012, 03:15 AM
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:


// 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:


// 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:


<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.

balki
01-10-2012, 06:13 PM
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 (: