Interactive Fluid Rainbow Cursor Trail & Glowing Particle Flow in HTML5 Canvas and css and JS
In this step-by-step tutorial, you will learn how to build an interactive fluid rainbow cursor trail animation using HTML5 Canvas, CSS3, and JavaScript!
🌟 Key Code Features:
HTML5 Canvas & HSL Color Cycling: Smoothly cycles through neon spectrum colors using
hsl()as you move your mouse or swipe on touchscreens.Physics & Bouncing Edges: Particles shoot across the viewport at randomized speeds and bounce off screen edges for maximum screen coverage.
Glow & Trail Effects: Uses Canvas
shadowBlurfor glowing particle auras combined with semi-transparent background clearing (rgba) for silky motion tails.Fully Responsive & Mobile-Friendly: Dynamically resizes to fill any window and includes full touch-event support (
touchmove).Zero External Dependencies: Built completely with pure Vanilla JavaScript—no libraries, CDNs, or heavy frameworks needed!
This project is fantastic for beginner to intermediate developers looking to learn JavaScript Object-Oriented Programming (OOP) classes, HTML5 Canvas animation loops (requestAnimationFrame), and interactive particle physics.
Don't forget to Like, Share, and Subscribe to Computer Soft Skills for more creative coding tutorials!
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- single-file HTML, CSS and JavaScript web page that creates an interactive fluid rainbow cursor trail. ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Multi-Color Flow</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #030308;
height: 100vh;
width: 100vw;
overflow: hidden;
cursor: crosshair;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="screenCanvas"></canvas>
<script>
const canvas = document.getElementById('screenCanvas');
const ctx = canvas.getContext('2d');
// Resize canvas to fill window
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const particles = [];
let hue = 0;
// Particle class designed to travel across the whole screen
class FullscreenParticle {
constructor(x, y) {
this.x = x;
this.y = y;
// Larger initial particle size
this.size = Math.random() * 12 + 6;
// High velocity angles to shoot particles across the full screen
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 8 + 3;
this.speedX = Math.cos(angle) * speed;
this.speedY = Math.sin(angle) * speed;
// Color cycling
this.color = `hsl(${hue}, 100%, 65%)`;
this.alpha = 1;
this.decay = Math.random() * 0.008 + 0.004; // Slow fade so they travel far
}
update() {
this.x += this.speedX;
this.y += this.speedY;
// Bounce off screen edges to fill whole screen
if (this.x <= 0 || this.x >= canvas.width) {
this.speedX *= -1;
}
if (this.y <= 0 || this.y >= canvas.height) {
this.speedY *= -1;
}
// Slow decrease in size and alpha transparency
if (this.size > 0.3) this.size -= 0.04;
this.alpha -= this.decay;
}
draw() {
ctx.save();
ctx.globalAlpha = Math.max(0, this.alpha);
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
// Intense glowing aura
ctx.shadowColor = this.color;
ctx.shadowBlur = 20;
ctx.fill();
ctx.restore();
}
}
// Spawn particles across directional vectors
function spawnFlow(x, y, count = 8) {
for (let i = 0; i < count; i++) {
particles.push(new FullscreenParticle(x, y));
}
}
// Mouse movement triggers color waves
window.addEventListener('mousemove', (e) => {
spawnFlow(e.x, e.y, 6);
hue += 2.5; // Color shifting rate
});
// Touch support for mobile displays
window.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
spawnFlow(touch.clientX, touch.clientY, 6);
hue += 2.5;
});
// Render animation loop with dark motion trail
function animate() {
// Semi-transparent background clear for smooth color trail tails
ctx.fillStyle = 'rgba(3, 3, 8, 0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].alpha <= 0 || particles[i].size <= 0.3) {
particles.splice(i, 1);
i--;
}
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
No comments:
Post a Comment