Skip to content

Instantly share code, notes, and snippets.

@TerryMooreII

TerryMooreII/README.md

Created May 13, 2014 20:25
Show Gist options
  • Save TerryMooreII/d56c0ae44bf402204c86 to your computer and use it in GitHub Desktop.
Save TerryMooreII/d56c0ae44bf402204c86 to your computer and use it in GitHub Desktop.
Download ZIP
JS/CSS Rain
Raw
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>
Raw
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);
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment