Html5-canvas-snow-effect

Developer
Mariam Massadeh
Size
2,609 Kb
Views
42,483

How do I make an html5-canvas-snow-effect?

From http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect. What is a html5-canvas-snow-effect? How do you make a html5-canvas-snow-effect? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.

Html5-canvas-snow-effect Previews
IQ Test

Html5-canvas-snow-effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>html5-canvas-snow-effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Html5-canvas-snow-effect - Script Codes CSS Codes

/*Simple reset*/
* {margin: 0; padding: 0;}
body {	/*You can use any kind of background here.*/	background: #6b92b9;
}
canvas {	display: block;
}

Html5-canvas-snow-effect - Script Codes JS Codes

window.onload = function(){	//canvas init	var canvas = document.getElementById("canvas");	var ctx = canvas.getContext("2d");	//canvas dimensions	var W = window.innerWidth;	var H = window.innerHeight;	canvas.width = W;	canvas.height = H;	//snowflake particles	var mp = 25; //max particles	var particles = [];	for(var i = 0; i < mp; i++)	{	particles.push({	x: Math.random()*W, //x-coordinate	y: Math.random()*H, //y-coordinate	r: Math.random()*4+1, //radius	d: Math.random()*mp //density	})	}	//Lets draw the flakes	function draw()	{	ctx.clearRect(0, 0, W, H);	ctx.fillStyle = "rgba(255, 255, 255, 0.8)";	ctx.beginPath();	for(var i = 0; i < mp; i++)	{	var p = particles[i];	ctx.moveTo(p.x, p.y);	ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);	}	ctx.fill();	update();	}	//Function to move the snowflakes	//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes	var angle = 0;	function update()	{	angle += 0.01;	for(var i = 0; i < mp; i++)	{	var p = particles[i];	//Updating X and Y coordinates	//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards	//Every particle has its own density which can be used to make the downward movement different for each flake	//Lets make it more random by adding in the radius	p.y += Math.cos(angle+p.d) + 1 + p.r/2;	p.x += Math.sin(angle) * 2;	//Sending flakes back from the top when it exits	//Lets make it a bit more organic and let flakes enter from the left and right also.	if(p.x > W+5 || p.x < -5 || p.y > H)	{	if(i%3 > 0) //66.67% of the flakes	{	particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};	}	else	{	//If the flake is exitting from the right	if(Math.sin(angle) > 0)	{	//Enter from the left	particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};	}	else	{	//Enter from the right	particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};	}	}	}	}	}	//animation loop	setInterval(draw, 33);
}
Html5-canvas-snow-effect - Script Codes
Html5-canvas-snow-effect - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3
Size 2,609 Kb
Views 42,483
Do you need developer help for Html5-canvas-snow-effect?

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!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Receipt with result
Emploee Tree
Animated evaluation pen with a tooltip
Menu with a featured tooltip that has an animation from Jumping Animation pen
Css3-image-slider-with-stylized-thumbnails
Tooltip
Responsive Text Area with timer, counter and history
CSS3 Animation
Notepad pen
Responsive Menu with sub menu- CSS3 animation, simple jquery
Create amazing blog posts with AI!

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!