Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/jsbin.nerey.html

Created March 4, 2014 17:11
Show Gist options
  • Save omniosi/9350883 to your computer and use it in GitHub Desktop.
Save omniosi/9350883 to your computer and use it in GitHub Desktop.
Download ZIP
simple banner animation with RaphaelJS. not realistic as RaphaelJS library is 91K at its smallest and iab banner size spec is 40K
Raw
jsbin.nerey.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
Raw
jsbin.nerey.js
Raphael(function(){
var box = Raphael('box',300, 250);
var bk = box.rect(0,0,300,250).attr({fill:'lightblue'});
var img1 = box.rect(0,0,300,250).attr({fill:'black',opacity:0});
var img2 = box.rect(0,0,300,250).attr({fill:'grey',opacity:0});
var img3 = box.rect(0,0,300,250).attr({fill:'lightgrey',opacity:0});
var fade = Raphael.animation({opacity:1},500,'ease-in-out');
img1.animate(fade);
img2.animate(fade.delay(1000));
img3.animate(fade.delay(2000));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment