Skip to content

Instantly share code, notes, and snippets.

@ThomazPom

ThomazPom/NiceSnow.html

Created December 13, 2021 17:13
Show Gist options
  • Save ThomazPom/c773bb997a07d58d9693f775523946cd to your computer and use it in GitHub Desktop.
Save ThomazPom/c773bb997a07d58d9693f775523946cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
NiceSnow.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
body{
background-color:#000048;
color:white;
}
@keyframes example {
from {top: 0px;margin-left:0px}
to {top:100vh;;margin-left:100px}
}
.snowflake{
width:1px;
height:1px;
position:fixed;
top:0px;
left:10px;
background-color:white;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</style>
<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
let count=0;
let max = 250;
let time=10;
let interval=setInterval(x=>{
count++;
if(count>=max){
clearInterval(interval);
}
let span = document.createElement("span");
span.setAttribute("class","snowflake");
span.style.left=getRandomInt(0,100)+"vw"
span.style.animationDuration=getRandomInt(4,30)+"s"
document.body.appendChild(span);
//span.style.marginTop="95%";
},time)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment