Skip to content

Instantly share code, notes, and snippets.

@SwarnaKishore

SwarnaKishore/index.html

Created April 15, 2015 17:23
Show Gist options
  • Save SwarnaKishore/12893e6599f8cf6049e3 to your computer and use it in GitHub Desktop.
Save SwarnaKishore/12893e6599f8cf6049e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="rain.css">
<style id="jsbin-css">
html{height:100%;}
body {
margin: 0px;
padding: 0px;
overflow:hidden;}
.drop {
background:#10C5A4;
width:3px;
height:15px;
position: absolute;
bottom:200px;
-webkit-animation: fall .99s linear infinite;
-moz-animation: fall .99s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-3">
<canvas id="myCanvas" width="578" height="200"></canvas>
</div>
<div class="col-lg-3">
<canvas id="myCanvas1" width="478" height="200"></canvas>
</div>
<div class="col-lg-3">
<canvas id="myCanvas2" width="478" height="200"></canvas>
</div>
<section class="rain"></section>
<script id="jsbin-javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// number of drops created.
var nbDrop = 858;
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1600);
var dropTop = randRange(-1000,1400);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
// Make it rain
createRain();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.0.min.js"><\/script>
<link rel="stylesheet" href="rain.css">
</head>
<body>
<div class="row">
<div class="col-lg-3">
<canvas id="myCanvas" width="578" height="200"></canvas>
</div>
<div class="col-lg-3">
<canvas id="myCanvas1" width="478" height="200"></canvas>
</div>
<div class="col-lg-3">
<canvas id="myCanvas2" width="478" height="200"></canvas>
</div>
<section class="rain"></section>
</body>
</html> </script>
<script id="jsbin-source-css" type="text/css">html{height:100%;}
body {
margin: 0px;
padding: 0px;
overflow:hidden;}
.drop {
background:#10C5A4;
width:3px;
height:15px;
position: absolute;
bottom:200px;
-webkit-animation: fall .99s linear infinite;
-moz-animation: fall .99s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript"> var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// number of drops created.
var nbDrop = 858;
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1600);
var dropTop = randRange(-1000,1400);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
// Make it rain
createRain();</script></body>
</html>
Raw
jsbin.pesozafaxu.css
html{height:100%;}
body {
margin: 0px;
padding: 0px;
overflow:hidden;}
.drop {
background:#10C5A4;
width:3px;
height:15px;
position: absolute;
bottom:200px;
-webkit-animation: fall .99s linear infinite;
-moz-animation: fall .99s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
Raw
jsbin.pesozafaxu.js
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#92E5FC';
context.fill();
context.strokeStyle = '#09C4F7';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// number of drops created.
var nbDrop = 858;
// function to generate a random number range.
function randRange( minNum, maxNum) {
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
// function to generate drops
function createRain() {
for( i=1;i<nbDrop;i++) {
var dropLeft = randRange(0,1600);
var dropTop = randRange(-1000,1400);
$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);
}
}
// Make it rain
createRain();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment