Let it snow, let it snow, code the snow.

Developer
Darryl Huffman
Size
2,884 Kb
Views
4,048
  1. Let it snow, let it snow, code the snow. Previews
  2. Let it snow, let it snow, code the snow. HTML Codes
  3. Let it snow, let it snow, code the snow. CSS Codes
  4. Let it snow, let it snow, code the snow. JS Codes

How do I make an let it snow, let it snow, code the snow.?

The forecast didn't tell me this was coming... TODO: Make it a little more interactive.. What is a let it snow, let it snow, code the snow.? How do you make a let it snow, let it snow, code the snow.? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

Let it snow, let it snow, code the snow. Previews
IQ Test

Let it snow, let it snow, code the snow. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Let it snow, let it snow, code the snow.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- NOT NEEDED -->
<div id="snowman"><div id="face"></div></div>
<div id="lis"> <p>Let it snow,</p> <p>let it snow,<p> <p>code the snow.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Let it snow, let it snow, code the snow. - Script Codes CSS Codes

body{ margin: 0; padding: 0; background-color: rgb(25,25,25); overflow:hidden;
}
/* NOT NEEDED */
#lis{ position: absolute; color: #FFF; font-family: Helvetica, sans-serif; font-size: 20px; letter-spacing: 1px; line-height: 10px; left: 50%; text-align: center; width: 200px; margin-left: -100px; top: 30%;
}
p:nth-child(5n){ font-size: 12px; color: #797979;
}
#snowman{ position: absolute; height: 50px; width: 50px; bottom: -10px; background-color: #FFF; left: 20%; border-radius: 50%;
}
#snowman::before{ position: absolute; height: 34px; width: 34px; bottom: 40px; background-color: #FFF; left: 8px; content: ""; border-radius: 50%;
}
#snowman::after{ position: absolute; height: 24px; width: 24px; bottom: 69px; background-color: #FFF; left: 12px; content: ""; border-radius: 50%;
}
#face{ position: absolute; background-color: #000; width: 3px; height: 3px; left:20px; top: -36px; z-index: 2; content: "";
}
#face::after{ position: absolute; background-color: #000; width: 3px; height: 3px; left:8px; top: 0px; z-index: 2; content: "";
}
#face::before{ position: absolute; background-color: #FF8000; width: 8px; height: 3px; left:4px; top: 6px; z-index: 2; content: "";
}

Let it snow, let it snow, code the snow. - Script Codes JS Codes

var go = true;
if(window.location.hash == '#demo'){	setTimeout(function(){	go = false;	}, 9500);
}
window.onload = function(){ // Creating the Canvas var canvas = document.createElement("canvas"), c = canvas.getContext("2d"), particles = {}, particleIndex = 0, particleNum = 0.5; document.body.appendChild(canvas); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.id = "canvas"; // Setting needed varialbes var xmin = 1; var xmax = canvas.width; var bgcolor = "#CCC"; var canvasheight = canvas.height + 1; var deleteheight = canvas.height + 50; // Setting color which is just one big square c.fillStyle = bgcolor; c.fillRect(0,0,canvas.width,canvas.height); function Particle(){ this.x = Math.floor(Math.random() * (xmax - xmin + 1)) + xmin; this.y = -60; var random1_2 = Math.random() * 4 - 1; if(random1_2 <= 2){ this.vx = Math.random() * 0 - 0.5; } else if(random1_2 >= 2){ this.vx = Math.random() * -0 - -0.5; } this.vy = 0; this.gravity = Math.random() * 9 - 6; this.life = 0; this.maxlife = 250; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.size = Math.random() * 9 - 6; this.color = "rgba(255, 255, 255, 1)"; } Particle.prototype.draw = function(){	this.x += this.vx;	this.y += this.vy;	if(this.x > canvas.width || this.y > deleteheight){	delete particles[this.id];	} if(this.y >= canvasheight){ this.life++; this.vy = 0; this.vx = 0; this.y = canvasheight; } this.vy = this.gravity;	c.fillStyle = this.color; if(this.life == this.maxlife){ delete particles[this.id]; }	c.fillRect(this.x, this.y, this.size, this.size);	};
// Draw Entity
setInterval(function(){ if(go == true){ c.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < particleNum; i++){ new Particle(); } for(var i in particles){ particles[i].draw(); } }
}, 30);
// End Drawing };
Let it snow, let it snow, code the snow. - Script Codes
Let it snow, let it snow, code the snow. - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 3.5
Size 2,884 Kb
Views 4,048
Do you need developer help for Let it snow, let it snow, code the snow.?

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!

Darryl Huffman (darrylhuffman) Script Codes
Name
Hot Arrrr Balloon.
LightBulb
Spilled Paint v2
A Different Clock
Simple SVG Charts
Fur
BLACKHOLE - A Canvas Experiment
Spilled Galaxy
A Perfect Orbit
Orbit
Create amazing love letters 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!