Skip to content

Instantly share code, notes, and snippets.

@fernandocomet

fernandocomet/gist:7908951

Created December 11, 2013 11:41
Show Gist options
  • Save fernandocomet/7908951 to your computer and use it in GitHub Desktop.
Save fernandocomet/7908951 to your computer and use it in GitHub Desktop.
Download ZIP
html Banner from Scratch
Raw
gistfile1.txt
<html>
<head>
<!-- ADRIME SCREENAD META DATA (don't edit/remove) -->
<!-- SCRVERSION: screenad_interface_1.0.3 -->
<!-- SCRFORMAT: banner -->
<!-- SCRWIDTH: 300 -->
<!-- SCRHEIGHT: 250 -->
<script type="text/javascript" src="http://scripts.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>
<style>
body
{
background-color:#000;
}
#demo
{
width: 300px;
height: 250px;
background-color: #333;
}
#easeWrapper
{
width: 300px;
height: 250px;
}
#tira
{
position: absolute;
width: 5100px;
height: 250px;
top: 0px;
background: url(tirastress.png) no-repeat;
}
#logo
{
position: absolute;
width: 300px;
height: 250px;
background: url(estres.png) no-repeat;
}
#fondo
{
position: absolute;
width: 300px;
height: 250px;
background: url(blanco.png) no-repeat;
opacity: 0;
}
</style>
</script>
</head>
<body>
<div id="demo">
<div id="easeWrapper">
<div id="fondo"></div>
<div id="logo"></div>
<div id="tira"></div>
</div>
</div>
<script type="text/javascript" src="CSSPlugin.min.js"></script>
<!--- Be sure to load EasePack if you want to use a specific ease -->
<script type="text/javascript" src="EasePack.min.js"></script>
<script type="text/javascript" src="TweenLite.min.js"></script>
<script>
window.onload = function() {
var demo = document.getElementById("demo");
TweenLite.to("demo", 0, {delay:0, backgroundColor:"#333"});
TweenLite.to("demo", 0.9, {delay:2, backgroundColor:"#ec6e7c"});
TweenLite.to("demo", 0.9, {delay:4, backgroundColor:"#14a294"});
TweenLite.to("demo", 0.9, {delay:6, backgroundColor:"#f49604"});
TweenLite.to("demo", 0.9, {delay:8, backgroundColor:"#ec5224"});
TweenLite.to("demo", 0.9, {delay:10, backgroundColor:"#2caadc"});
TweenLite.to("demo", 0.9, {delay:12, backgroundColor:"#84a634"});
TweenLite.to("demo", 0.9, {delay:14, backgroundColor:"#c42a34"});
TweenLite.to("demo", 0.9, {delay:16, backgroundColor:"#644e3c"});
TweenLite.to("demo", 0.9, {delay:18, backgroundColor:"#747274"});
TweenLite.to("demo", 0.9, {delay:20, backgroundColor:"#04622c"});
TweenLite.to("demo", 0.9, {delay:22, backgroundColor:"#e44e4c"});
TweenLite.to("demo", 0.9, {delay:24, backgroundColor:"#cc3e74"});
TweenLite.to("demo", 0.9, {delay:26, backgroundColor:"#842a3c"});
TweenLite.to("demo", 0.9, {delay:28, backgroundColor:"#e4b244"});
TweenLite.to("demo", 0.9, {delay:30, backgroundColor:"#bc3674"});
TweenLite.to("demo", 0.9, {delay:32, backgroundColor:"#ec5224"});
TweenLite.to("demo", 0.9, {delay:34, backgroundColor:"#142a4c"});
TweenLite.to("demo", 0.9, {delay:36, backgroundColor:"#333"});
var fondo = document.getElementById("fondo");
var logo = document.getElementById("logo");
TweenLite.to(logo, 2, {left:"0px", opacity:0});
TweenLite.to(logo, 2, {delay:36, opacity:1, onComplete:completeHandler});
function completeHandler() {
onload();
}
var tira = document.getElementById("tira");
TweenLite.to(tira, 0, {left:"300px", delay:0, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"0px", delay:2, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-300px", delay:4, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-600px", delay:6, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-900px", delay:8, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-1200px", delay:10, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-1500px", delay:12, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-1800px", delay:14, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-2100px", delay:16, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-2400px", delay:18, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-2700px", delay:20, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-3000px", delay:22, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-3300px", delay:24, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-3600px", delay:26, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-3900px", delay:28, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-4200px", delay:30, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-4500px", delay:32, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-4800px", delay:34, ease:Bounce.easeOut});
TweenLite.to(tira, 0.9, {left:"-5100px", delay:36, ease:Bounce.easeOut});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment