Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
1b875df8 by Dan Rempel
Options

EY slingshot increase to full height. update legal date

1 parent 815d4290
Inline Side-by-side
Showing 7 changed files with 14 additions and 287 deletions
<!DOCTYPE html>
<head>
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=320,height=480">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#border{
position: relative;
width: 300px;
height: 600px;
border: 1px solid #000000; /*#55565A*/
background-color: #282828;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background: url(assets/background.jpg) no-repeat #35552b 0px 120px;
/* background: url(guide2.png); */
}
#logo{
position: absolute;
width: 69px;
height: auto;
right: 12px;
bottom:26px;
opacity: 0;
}
#legal{
position: absolute;
width: 180px;
height: auto;
left: 9px;
bottom:6px;
}
/*
#ey-frame{
position: absolute;
left: 32px;
top:29px;
z-index: 9;
}
*/
#ey-frame{
position: absolute;
left: 19px;
top:69px;
z-index: 9;
}
#txt1, #txt2 {
position: absolute;
width: 194px;
height: auto;
left: 50px;
top:150px;
z-index: 10;
opacity: 0;
}
#txt2{
left: 44px;
top:145px;
width: 211px;
}
#mask{
position: absolute;
left: 87px;
top:440px;
}
#arm{
position: absolute;
left: 0px;
top: 120px;
}
#dot-1, #dot-2, #dot-3, #dot-txt{
position: absolute;
left: -12px;
top: 121px; /* 104px */
width:12px;
height: 12px;
background-color: #FFD400;
}
#dot-txt{
left:-12px;
top:148px;
opacity: 1;
}
#cta{
position: absolute;
left: 25px;
top:193px;
width:207px;
height: auto;
opacity: 0;
}
#tag1, #tag2, #tag3{
position: absolute;
left: 25px;
top:146px;
width:212px;
height: auto;
opacity: 0;
}
#tag2{
width:198px;
}
#tag3{
width:242px;
}
#tag-mask{
position: absolute;
width:0;
height:100%;
overflow: hidden;
}
#hash{
position: absolute;
left: 23px;
top:241px;
width:167px;
height: auto;
opacity: 0;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<div id="border">
<img id="arm" src="assets/arm.png" alt="arm">
<img id="mask" src="assets/mask.png" alt="mask">
<img id="logo" src="assets/logo.png" alt="logo">
<img id="legal" src="assets/legal.png" alt="legal">
<img id="txt1" src="assets/txt1.png" alt="txt1">
<img id="txt2" src="assets/txt2.png" alt="txt2">
<div id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>
<img id="cta" src="assets/cta.png" alt="cta">
<div id="tag-mask">
<img id="tag1" src="assets/tag1.png" alt="tag1">
<img id="tag2" src="assets/tag2.png" alt="tag2">
<img id="tag3" src="assets/tag3.png" alt="tag3">
</div>
<div id="dot-txt"></div>
<img id="hash" src="assets/hash.png" alt="hash">
<!--
-->
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script src="assets/DrawSVGPlugin.min.js"></script>
<script src="assets/ey-frame-svg-1.0.3.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
var d=.4;
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#arm", .8, {left:-20, top:129, ease:Power1.easeInOut, delay:.2 });
var myeySvg = initEySvgFrame(12, 259, 218); //frame line weight, width, height
document.getElementById("border").appendChild(myeySvg);
animateEyFrame(1);
animateGradient(.2);
tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
//animateFill(3.3);
tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
animateEyReverse(10);
// phase 2
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:1.25 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:64, opacity:1, ease:Power3.easeOut, delay:0});
tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-2", d, {left:-12}, {left:44, ease:Power3.easeOut, delay:0});
tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
tl.fromTo("#dot-3", d, {left:-12}, {left:24, ease:Power3.easeOut, delay:0});
tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
stage1();
</script>
</body>
</html>
\ No newline at end of file
......@@ -60,17 +60,15 @@
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background: url(assets/background.jpg) no-repeat black;
background: url(assets/background.jpg) no-repeat #35552b;
/* background: url(guide2.png); */
}
#logo{
position: absolute;
width: 69px;
height: auto;
/* right: 12px;
bottom:26px; */
right: 16px;
bottom:16px;
right: 12px;
bottom:26px;
opacity: 0;
}
#legal{
......@@ -91,7 +89,7 @@
#ey-frame{
position: absolute;
left: 19px;
top:29px;
top:49px;
z-index: 9;
}
#txt1, #txt2 {
......@@ -99,19 +97,19 @@
width: 194px;
height: auto;
left: 50px;
top:110px;
top:130px;
z-index: 10;
opacity: 0;
}
#txt2{
left: 44px;
top:105px;
top:125px;
width: 211px;
}
#mask{
position: absolute;
left: 87px;
top:320px;
left: 74px;
top:369px;
}
#arm{
position: absolute;
......@@ -121,20 +119,20 @@
#dot-1, #dot-2, #dot-3, #dot-txt{
position: absolute;
left: -12px;
top: 81px; /* 104px */
top: 121px; /* 104px */
width:12px;
height: 12px;
background-color: #FFD400;
}
#dot-txt{
left:-12px;
top:108px;
top:148px;
opacity: 1;
}
#cta{
position: absolute;
left: 25px;
top:153px;
top:193px;
width:207px;
height: auto;
opacity: 0;
......@@ -142,7 +140,7 @@
#tag1, #tag2, #tag3{
position: absolute;
left: 25px;
top:106px;
top:146px;
width:212px;
height: auto;
opacity: 0;
......@@ -162,7 +160,7 @@
#hash{
position: absolute;
left: 23px;
top:201px;
top:241px;
width:167px;
height: auto;
opacity: 0;
......@@ -216,7 +214,7 @@
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
tl.to("#arm", .8, {left:-9, top:6, ease:Power1.easeInOut, delay:.2 });
var myeySvg = initEySvgFrame(12, 259, 218); //frame line weight, width, height
document.getElementById("border").appendChild(myeySvg);
......