Skip to content

Instantly share code, notes, and snippets.

@madhugb

madhugb/index.html

Last active December 27, 2015 03:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save madhugb/7261127 to your computer and use it in GitHub Desktop.
Save madhugb/7261127 to your computer and use it in GitHub Desktop.
Download ZIP
Diwali Diya
Raw
index.html
<!DOCTYPE HTML>
<html>
<style>
.link{
text-decoration:none;
color:#666;
font-size:12px;
}
</style>
<script type="text/javascript" src="./jquery.js"></script>
<body>
<div style="text-align:center;width:100%;">
<hr/>
<!-- A div with id diya -->
<div id="diya" style="width:300px;overflow:hidden;margin:0px auto;"></div>
<hr/>
<h3 style="margin:0px auto;width:200px;text-align:center;">Happy Diwali</h3>
<br><br>
<span style="color:#808080;font-size:12px;font-family:inherit;"><a href="http://madspace.me/diwali/">Demo</a></span>
</div>
<style>
/*
* Animated keyframe for diya
*/
@-webkit-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -504px; }
}
@-moz-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -504px; }
}
@-ms-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -504px; }
}
@-o-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -504px; }
}
@keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -504px; }
}
</style>
<script>
$(document).ready(function(){
var box = $('#diya'), // get the diya box to put
w = $('#diya').width(), // calculate the width of the box
c = Math.ceil(w / 40); // calculate the number of diyas to put
box.empty();
for (i=1;i<c;i++) {
var style = 'height:37px;width:40px;float:left;background:url(http://madspace.me/diwali/sprite.png);display:block;overflow:hidden;-webkit-animation: play 2.5s steps(14) infinite;-moz-animation: play 2s steps(14) infinite;-ms-animation: play 2s steps(14) infinite;-o-animation: play 2s steps(14) infinite;animation: play 2s steps(14) infinite;';
// add a random delay to each keyframe so that the animation triggers in random manner
var r = Math.random()*5;
style += '-moz-animation-delay: '+r+'s;';
style += '-webkit-animation-delay: '+r+'s;';
style += '-o-animation-delay: '+r+'s;';
style += '-ms-animation-delay: '+r+'s;';
style += 'animation-delay: '+r+'s;';
// append diya to box with animation
box.append($('<div>',{'style':style}));
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment