Skip to content

Instantly share code, notes, and snippets.

@ivuorinen
Created January 30, 2018 22:06
Show Gist options
  • Save ivuorinen/e9a090b519981ab807b1a589d0f1461a to your computer and use it in GitHub Desktop.
Save ivuorinen/e9a090b519981ab807b1a589d0f1461a to your computer and use it in GitHub Desktop.
heartRain.html
<!DOCTYPE html>
<html>
<head>
<title>heartrain</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
if(!image_urls) {
var image_urls = Array()
}
if(!flash_urls) {
var flash_urls = Array()
}
image_urls['rain'] = "data:image/png;base64,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";
jQuery(document).ready(function(){
var c = jQuery(window).width();
var d = jQuery(window).height();
var e = function(a, b) {
return Math.round(a+(Math.random()*(b-a)))
};
var f = function (a) {
setTimeout(function(){
a.css({
left: e(0,c)+'px',
top:'-30px',
display:'block',
opacity:'0.' + e(10,100)
}).animate({
top:(d-10)+'px'
}, e(7500, 8000), function() {
jQuery(this).fadeOut('slow', function() {
f(a)
})
})
}, e(1, 8000))
};
jQuery('<div></div>').attr('id','rainDiv').css({
position:'fixed',
width:(c-20)+'px',
height:'1px',
left:'0px',
top:'-5px',
display:'block'
}).appendTo('body');
for (var i=1;i<=20;i++) {
var g = jQuery('<img/>').attr('src', image_urls['rain']).css({
position: 'absolute',
left: e(0,c)+'px',
top: '-30px',
display: 'block',
opacity: '0.' + e(10,100),
'margin-left': 0
}).addClass('rainDrop').appendTo('#rainDiv');
f(g);
g=null
};
var h=0;
var j=0;
jQuery(window).resize(function() {
c=jQuery(window).width();
d=jQuery(window).height()
})
});
</script>
</head>
<body>
<h2>heartrain</h2>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment