CSS
body {
background-color: #F24236;
width: 100%;
font-family: 'Cookie', cursive;
}
.container {
position: absolute;
top: 90px; left: 180px;
}
#days {
font-size: 50px;
color: #FFF;
text-align: center;
letter-spacing: 3px;
}
.drop {
position: absolute;
top: 0;
z-index: -1;
opacity: 0;
}
.snow {
height: 8px;
width: 8px;
border-radius: 100%;
background-color: #FFF;
box-shadow: 0 0 10px #FFF
}
.animate {
animation: falling 8.5s infinite ease-in;
}
@keyframes falling {
0% {top: 0; opacity: 1;}
100% {top: 1500px; opacity: 0}
}
JAVASCRIPT
myDate=new Date();
xmas=Date.parse("Dec 25, "+myDate.getFullYear())
today=Date.parse(myDate)
daysToChristmas=Math.round((xmas-today)/(1000*60*60*24))
if (daysToChristmas==0)
$('#days').text("It's Christmas!! Merry Christmas!");
if (daysToChristmas<0)
$('#days').text("Christmas was "+-1*(daysToChristmas)+" days ago.");
if (daysToChristmas>0)
$('#days').text(daysToChristmas+" days to Christmas!");
//make snow
snowDrop(150, randomInt(1035, 1280));
snow(150, 150);
function snow(num, speed) {
if (num > 0) {
setTimeout(function () {
$('#drop_' + randomInt(1, 250)).addClass('animate');
num--;
snow(num, speed);
}, speed);
}
};
function snowDrop(num, position) {
if (num > 0) {
var drop = '<div class="drop snow" id="drop_' + num + '"></div>';
$('body').append(drop);
$('#drop_' + num).css('left', position);
num--;
snowDrop(num, randomInt(60, 1280));
}
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
