Mouse Trail Animation
This project is a simple JavaScript animation that creates a mouse trail effect on a canvas. As the user moves the mouse, colorful particles follow the cursor, leaving a trail behind. The animation continuously updates and renders the particles on the canvas.
The code creates a mouse trail animation on a canvas element. Here's a summary of its functionality:
-
The script retrieves the canvas element and its 2D rendering context.
-
The canvas dimensions are set to match the window's inner dimensions.
-
Two variables,
spotsandhue, are initialized. -
An object,
mouse, is created to store the current mouse position. -
An event listener is added to the canvas, tracking the mouse movement. When the mouse moves, three new instances of the
Particleclass are created and added to thespotsarray. -
The
Particleclass represents a particle in the animation. It initializes the particle's position, size, speed, and color based on the mouse position and a hue value. -
The
updatemethod of theParticleclass updates the particle's position and decreases its size over time. -
The
drawmethod of theParticleclass renders the particle as a filled arc on the canvas. -
The
handleParticlesfunction updates and draws all particles, as well as draws lines between particles that are close to each other. -
The
animatefunction clears the canvas, handles the particles, increments the hue value, and requests the next animation frame. -
Event listeners are added for the window's resize and mouseout events to update the canvas dimensions and reset the mouse position, respectively.
-
Finally, the
animatefunction is called to start the animation loop.
This code can be used to create an interactive and visually appealing mouse trail effect on a webpage.
This project has no external dependencies.
It is built using plain HTML, CSS, and JavaScript.
Screencast.from.06.06.2023.15.19.52.webm
This project was inspired by various mouse trail animations and aims to provide a simple implementation for educational purposes.