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 |
JQuery Gallery Simple 3D Effect | 3,584 Kb |
3D Gallery | 4,628 Kb |
Simple Text spining | 3,005 Kb |
CSS2 Spotlight | 2,531 Kb |
Pure Css3 Menu | 3,056 Kb |
CSS3 Text Animation Effect 2 | 3,367 Kb |
A Pen by Nick Mkrtchyan | 6,258 Kb |
Mozilla DevDerby | 21,599 Kb |
Animan CSS3 | 5,353 Kb |
CSS3 Text Animation Effect | 4,470 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 |
Border image | JohnRiordan | 2,120 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 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!