jquery-epulse Rain Effect

Rain Effect.html

<div id="rain-container"></div>

Rain Effect.js

var $rain = $('<div>', {
  width: '400px',
  height: '400px'
});
$('#rain-container').append($rain);

var drop = $.ePulse({
  container: $rain,
  speed: 'fast',
  size: [5, 20],
  bgColor: 'blue',
  reverseOpacity: true,
  autoDelete: false,
  forceContainerStyles: true
}, null, function afterAnimation() {
  // rain effect
  this.css('opacity', (Math.floor(Math.random() * 9) + 2) / 10);
  this.animate({
    opacity: 0
  }, 8000, function() {
    this.remove();
  });
});

function getRandomPos() {
  return Math.random() * $rain.width();
}

function startRain() {
  setTimeout(function() {
    drop(getRandomPos(), getRandomPos());
    requestAnimationFrame(startRain)
  }, Math.random() * 100);
}

startRain();

Demo