Cursor Sparkle Effect using Javascript

Submitted by jaredgwapo on Thursday, January 28, 2016 - 12:01.
Language
JavaScript
In this chapter we are about to learn how to make a sparkle effect in your mouse cursor. You can download and use this in your projects or systems. Just follow the instructions below.

Instructions

Writing our css code

  1. <style type="text/css">
  2.  
  3.  
  4. BODY{
  5. overflow-x:hidden;
  6. }
  7.  
  8. .s1
  9. {
  10.   position  : absolute;
  11.   font-size : 10pt;
  12.   color     : blue;
  13.   visibility: hidden;
  14. }
  15.  
  16. .s2
  17. {
  18.   position  : absolute;
  19.   font-size : 18pt;
  20.   color     : red;
  21.         visibility : hidden;
  22. }
  23.  
  24. .s3
  25. {
  26.   position  : absolute;
  27.   font-size : 14pt;
  28.   color     : gold;
  29.         visibility : hidden;
  30. }
  31.  
  32. .s4
  33. {
  34.   position  : absolute;
  35.   font-size : 12pt;
  36.   color     : lime;
  37.         visibility : hidden;
  38. }
  39.  
  40.  
  41. </style>

Writing our javacript code

  1. <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
  2.  
  3. var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
  4.  
  5. var nav = (!document.all || window.opera);
  6. var tmr = null;
  7. var spd = 50;
  8. var x = 0;
  9. var x_offset = 5;
  10. var y = 0;
  11. var y_offset = 15;
  12.  
  13. document.onmousemove = get_mouse;
  14.  
  15. function get_mouse(e)
  16. {    
  17.   x = (nav) ? e.pageX : event.clientX+standardbody.scrollLeft;
  18.   y = (nav) ? e.pageY : event.clientY+standardbody.scrollTop;
  19.   x += x_offset;
  20.   y += y_offset;
  21.   beam(1);    
  22. }
  23.  
  24. function beam(n)
  25. {
  26.   if(n<5)
  27.   {
  28.                                 document.getElementById('div'+n).style.top=y+'px'
  29.                                 document.getElementById('div'+n).style.left=x+'px'
  30.                                 document.getElementById('div'+n).style.visibility='visible'
  31.     n++;
  32.     tmr=setTimeout("beam("+n+")",spd);
  33.   }
  34.   else
  35.   {
  36.      clearTimeout(tmr);
  37.      fade(4);
  38.   }  
  39. }
  40.  
  41. function fade(n)
  42. {
  43.   if(n>0)
  44.   {
  45.                                 document.getElementById('div'+n).style.visibility='hidden'
  46.     n--;
  47.     tmr=setTimeout("fade("+n+")",spd);
  48.   }
  49.   else clearTimeout(tmr);
  50. }
  51.  
  52. </SCRIPT>

Lastly, our html code

  1. <DIV ID="div1" CLASS="s1">*</DIV>
  2. <DIV ID="div2" CLASS="s2">*</DIV>
  3. <DIV ID="div3" CLASS="s3">*</DIV>
  4. <DIV ID="div4" CLASS="s4">*</DIV>
  5.  
  6. <p align="center"><font face="arial" size="3">Do you have source code, articles, tutorials, web links, <br />and books to share? You can write your own content here. <br />You can even have your own blog.</font><br>
  7. <font face="arial, helvetica" size="5"><a href="http://sourcecodester.com">Sourcecodester</a></font>
  8. </p>
  9. <p align="center"><font face="arial" size="3">Move yourr cursor around to get the effect.</font><br></p>
Finally, you have successfully created a sparkling cursor effect. For more questions, suggestions and queries, feel free to comment below or email me at [email protected]

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Sparkle
cursor
cursor effect
sparkling cursor

Add new comment

About text formats
  • 2062 views