TerryMooreII/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Css and Js Rain
http://jsbin.com/diraqoni/3/edit

  
## index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>


</body>
</html>

## rain.js
var rainSpeed = {
  dizzle: 1000,
  light: 500,
  steady:50,
  storm: 10
};

var random = function(time){
  return Math.random() * time + 1;
};

setInterval(function(){

 var drop =
     $('<div class="raindrop fall"></div>')
     .appendTo('body');

  var size = random(5);

  drop
    .css('left', random($('body').width()))
    .width(size)
    .height(size + 4);

}, rainSpeed.steady);

## style.css
body{
  height:100%;
  /* padding-top:50px; */
}


.raindrop{
  position:absolute;
  top:-10px;
  border-radius:30px;
  background:#333;
  opacity:.5;
}

.fall{
   -webkit-animation: fall 1.5s linear;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes fall
{
  from{
    top:0px;

  }
  to{
    top:100%;
    display:block;
  }
}


html {
  background: url(http://themancunianjournalist.files.wordpress.com/2012/07/rainy_day_002_by_nayein1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>



	</body>
	</html>
	var rainSpeed = {
	dizzle: 1000,
	light: 500,
	steady:50,
	storm: 10
	};

	var random = function(time){
	return Math.random() * time + 1;
	};

	setInterval(function(){

	var drop =
	$('<div class="raindrop fall"></div>')
	.appendTo('body');

	var size = random(5);

	drop
	.css('left', random($('body').width()))
	.width(size)
	.height(size + 4);

	}, rainSpeed.steady);
	body{
	height:100%;
	/* padding-top:50px; */
	}


	.raindrop{
	position:absolute;
	top:-10px;
	border-radius:30px;
	background:#333;
	opacity:.5;
	}

	.fall{
	-webkit-animation: fall 1.5s linear;
	}


	/* Chrome, Safari, Opera */
	@-webkit-keyframes fall
	{
	from{
	top:0px;

	}
	to{
	top:100%;
	display:block;
	}
	}


	html {
	background: url(http://themancunianjournalist.files.wordpress.com/2012/07/rainy_day_002_by_nayein1.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}