Tempo's Code Center

Trail Cursor

The code here creates an effect like you can see here.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href="YOUR_CSS.css" rel="stylesheet" type="text/css" media="all">
    <script src="YOUR_JS.js" type="text/javascript" defer></script>
  </head>
  <body>
    <!--Page HTML here-->
    <canvas id="CANVAS_ID"></canvas>
    <div>
      <img style="display:none;"
        id="IMAGE_ID"
        src="YOUR_CURSOR_IMAGE"
        width="32"
        height="32" />
    </div>
  </body>
</html>

Nothing of particular note here, just that YOUR_CSS, YOUR_JS, and YOUR_CURSOR_IMAGE are to be filled in appropriately, and CANVAS_ID and IMAGE_ID can be any name as long as you use the same name in other files.

In order for us to use js to draw an image, the image needs to exist on the page; however it doesn't need to be visible, hence the img tag with display:none.

CSS

html, body {
  cursor: url("YOUR_CURSOR_IMAGE"), auto;
}

#CANVAS_ID { /* match to CANVAS_ID in javascript/html */
  position:fixed; /* Lock the canvas to the window. */
  top: 0px;
  left: 0px;
  margin: 0px !important;
  padding: 0px !important;
  pointer-events:none; /*make sure the canvas doesn't block the mouse from interacting with the page*/
  z-index: 100; /*Draws the canvas above everything with a z-index of 99 or lower.*/
}

Important details to note here include pointer-events:none, z-index:100, and position:fixed. There are comments in the css to explain them.

JS

const CANVAS_ID = 'CANVAS_ID'; // id of your canvas element
const IMAGE_ID = 'IMAGE_ID'; // id of the element containing your cursor image
const CURSOR_COUNT = 5; // number of additional cursors to display in the trail
const INITIAL_ALPHA = 0.7; // alpha value of the cursor closest to the main cursor
const ALPHA_STEP = 0.1; // amount to decrease alpha with each consecutive cursor in the trail.
const ELASTICITY = 0.5; // effects how tightly the trail sticks together (ranges from 0-1; lower values will have the trail collapse slower.)
const FRAME_TIME = 33; // time per animation frame, in milliseconds. not necessarily precise!

var canvas = document.getElementById(CANVAS_ID);
var image = document.getElementById(IMAGE_ID);
var cursors = []; // will store the set of cursors that make up the trail. Each cursor will be represented as [cursorX, cursorY].
var cx = 0;
var cy = 0;

function cursorInit() {
  // set initial canvas size
  windowResize();

  // set event listeners to react to mouse and window actions.
  window.addEventListener("mousemove", cursorMove);
  window.addEventListener("mouseover", cursorEnter);
  window.addEventListener("resize", windowResize);

  // start the animation loop!
  animLoop();
}

// match canvas dimensions to window size
function windowResize() {
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
}

// runs the cursor animation every FRAME_TIME milliseconds.
function animLoop() {
  setTimeout(()=> {
    cursorRun();
    animLoop();
  }, FRAME_TIME);
}

// perform cursor logic
function cursorRun() {
  if (cursors.length > 0) // only run the cursor logic once we are properly initialized
  {
    trailCursors(); // adjust cursor positions
    drawCursors();
  }
}

function trailCursors() {
  // loop through the cursors, adjusting each to move towards the next cursor in the line
  for (let i = 0; i < CURSOR_COUNT - 1; i += 1){
    const currentCursor = cursors[i];
    const nextCursor = cursors[i+1];
    currentCursor[0] += (nextCursor[0] - currentCursor[0]) * ELASTICITY;
    currentCursor[1] += (nextCursor[1] - currentCursor[1]) * ELASTICITY;
  }

  // move the final cursor towards the mouse position
  const finalCursor = cursors[CURSOR_COUNT - 1];
  finalCursor[0] += (cx - finalCursor[0]) * ELASTICITY
  finalCursor[1] += (cy - finalCursor[1]) * ELASTICITY
}

function drawCursors() {
  var ctx = canvas.getContext("2d")
  ctx.reset(); // clear the canvas

  // we want to draw from furthest to closest so the cursors stack correctly, so we want the lowest alpha value first
  let currentAlpha = INITIAL_ALPHA - ((CURSOR_COUNT - 1) * ALPHA_STEP);

  // loop through the cursors and draw them!
  for (const cursor of cursors) {
    ctx.globalAlpha = currentAlpha;
    ctx.drawImage(image, cursor[0], cursor[1]);
    currentAlpha += ALPHA_STEP;
  }
}

// whenever you move the mouse, adjust the mouse position we have stored.
function cursorMove(event) {
  cx = event.x;
  cy = event.y;
}

// as soon as the cursor enters the window for the first time, initialize all cursors to the mouse's current position.
function cursorEnter(event) {
  if (cursors.length == 0) {
    cx = event.x;
    cy = event.y;
    for (let i = 0; i < CURSOR_COUNT; i += 1) {
      cursors.push([cx, cy]);
    }
  }
}

// run the cursor!
cursorInit();

All the const values at the top are values you can adjust to change the behavior of your cursor. The code is commented to explain what each part does, but I'll go over some important details.

In order to make a cursor trail work, we need to store a set of coordinates to define where each "link" in the trail will be drawn. That is stored in the "cursors" value.

From there, every step of the animation, we need to move each cursor a fraction of the way to the next link in the chain, eventually moving the last link a fraction of the way to the cursor's current position. This is handled by the "trailCursors()" function.

After that, we simply draw all the cursors to the screen! We use a little math to set different alpha values to the cursor; but all we need to do is run through our list of cursor coordinates and draw the image to each of those locations. This is handled by the "drawCursors()" function.

Back to Code Center.