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
1 <!DOCTYPE html>
2 <head>
3
4 </script>
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=320,height=480">
8 <!--
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://thecommonwell.ca/wave";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23
24 </script>
25 -->
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
32
33
34 <style>
35
36 body{
37 margin: 0;
38 padding: 0;
39 width: 300px;
40 height: 600px;
41 line-height: 1.2;
42 font-size: 27px;
43 letter-spacing: .4;
44 color: #CD040B;
45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
47 font-style: normal;
48 }
49
50 a{
51 text-decoration: none;
52 color: inherit;
53 }
54 #border{
55 position: relative;
56 width: 300px;
57 height: 600px;
58 border: 1px solid #000000; /*#55565A*/
59 background-color: #282828;
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 background: url(assets/background.jpg) no-repeat #35552b 0px 120px;
64 /* background: url(guide2.png); */
65 }
66 #logo{
67 position: absolute;
68 width: 69px;
69 height: auto;
70 right: 12px;
71 bottom:26px;
72 opacity: 0;
73 }
74 #legal{
75 position: absolute;
76 width: 180px;
77 height: auto;
78 left: 9px;
79 bottom:6px;
80 }
81 /*
82 #ey-frame{
83 position: absolute;
84 left: 32px;
85 top:29px;
86 z-index: 9;
87 }
88 */
89 #ey-frame{
90 position: absolute;
91 left: 19px;
92 top:69px;
93 z-index: 9;
94 }
95 #txt1, #txt2 {
96 position: absolute;
97 width: 194px;
98 height: auto;
99 left: 50px;
100 top:150px;
101 z-index: 10;
102 opacity: 0;
103 }
104 #txt2{
105 left: 44px;
106 top:145px;
107 width: 211px;
108 }
109 #mask{
110 position: absolute;
111 left: 87px;
112 top:440px;
113 }
114 #arm{
115 position: absolute;
116 left: 0px;
117 top: 120px;
118 }
119 #dot-1, #dot-2, #dot-3, #dot-txt{
120 position: absolute;
121 left: -12px;
122 top: 121px; /* 104px */
123 width:12px;
124 height: 12px;
125 background-color: #FFD400;
126 }
127 #dot-txt{
128 left:-12px;
129 top:148px;
130 opacity: 1;
131 }
132 #cta{
133 position: absolute;
134 left: 25px;
135 top:193px;
136 width:207px;
137 height: auto;
138 opacity: 0;
139 }
140 #tag1, #tag2, #tag3{
141 position: absolute;
142 left: 25px;
143 top:146px;
144 width:212px;
145 height: auto;
146 opacity: 0;
147 }
148 #tag2{
149 width:198px;
150 }
151 #tag3{
152 width:242px;
153 }
154 #tag-mask{
155 position: absolute;
156 width:0;
157 height:100%;
158 overflow: hidden;
159 }
160 #hash{
161 position: absolute;
162 left: 23px;
163 top:241px;
164 width:167px;
165 height: auto;
166 opacity: 0;
167 }
168 </style>
169 </head>
170
171 <body>
172 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
173 <a href="javascript:eyeBuild.doClick(0)" class="cta">
174 <div id="border">
175 <img id="arm" src="assets/arm.png" alt="arm">
176 <img id="mask" src="assets/mask.png" alt="mask">
177 <img id="logo" src="assets/logo.png" alt="logo">
178 <img id="legal" src="assets/legal.png" alt="legal">
179 <img id="txt1" src="assets/txt1.png" alt="txt1">
180 <img id="txt2" src="assets/txt2.png" alt="txt2">
181
182
183 <div id="dot-1"></div>
184 <div id="dot-2"></div>
185 <div id="dot-3"></div>
186
187 <img id="cta" src="assets/cta.png" alt="cta">
188 <div id="tag-mask">
189 <img id="tag1" src="assets/tag1.png" alt="tag1">
190 <img id="tag2" src="assets/tag2.png" alt="tag2">
191 <img id="tag3" src="assets/tag3.png" alt="tag3">
192 </div>
193 <div id="dot-txt"></div>
194 <img id="hash" src="assets/hash.png" alt="hash">
195
196 <!--
197
198 -->
199
200 </div>
201 </a>
202
203 <!-- GREENSOCK-->
204 <script src="assets/TweenMax.min.js"></script>
205 <script src="assets/DrawSVGPlugin.min.js"></script>
206 <script src="assets/ey-frame-svg-1.0.3.min.js"></script>
207
208 <script>
209
210 function stage1(){
211 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
212
213 var d=.4;
214
215
216 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
217 tl.to("#arm", .8, {left:-20, top:129, ease:Power1.easeInOut, delay:.2 });
218
219 var myeySvg = initEySvgFrame(12, 259, 218); //frame line weight, width, height
220 document.getElementById("border").appendChild(myeySvg);
221 animateEyFrame(1);
222 animateGradient(.2);
223
224 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
225 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
226
227 //animateFill(3.3);
228
229 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
230 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
231
232 animateEyReverse(10);
233
234
235 // phase 2
236
237 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:1.25 });
238 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
239 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
240 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:64, opacity:1, ease:Power3.easeOut, delay:0});
241 tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
242
243 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
244 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
245 tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
246 tl.fromTo("#dot-2", d, {left:-12}, {left:44, ease:Power3.easeOut, delay:0});
247 tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
248
249 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
250 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
251 tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
252 tl.fromTo("#dot-3", d, {left:-12}, {left:24, ease:Power3.easeOut, delay:0});
253
254 tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
255 tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
256
257
258
259 console.log( "time: " + tl.totalDuration() );
260 }
261
262 //---------------------
263 stage1();
264
265
266
267 </script>
268
269 </body>
270
271 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -60,17 +60,15 @@ ...@@ -60,17 +60,15 @@
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(assets/background.jpg) no-repeat black; 63 background: url(assets/background.jpg) no-repeat #35552b;
64 /* background: url(guide2.png); */ 64 /* background: url(guide2.png); */
65 } 65 }
66 #logo{ 66 #logo{
67 position: absolute; 67 position: absolute;
68 width: 69px; 68 width: 69px;
69 height: auto; 69 height: auto;
70 /* right: 12px; 70 right: 12px;
71 bottom:26px; */ 71 bottom:26px;
72 right: 16px;
73 bottom:16px;
74 opacity: 0; 72 opacity: 0;
75 } 73 }
76 #legal{ 74 #legal{
...@@ -91,7 +89,7 @@ ...@@ -91,7 +89,7 @@
91 #ey-frame{ 89 #ey-frame{
92 position: absolute; 90 position: absolute;
93 left: 19px; 91 left: 19px;
94 top:29px; 92 top:49px;
95 z-index: 9; 93 z-index: 9;
96 } 94 }
97 #txt1, #txt2 { 95 #txt1, #txt2 {
...@@ -99,19 +97,19 @@ ...@@ -99,19 +97,19 @@
99 width: 194px; 97 width: 194px;
100 height: auto; 98 height: auto;
101 left: 50px; 99 left: 50px;
102 top:110px; 100 top:130px;
103 z-index: 10; 101 z-index: 10;
104 opacity: 0; 102 opacity: 0;
105 } 103 }
106 #txt2{ 104 #txt2{
107 left: 44px; 105 left: 44px;
108 top:105px; 106 top:125px;
109 width: 211px; 107 width: 211px;
110 } 108 }
111 #mask{ 109 #mask{
112 position: absolute; 110 position: absolute;
113 left: 87px; 111 left: 74px;
114 top:320px; 112 top:369px;
115 } 113 }
116 #arm{ 114 #arm{
117 position: absolute; 115 position: absolute;
...@@ -121,20 +119,20 @@ ...@@ -121,20 +119,20 @@
121 #dot-1, #dot-2, #dot-3, #dot-txt{ 119 #dot-1, #dot-2, #dot-3, #dot-txt{
122 position: absolute; 120 position: absolute;
123 left: -12px; 121 left: -12px;
124 top: 81px; /* 104px */ 122 top: 121px; /* 104px */
125 width:12px; 123 width:12px;
126 height: 12px; 124 height: 12px;
127 background-color: #FFD400; 125 background-color: #FFD400;
128 } 126 }
129 #dot-txt{ 127 #dot-txt{
130 left:-12px; 128 left:-12px;
131 top:108px; 129 top:148px;
132 opacity: 1; 130 opacity: 1;
133 } 131 }
134 #cta{ 132 #cta{
135 position: absolute; 133 position: absolute;
136 left: 25px; 134 left: 25px;
137 top:153px; 135 top:193px;
138 width:207px; 136 width:207px;
139 height: auto; 137 height: auto;
140 opacity: 0; 138 opacity: 0;
...@@ -142,7 +140,7 @@ ...@@ -142,7 +140,7 @@
142 #tag1, #tag2, #tag3{ 140 #tag1, #tag2, #tag3{
143 position: absolute; 141 position: absolute;
144 left: 25px; 142 left: 25px;
145 top:106px; 143 top:146px;
146 width:212px; 144 width:212px;
147 height: auto; 145 height: auto;
148 opacity: 0; 146 opacity: 0;
...@@ -162,7 +160,7 @@ ...@@ -162,7 +160,7 @@
162 #hash{ 160 #hash{
163 position: absolute; 161 position: absolute;
164 left: 23px; 162 left: 23px;
165 top:201px; 163 top:241px;
166 width:167px; 164 width:167px;
167 height: auto; 165 height: auto;
168 opacity: 0; 166 opacity: 0;
...@@ -216,7 +214,7 @@ ...@@ -216,7 +214,7 @@
216 214
217 215
218 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 }); 216 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
219 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 }); 217 tl.to("#arm", .8, {left:-9, top:6, ease:Power1.easeInOut, delay:.2 });
220 218
221 var myeySvg = initEySvgFrame(12, 259, 218); //frame line weight, width, height 219 var myeySvg = initEySvgFrame(12, 259, 218); //frame line weight, width, height
222 document.getElementById("border").appendChild(myeySvg); 220 document.getElementById("border").appendChild(myeySvg);
......