LESS
body,
html {
width: 100%;
height: 100%;
}
.no-thunder{
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background: url('https://goo.gl/OrZQVA') no-repeat center;
}
#content{
position : relative;
width : 1200px;
min-height : 100%;
padding: 0;
margin:0;
.rain{
background : white;
position : absolute;
min-height : 16px;
width : 1.3px;
top : 0;
border-radius : 3px;
opacity: 0.7;
}
}
@keyframes raindrop {
0% {top: 10%;}
15% {top: 10%;}
25% {top: 20%;}
35% {top: 30%;}
45% {top: 40%;}
55% {top: 50%;}
65% {top: 60%;}
75% {top: 70%;}
85% {top: 80%;}
100% {top: 95%;}
}
.rain-d-0 {
animation-duration: 0.9s;
animation-name: raindrop;
animation-iteration-count: infinite;
animation-direction: linear;
}
.rain-d-6{
animation-duration: 0.6s;
animation-name: raindrop;
animation-iteration-count: infinite;
animation-direction: linear;
}
.rain-d-4{
animation-duration: 0.4s;
animation-name: raindrop;
animation-iteration-count: infinite;
animation-direction: linear;
}
.thunder{
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
JAVASCRIPT
$(document).ready(function(){
var ran;
var rainRandomPos= [1000,1111,100,120,200,499,828,65,239,734,110];
setInterval(function(){
$('#content').html("");
ran = generateRan();
var left = 0;
var maxWidth = $('#content').width();
Array.prototype.map.call(ran,function(value){
left = maxWidth-shuffle(rainRandomPos)[0];
var _node = document.createElement('div');
_node.className = 'rain';
$(_node).addClass('rain-d-'+shuffle([0,6,4])[0]);
$(_node).css('left',left+'px');
$('#content').append(_node);
});
}, 442);
/*setInterval(function(){
$('#content').toggleClass('thunder');
},800)*/
});
function generateRan(){
var max = 20;
var random = [];
for(var i = 0;i<max ; i++){
var temp = Math.floor(Math.random()*max);
if(random.indexOf(temp) == -1){
random.push(temp);
}
else
i--;
}
return random;
}
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
1 Response