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 @@ ...@@ -5,11 +5,10 @@
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title> 6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=300,height=600"> 7 <meta name="ad.size" content="width=300,height=600">
8 <!--
9 <script type="text/javascript"> 8 <script type="text/javascript">
10 9
11 // IAB source: modified to allow link testing 10 // IAB source: modified to allow link testing
12 var clickTag = "http://thecommonwell.ca/wave"; 11 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name) 12 function getParameterByName(name)
14 { 13 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); 14 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
...@@ -22,13 +21,14 @@ ...@@ -22,13 +21,14 @@
22 clickTag = getParameterByName('clickTag'); 21 clickTag = getParameterByName('clickTag');
23 22
24 </script> 23 </script>
25 --> 24 <!--
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script> 25 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript"> 26 <script type="text/javascript">
28 window.onload = function() { 27 window.onload = function() {
29 eyeBuild.initialize(); 28 eyeBuild.initialize();
30 } 29 }
31 </script> 30 </script>
31 -->
32 32
33 33
34 <style> 34 <style>
...@@ -55,12 +55,12 @@ ...@@ -55,12 +55,12 @@
55 position: absolute; 55 position: absolute;
56 width: 300px; 56 width: 300px;
57 height: 600px; 57 height: 600px;
58 border: 1px solid #55565A; 58 border: 1px solid #3191b2;
59 background-color: #282828; 59 background-color: #017299;
60 overflow: hidden; 60 overflow: hidden;
61 cursor: pointer; 61 cursor: pointer;
62 box-sizing: border-box; 62 box-sizing: border-box;
63 background: url(img-50.jpg); 63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */ 64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */ 65 /* background-size: 300px 600px ; */
66 } 66 }
...@@ -71,6 +71,9 @@ ...@@ -71,6 +71,9 @@
71 width: 270px; 71 width: 270px;
72 height: auto; 72 height: auto;
73 } 73 }
74 #img{
75 opacity: 0;
76 }
74 77
75 .txt1 { 78 .txt1 {
76 position: absolute; 79 position: absolute;
...@@ -121,7 +124,12 @@ ...@@ -121,7 +124,12 @@
121 #txt2b{ 124 #txt2b{
122 top:88px; 125 top:88px;
123 left: 40px; 126 left: 40px;
124 width: 192px; 127 width: 53px;
128 }
129 #txt2ba{
130 top:87px;
131 left: 105px;
132 width: 129px;
125 } 133 }
126 #txt2c{ 134 #txt2c{
127 top:129px; 135 top:129px;
...@@ -149,7 +157,6 @@ ...@@ -149,7 +157,6 @@
149 width: 228px; 157 width: 228px;
150 } 158 }
151 159
152
153 #cta-btn{ 160 #cta-btn{
154 position: absolute; 161 position: absolute;
155 left: 29px; 162 left: 29px;
...@@ -186,10 +193,11 @@ ...@@ -186,10 +193,11 @@
186 </head> 193 </head>
187 194
188 <body> 195 <body>
189 <a href="javascript:eyeBuild.doClick(0)" class="cta"> 196 <!-- <a href="javascript:eyeBuild.doClick(0)" class="cta"> -->
197 <a href="javascript:window.open(clickTag, '_blank');" class="cta">
190 <div id="border"> 198 <div id="border">
191 199
192 200 <img id="img" src="img-50.jpg" alt="A young boy and young girl happily jumping from a dock into a lake.">
193 <img id="logo" src="logo_1@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here."> 201 <img id="logo" src="logo_1@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
194 202
195 <img id="txt1a" class="txt txt1" alt="Laughing," src="txt1-laughing@2x.png"> 203 <img id="txt1a" class="txt txt1" alt="Laughing," src="txt1-laughing@2x.png">
...@@ -198,10 +206,11 @@ ...@@ -198,10 +206,11 @@
198 <img id="txt1d" class="txt txt1" alt="wake-jumping," src="txt1-wakejumping@2x.png"> 206 <img id="txt1d" class="txt txt1" alt="wake-jumping," src="txt1-wakejumping@2x.png">
199 <img id="txt1e" class="txt txt1" alt="climbing?" src="txt1-climbing@2x.png"> 207 <img id="txt1e" class="txt txt1" alt="climbing?" src="txt1-climbing@2x.png">
200 208
201 <div id="blue"></div>
202 209
203 <img id="txt2a" class="txt txt2" alt="We're ready" src="txt2-were@2x.png"> 210 <img id="txt2a" class="txt txt2" alt="We're ready" src="txt2-were@2x.png">
204 <img id="txt2b" class="txt txt2" alt="with mending," src="txt2-withmending@2x.png"> 211 <img id="txt2b" class="txt txt2" alt="with" src="txt2-with@2x.png">
212 <img id="txt2ba" class="txt txt2" alt="mending," src="txt2-mending@2x.png">'
213
205 <img id="txt2c" class="txt txt2" alt="fixing," src="txt2-fixing@2x.png"> 214 <img id="txt2c" class="txt txt2" alt="fixing," src="txt2-fixing@2x.png">
206 <img id="txt2d" class="txt txt2" alt="healing," src="txt2-healing@2x.png"> 215 <img id="txt2d" class="txt txt2" alt="healing," src="txt2-healing@2x.png">
207 <img id="txt2e" class="txt txt2" alt="x-raying," src="txt2-xraying@2x.png"> 216 <img id="txt2e" class="txt txt2" alt="x-raying," src="txt2-xraying@2x.png">
...@@ -235,6 +244,8 @@ ...@@ -235,6 +244,8 @@
235 var d=.35; 244 var d=.35;
236 245
237 246
247 tl.to("#img", d, {opacity:1, ease:Power1.easeOut, delay:0 });
248
238 tl.to("#txt1a", d, {opacity:1, ease:Power1.easeOut, delay:d }); 249 tl.to("#txt1a", d, {opacity:1, ease:Power1.easeOut, delay:d });
239 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 250 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:d });
240 tl.to("#txt1c", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 251 tl.to("#txt1c", d, {opacity:1, ease:Power1.easeInOut, delay:d });
...@@ -244,15 +255,16 @@ ...@@ -244,15 +255,16 @@
244 // phase 2 255 // phase 2
245 256
246 tl.to(".txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2 }); 257 tl.to(".txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2 });
247 tl.to("#blue", d, {opacity:1, ease:Power1.easeInOut, delay:0 }); 258 tl.to("#img", d, {opacity:0, ease:Power1.easeInOut, delay:0 });
248 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-d }); 259 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-d });
249 260
250 tl.to("#txt2a", d, {opacity:1, ease:Power1.easeOut, delay:0 }); 261 tl.to("#txt2a", d, {opacity:1, ease:Power1.easeOut, delay:0 });
251 tl.to("#txt2b", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 262 tl.to("#txt2b", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
263 tl.to("#txt2ba", d, {opacity:1, ease:Power1.easeInOut, delay:d });
252 tl.to("#txt2c", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 264 tl.to("#txt2c", d, {opacity:1, ease:Power1.easeInOut, delay:d });
253 tl.to("#txt2d", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 265 tl.to("#txt2d", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
254 tl.to("#txt2e", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 266 tl.to("#txt2e", d, {opacity:1, ease:Power1.easeInOut, delay:d });
255 tl.to("#txt2f", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 267 tl.to("#txt2f", d, {opacity:1, ease:Power1.easeInOut, delay:-d });
256 tl.to("#txt2g", d, {opacity:1, ease:Power1.easeInOut, delay:d }); 268 tl.to("#txt2g", d, {opacity:1, ease:Power1.easeInOut, delay:d });
257 269
258 270
......