Canvas Hover Effect
How do I make an canvas hover effect?
What is a canvas hover effect? How do you make a canvas hover effect? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.
Canvas Hover Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Hover Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>
Canvas Hover Effect - Script Codes CSS Codes
body { margin: 0; padding: 0; overflow: hidden;
}
#canvas { background: black;
}
Canvas Hover Effect - Script Codes JS Codes
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), keyword = "Canvas Hover Effect", imageData, density =4, mouse = {}, hovered = false, colors = ["249,249,88", "225,215,25", "130,0,5"], minDist = 20, bounceFactor = 0.7;
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;
document.addEventListener("mousemove", function(e) { mouse.x = e.pageX; mouse.y = e.pageY;
}, false);
// Particle Object
var Particle = function() { this.w = Math.random() * 10.5; this.h = Math.random() * 10.5; this.x = -W; this.y = -H; this.free = false; this.vy = -5 + parseInt(Math.random() * 10) / 2; this.vx = -4 + parseInt(Math.random() * 8); // Color this.a = Math.random(); this.color = colors[parseInt(Math.random()*colors.length)]; this.setPosition = function(x, y) { this.x = x; this.y = y; }; this.draw = function() { ctx.fillStyle = "rgba("+this.color+","+this.a+")"; ctx.fillRect(this.x, this.y, this.w, this.h); }
};
var particles = [];
// Draw the text
function drawText() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "#000000"; ctx.font = "100px 'Arial', sans-serif"; ctx.textAlign = "center"; ctx.fillText(keyword, W/2, H/2);
}
// Clear the canvas
function clear() { ctx.clearRect(0, 0, W, H);
}
// Get pixel positions
function positionParticles() { // Get the data imageData = ctx.getImageData(0, 0, W, W); data = imageData.data; // Iterate each row and column for (var i = 0; i < imageData.height; i += density) { for (var j = 0; j < imageData.width; j += density) { // Get the color of the pixel var color = data[((j * ( imageData.width * 4)) + (i * 4)) - 1]; // If the color is black, draw pixels if (color == 255) { particles.push(new Particle()); particles[particles.length - 1].setPosition(i, j); } } }
}
drawText();
positionParticles();
// Update
function update() { clear(); for(i = 0; i < particles.length; i++) { var p = particles[i]; if(mouse.x > p.x && mouse.x < p.x + p.w && mouse.y > p.y && mouse.y < p.y + p.h) hovered = true; if(hovered == true) { var dist = Math.sqrt((p.x - mouse.x)*(p.x - mouse.x) + (p.y - mouse.y)*(p.y - mouse.y)); if(dist <= minDist) p.free = true; if(p.free == true) { p.y += p.vy; p.vy += 0.15; p.x += p.vx; // Collision Detection if(p.y + p.h > H) { p.y = H - p.h; p.vy *= -bounceFactor; // Friction applied when on the floor if(p.vx > 0) p.vx -= 0.1; else p.vx += 0.1; } if(p.x + p.w > W) { p.x = W - p.w; p.vx *= -bounceFactor; } if(p.x < 0) { p.x = 0; p.vx *= -0.5; } } } ctx.globalCompositeOperation = "lighter"; p.draw(); }
}
(function animloop(){ requestAnimFrame(animloop); update();
})();
Developer | Nick Mkrtchyan |
Username | Sonick |
Uploaded | November 10, 2022 |
Rating | 4 |
Size | 2,833 Kb |
Views | 95,128 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Canvas Green Particles | 3,249 Kb |
Preloader | 2,981 Kb |
Canvas Background Effect | 3,513 Kb |
Canvas Background Effect 3 | 3,029 Kb |
3D Gallery | 4,628 Kb |
Animan CSS3 | 5,353 Kb |
A Pen by Nick Mkrtchyan | 6,258 Kb |
CSS3 Text Animation Effect | 4,470 Kb |
Pure Css3 Menu | 3,056 Kb |
JQuery Gallery Simple 3D Effect | 3,584 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Reading Grid | Tappily | 4,306 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!