The HTML Code for a Trailing Cursor Effect
- The trick behind the trailing cursor effect is to create a small image file in the shape of a pointer. This image file is displayed in a series of screen coordinates based on the pointer’s position. While an image file of a pointer is a logical choice, any small image can be used. Store the image file in same directory as the HTML files for your pages.
- To keep your animated cursor within the body content of the Web page and away from any menus where it might cause problems, place a CSS definition in the <head> section of your HTML code. Set the X-axis overflow property to “hidden” inside the <style> tag.
- Add some JavaScript code inside the <body> section of your HTML to track the position of the cursor. Declare an array to hold the last cursor position and display your image in the location stored in the array. The size of the array determines the number of images displayed. In other words, the size of the array determines the length of the cursor’s trail.
- One important property for a trailing cursor is making the trail disappear when the pointer stops moving. A static trail that remains on the screen when the pointer stops clutters the page and can confuse your site visitors. Set a timeout on your "mousemove" event inside the display function to keep your screen free of unwanted artifacts.
The Pointer
CSS
JavaScript
Clean Up
Source...