JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="snowingScreen"></div>
</body>
CSS
body{
background:#ccc;
}
#snowingScreen {
text-align:center;
height:0;
width:0;
}
html, body{
margin:0;
padding:0;
overflow-y: auto;
overflow-x:hidden;
}
.snow{
color:white;
width:10px;
height:10px;
z-index:999999999;
}
#bottom_image {
position:relative;
bottom:0px;
}
JavaScript
// window.setInterval(generateSnow, 0);
var windowHeight = jQuery(document).height();
var windowWidth = jQuery(window).width();
function generateSnow() {
for (i = 0; i < 4; i++) {
var snowTop = Math.floor(Math.random() * (windowHeight));
snowTop = 0;
var snowLeft = Math.floor(Math.random() * (windowWidth - 2));
var imageSize = Math.floor(Math.random() * 20);
jQuery('body').append(
jQuery('<div />')
.addClass('snow')
.css('top', snowTop)
.css('left', snowLeft)
.css('position', 'absolute')
.html('*')
);
}
}
function snowFalling() {
jQuery('.snow').each(function(key, value) {
if (parseInt(jQuery(this).css('top')) > windowHeight - 80) {
jQuery(this).remove();
}
var fallingSpeed = Math.floor(Math.random() * 1 - 1);
var movingDirection = Math.floor(Math.random() * 2);
var currentTop = parseInt(jQuery(this).css('top'));
var currentLeft = parseInt(jQuery(this).css('left'));
jQuery(this).css('top', currentTop + fallingSpeed);
if (movingDirection === 0) {
jQuery(this).css('bottom', currentLeft + fallingSpeed);
} else {
jQuery(this).css('bottom', currentLeft + -(fallingSpeed));
}
});
}
window.setInterval(snowFalling, 15);
window.setInterval(generateSnow, 1000);