* Draws a line using the recorded cursor positions. ImageCanvas.height = lineCanvas.height = window.innerHeight ImageCanvas.width = lineCanvas.width = window.innerWidth * Resizes both canvases to fill the window. Window.addEventListener('resize', resizeCanvases) * Attaches event listeners and starts the effect.ĭocument.addEventListener('mousemove', onMouseMove) Var lineCanvasContext = lineCanvas.getContext('2d') Var lineCanvas = document.createElement('canvas') Var imageCanvasContext = imageCanvas.getContext('2d') Var imageCanvas = document.createElement('canvas') Var image = document.querySelector('img.pointer') I am familiar with doing animation in Flash, but using code to animate objects following the cursor over an existing image is not my area! circles with transparent backgrounds) and that same day I came across the L’or coffee advert as a pop-up which has this interactive function following cursor (though is more like glitter and I want mine far more subtle & simpler).Īnyone? This is a still of sort of effect I was after: but may be too complex to achieve for what it is, so a series of very small gifs could give similar effect.

Having been playing around with idea of a light trail for my neon splash page (though is a tad cheesy, so is my neon sign), I thought it would be quite easy to find code for it, like I had with but is proving trickier than I thought.Ĭlosest I found was: but a bit too clunky as I want it to fade smoothly, and on considering how involved a smooth transition may be, thought logically about a particle trail instead using uploaded gifs (ie.

Glitter trail cursor