Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
d26d4251 by Dan Rempel
Options

HHF adjust timing of words, fade up img, clicktag becomes IAB standard

1 parent d6e584b3
Inline Side-by-side
Showing 4 changed files with 28 additions and 16 deletions
......@@ -5,11 +5,10 @@
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
var clickTag = "https://huntsvillehospitalfoundation.ca";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
......@@ -22,13 +21,14 @@
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>
......@@ -55,12 +55,12 @@
position: absolute;
width: 300px;
height: 600px;
border: 1px solid #55565A;
background-color: #282828;
border: 1px solid #3191b2;
background-color: #017299;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
background: url(img-50.jpg);
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
......@@ -71,6 +71,9 @@
width: 270px;
height: auto;
}
#img{
opacity: 0;
}
.txt1 {
position: absolute;
......@@ -121,7 +124,12 @@
#txt2b{
top:88px;
left: 40px;
width: 192px;
width: 53px;
}
#txt2ba{
top:87px;
left: 105px;
width: 129px;
}
#txt2c{
top:129px;
......@@ -149,7 +157,6 @@
width: 228px;
}
#cta-btn{
position: absolute;
left: 29px;
......@@ -186,10 +193,11 @@
</head>
<body>
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<!-- <a href="javascript:eyeBuild.doClick(0)" class="cta"> -->
<a href="javascript:window.open(clickTag, '_blank');" class="cta">
<div id="border">
<img id="img" src="img-50.jpg" alt="A young boy and young girl happily jumping from a dock into a lake.">
<img id="logo" src="logo_1@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="txt1a" class="txt txt1" alt="Laughing," src="txt1-laughing@2x.png">
......@@ -198,10 +206,11 @@
<img id="txt1d" class="txt txt1" alt="wake-jumping," src="txt1-wakejumping@2x.png">
<img id="txt1e" class="txt txt1" alt="climbing?" src="txt1-climbing@2x.png">
<div id="blue"></div>
<img id="txt2a" class="txt txt2" alt="We're ready" src="txt2-were@2x.png">
<img id="txt2b" class="txt txt2" alt="with mending," src="txt2-withmending@2x.png">
<img id="txt2b" class="txt txt2" alt="with" src="txt2-with@2x.png">
<img id="txt2ba" class="txt txt2" alt="mending," src="txt2-mending@2x.png">'
<img id="txt2c" class="txt txt2" alt="fixing," src="txt2-fixing@2x.png">
<img id="txt2d" class="txt txt2" alt="healing," src="txt2-healing@2x.png">
<img id="txt2e" class="txt txt2" alt="x-raying," src="txt2-xraying@2x.png">
......@@ -235,6 +244,8 @@
var d=.35;
tl.to("#img", d, {opacity:1, ease:Power1.easeOut, delay:0 });
tl.to("#txt1a", d, {opacity:1, ease:Power1.easeOut, delay:d });
tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt1c", d, {opacity:1, ease:Power1.easeInOut, delay:d });
......@@ -244,15 +255,16 @@
// phase 2
tl.to(".txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2 });
tl.to("#blue", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#img", d, {opacity:0, ease:Power1.easeInOut, delay:0 });
tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-d });
tl.to("#txt2a", d, {opacity:1, ease:Power1.easeOut, delay:0 });
tl.to("#txt2b", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2b", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
tl.to("#txt2ba", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2c", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2d", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2d", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
tl.to("#txt2e", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2f", d, {opacity:1, ease:Power1.easeInOut, delay:d });
tl.to("#txt2f", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
tl.to("#txt2g", d, {opacity:1, ease:Power1.easeInOut, delay:d });
......