Canvas Snow
How do I make an canvas snow?
Snow effect using two canvas elements. Direction of snow flakes is dependent on mouse position. The main canvas contains the animated flakes. The background canvas contains the gradient and flakes that have landed.. What is a canvas snow? How do you make a canvas snow? This script and codes were developed by Kevin on 27 August 2022, Saturday.
Canvas Snow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Snow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="bgCanvas"></canvas>
<canvas id = "canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>
Canvas Snow - Script Codes CSS Codes
body{ margin: 0;
}
#canvas{ display: block; position: absolute; height: 100vh; width: 100vw; z-index:1;
}
#bgCanvas{ display: block; position: absolute; height: 100vh; width: 100vw; z-index:-10;
}
Canvas Snow - Script Codes JS Codes
function draw() { var canvas = document.getElementById("canvas"); var bgCanvas = document.getElementById("bgCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; bgCanvas.width = window.innerWidth; bgCanvas.height = window.innerHeight; if (canvas.getContext) { var ctx = canvas.getContext("2d"); var bgCtx = bgCanvas.getContext("2d"); var flakes = []; function Flake(xPos, yPos, size, ySpeed) { this.xPos = xPos; this.yPos = yPos; this.size = size; this.ySpeed = ySpeed; } var windAngle = 0; canvas.addEventListener('mousemove', function(e) { var xCoord = e.clientX; windAngle = (xCoord - (canvas.width / 2)) / (canvas.width / 2); }, false) var skyGrad = bgCtx.createLinearGradient(0, 0, 0, canvas.height / 2); skyGrad.addColorStop(0, "black"); skyGrad.addColorStop(.4, "black"); skyGrad.addColorStop(1, "rgb(20,20,50)"); var groundGrad = bgCtx.createLinearGradient(0, canvas.height / 2, 0, canvas.height); groundGrad.addColorStop(0, "rgb(20,20,50)"); groundGrad.addColorStop(.1, "rgb(5,5,12)"); groundGrad.addColorStop(1, "rgb(50,50,50)"); bgCtx.fillStyle = skyGrad; bgCtx.fillRect(0, 0, canvas.width, canvas.height / 2 + 1); bgCtx.fillStyle = groundGrad; bgCtx.fillRect(0, canvas.height / 2, canvas.width, canvas.height); var landedGrad = bgCtx.createRadialGradient(0, 0, 0, 0, 0, 8); landedGrad.addColorStop(0, "rgba(255,255,255,1)"); landedGrad.addColorStop(1, "rgba(255,255,255,0)"); bgCtx.fillStyle = landedGrad; function landedFlake(flake, x) { bgCtx.save(); bgCtx.scale(1, .50); bgCtx.beginPath(); bgCtx.translate(flake.xPos, flake.yPos * 2); bgCtx.arc(0, 0, flake.size, 0, 2 * Math.PI); bgCtx.fill(); flakes.splice(x, 1); bgCtx.restore(); } var flakeGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, 8); flakeGrad.addColorStop(0, "white"); flakeGrad.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = flakeGrad; function snowFall() { ctx.clearRect(0, 0, canvas.width, canvas.height); var random200 = Math.floor((Math.random() * 200) + 1); var randomSize = random200 / 20; var randomXPos = Math.floor((Math.random() * canvas.width) + 1) - randomSize; var flake = new Flake(randomXPos, 0 - randomSize, randomSize, randomSize / 2.5); flakes.push(flake); for (var x = 0; x < flakes.length; x++) { if (flakes[x].yPos > canvas.height / 2 + ((canvas.height / 2) / 200) * (flakes[x].size * 20)) { landedFlake(flakes[x], x); x--; continue; } ctx.beginPath(); ctx.translate(flakes[x].xPos, flakes[x].yPos); ctx.arc(0, 0, flakes[x].size, 0, Math.PI * 2); ctx.fill(); ctx.translate(-flakes[x].xPos, -flakes[x].yPos); flakes[x].yPos += flakes[x].ySpeed; flakes[x].xPos += flakes[x].ySpeed * windAngle; if (flakes[x].xPos - flakes[x].size > canvas.width) { flakes[x].xPos -= canvas.width; } if (flakes[x].xPos + flakes[x].size < 0) { flakes[x].xPos += canvas.width; } } requestAnimationFrame(snowFall); } snowFall(); }
}
draw();
Developer | Kevin |
Username | KevinBruland |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,694 Kb |
Views | 40,480 |
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 |
Twitch | 3,683 Kb |
Memory | 4,680 Kb |
Canvas Optical Illusion | 2,148 Kb |
Calculator | 3,704 Kb |
Markdown preview | 3,250 Kb |
Simon | 5,318 Kb |
Canvas Spiral Loader | 2,359 Kb |
Experimenting1 | 1,737 Kb |
Canvas Mouse Position Radial Gradient | 2,031 Kb |
Glossy Buttons | 3,228 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 |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Hexagons | Ashmind | 4,360 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!