Rain Background

Rain Background

by Nirvanachain

CSS

body {
  background:#0D343A;
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
  overflow:hidden;
}
.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
  width:1px;
  height:89px;
  position: absolute;
  bottom:200px;
  -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
  to {margin-top:900px;}
}
@-moz-keyframes fall {
  to {margin-top:900px;}
}

JavaScript

(function() {
  'use strict';
  
  var numOfDrops = 900;
  function randRange(minNum, maxNum) {
    return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
  }
  function createRainDrop(num) {
    var div = document.createElement('div');
    div.className = 'drop';
    div.setAttribute('id', 'drop' + num)
    return div;
  }
  function makeItRain() {
    for (var i = 0; i < numOfDrops; i++) {
      var dropLeft = randRange(0, 1600);
      var dropTop = randRange(-1000, 1400);
      document.querySelector('body').appendChild(createRainDrop(i));
      document.querySelector('#drop' + i).style.left = dropLeft;
      document.querySelector('#drop' + i).style.top = dropTop;
    }
  }
  makeItRain();
})();