Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
a2d83c7e by Jeremy Groot
Options

CWL Spring Digital Production 2019

1 parent 372a8eeb
Inline Side-by-side
Showing 80 changed files with 3180 additions and 0 deletions
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 // eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 300px;
84 height: 250px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 300px;
107 height: 250px;
108 border: 1px solid #55565A;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #img {
116 position: absolute;
117 opacity: 0;
118 }
119
120 #copy {
121 position: absolute;
122 bottom:0;
123 width:100%;
124 height:75px;
125 background:white;
126 z-index: 10;
127 }
128
129 #copy img {
130 height:55px;
131 width:auto;
132 position: absolute;
133 left:15px;
134 top:10px;
135 }
136
137 .img2 {
138 opacity: 0;
139 }
140
141 .img3 {
142 opacity: 0;
143 }
144
145 #logo{
146 position: absolute;
147 z-index: 11;
148 bottom:10px;
149 right:10px;
150 }
151
152 #logo img{
153 width:auto;
154 height:40px;
155 }
156 .bar {
157 position: absolute;
158 width: 26px;
159 height: 14px;
160 z-index: 2;
161 }
162 .green{
163 background-color: #75b00a;
164 top:120px;
165 }
166
167 .blue{
168 background-color: #008bd8;
169 top:136px;
170 }
171
172 .orange{
173 background-color: #fa9500;
174 top:152px;
175 }
176
177 .grey{
178 background-color: #434448;
179 top:102px;
180 }
181
182 .top-bar {
183 height:14px;
184 width: 100%;
185 position:absolute;
186 top:0;
187 z-index: 12;
188 }
189
190
191
192 </style>
193 </head>
194
195 <body>
196 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
197 <a href="javascript:eyeBuild.doClick(0)">
198 <div id="border">
199
200 <div class='top-bar'></div>
201 <div id="img"><img src="" alt="img" width="300" ></div>
202
203 <div id="bar1" class="bar green"></div>
204 <div id="bar2" class="bar blue"></div>
205 <div id="bar3" class="bar orange"></div>
206 <div id="bar4" class="bar grey"></div>
207
208 <div id="logo">
209 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
210 </div>
211
212 <div id="copy">
213 <img class='img1' src="" alt="" >
214 <img class='img2' src="" alt="" >
215 <img class='img3' src="" alt="" >
216 </div>
217
218
219
220 </div>
221 </a>
222
223 <!-- jQuery-->
224
225 <!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
226
227 <!-- GREENSOCK-->
228 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
229 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
230
231 <script>
232
233 function getRandomInt(max) {
234 return Math.floor(Math.random() * Math.floor(max));
235 }
236
237 function ready(fn) {
238 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
239 fn();
240 } else {
241 document.addEventListener('DOMContentLoaded', fn);
242 }
243 }
244
245
246 function stage1(){
247
248 var flavour = {
249 1:{color:'#fa9500',start:"-40px",end:"-135px"},
250 2:{color:'#008bd8',start:"-35px",end:"-115px"},
251 3:{color:'#75b00a',start:"-20px",end:"-105px"},
252 4:{color:'#434448',start:"-50px",end:"-150px"}
253 };
254
255 var rand = 1;
256
257 document.querySelector('.top-bar').style.background = flavour[rand].color;
258 document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
259 document.querySelector('#img').style.top = flavour[rand].start;
260 document.querySelector('#img').style.opacity = 1;
261 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
262 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
263 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
264
265 var tl = new TimelineMax({repeat:0, repeatDelay:3});
266
267 tl.to("#img",10.0,{top:flavour[rand].end});
268 tl.to(".img1",0,{opacity:0},"-=6.5");
269 tl.to(".img2",0.5,{opacity:1},"-=6.5");
270 tl.to(".img2",0.5,{opacity:0},"-=2.5");
271 tl.to(".img3",0.5,{opacity:1},"-=2.5");
272
273 }
274
275 ready(stage1());
276
277 </script>
278 </body>
279
280 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 // eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 300px;
84 height: 250px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 300px;
107 height: 250px;
108 border: 1px solid #55565A;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #img {
116 position: absolute;
117 opacity: 0;
118 }
119
120 #copy {
121 position: absolute;
122 bottom:0;
123 width:100%;
124 height:75px;
125 background:white;
126 z-index: 10;
127 }
128
129 #copy img {
130 height:55px;
131 width:auto;
132 position: absolute;
133 left:15px;
134 top:10px;
135 }
136
137 .img2 {
138 opacity: 0;
139 }
140
141 .img3 {
142 opacity: 0;
143 }
144
145 #logo{
146 position: absolute;
147 z-index: 11;
148 bottom:10px;
149 right:10px;
150 }
151
152 #logo img{
153 width:auto;
154 height:40px;
155 }
156 .bar {
157 position: absolute;
158 width: 26px;
159 height: 14px;
160 z-index: 2;
161 }
162 .green{
163 background-color: #75b00a;
164 top:120px;
165 }
166
167 .blue{
168 background-color: #008bd8;
169 top:136px;
170 }
171
172 .orange{
173 background-color: #fa9500;
174 top:152px;
175 }
176
177 .grey{
178 background-color: #434448;
179 top:102px;
180 }
181
182 .top-bar {
183 height:14px;
184 width: 100%;
185 position:absolute;
186 top:0;
187 z-index: 12;
188 }
189
190
191
192 </style>
193 </head>
194
195 <body>
196 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
197 <a href="javascript:eyeBuild.doClick(0)">
198 <div id="border">
199
200 <div class='top-bar'></div>
201 <div id="img"><img src="" alt="img" width="300" ></div>
202
203 <div id="bar1" class="bar green"></div>
204 <div id="bar2" class="bar blue"></div>
205 <div id="bar3" class="bar orange"></div>
206 <div id="bar4" class="bar grey"></div>
207
208 <div id="logo">
209 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
210 </div>
211
212 <div id="copy">
213 <img class='img1' src="" alt="" >
214 <img class='img2' src="" alt="" >
215 <img class='img3' src="" alt="" >
216 </div>
217
218
219
220 </div>
221 </a>
222
223 <!-- jQuery-->
224
225 <!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
226
227 <!-- GREENSOCK-->
228 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
229 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
230
231 <script>
232
233 function getRandomInt(max) {
234 return Math.floor(Math.random() * Math.floor(max));
235 }
236
237 function ready(fn) {
238 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
239 fn();
240 } else {
241 document.addEventListener('DOMContentLoaded', fn);
242 }
243 }
244
245
246 function stage1(){
247
248 var flavour = {
249 1:{color:'#fa9500',start:"-40px",end:"-135px"},
250 2:{color:'#008bd8',start:"-35px",end:"-115px"},
251 3:{color:'#75b00a',start:"-20px",end:"-105px"},
252 4:{color:'#434448',start:"-50px",end:"-150px"}
253 };
254
255 var rand = 2;
256
257 document.querySelector('.top-bar').style.background = flavour[rand].color;
258 document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
259 document.querySelector('#img').style.top = flavour[rand].start;
260 document.querySelector('#img').style.opacity = 1;
261 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
262 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
263 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
264
265 var tl = new TimelineMax({repeat:0, repeatDelay:3});
266
267 tl.to("#img",10.0,{top:flavour[rand].end});
268 tl.to(".img1",0,{opacity:0},"-=6.5");
269 tl.to(".img2",0.5,{opacity:1},"-=6.5");
270 tl.to(".img2",0.5,{opacity:0},"-=2.5");
271 tl.to(".img3",0.5,{opacity:1},"-=2.5");
272
273 }
274
275 ready(stage1());
276
277 </script>
278 </body>
279
280 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 // eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 300px;
84 height: 250px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 300px;
107 height: 250px;
108 border: 1px solid #55565A;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #img {
116 position: absolute;
117 opacity: 0;
118 }
119
120 #copy {
121 position: absolute;
122 bottom:0;
123 width:100%;
124 height:75px;
125 background:white;
126 z-index: 10;
127 }
128
129 #copy img {
130 height:55px;
131 width:auto;
132 position: absolute;
133 left:15px;
134 top:10px;
135 }
136
137 .img2 {
138 opacity: 0;
139 }
140
141 .img3 {
142 opacity: 0;
143 }
144
145 #logo{
146 position: absolute;
147 z-index: 11;
148 bottom:10px;
149 right:10px;
150 }
151
152 #logo img{
153 width:auto;
154 height:40px;
155 }
156 .bar {
157 position: absolute;
158 width: 26px;
159 height: 14px;
160 z-index: 2;
161 }
162 .green{
163 background-color: #75b00a;
164 top:120px;
165 }
166
167 .blue{
168 background-color: #008bd8;
169 top:136px;
170 }
171
172 .orange{
173 background-color: #fa9500;
174 top:152px;
175 }
176
177 .grey{
178 background-color: #434448;
179 top:102px;
180 }
181
182 .top-bar {
183 height:14px;
184 width: 100%;
185 position:absolute;
186 top:0;
187 z-index: 12;
188 }
189
190
191
192 </style>
193 </head>
194
195 <body>
196 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
197 <a href="javascript:eyeBuild.doClick(0)">
198 <div id="border">
199
200 <div class='top-bar'></div>
201 <div id="img"><img src="" alt="img" width="300" ></div>
202
203 <div id="bar1" class="bar green"></div>
204 <div id="bar2" class="bar blue"></div>
205 <div id="bar3" class="bar orange"></div>
206 <div id="bar4" class="bar grey"></div>
207
208 <div id="logo">
209 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
210 </div>
211
212 <div id="copy">
213 <img class='img1' src="" alt="" >
214 <img class='img2' src="" alt="" >
215 <img class='img3' src="" alt="" >
216 </div>
217
218
219
220 </div>
221 </a>
222
223 <!-- jQuery-->
224
225 <!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
226
227 <!-- GREENSOCK-->
228 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
229 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
230
231 <script>
232
233 function getRandomInt(max) {
234 return Math.floor(Math.random() * Math.floor(max));
235 }
236
237 function ready(fn) {
238 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
239 fn();
240 } else {
241 document.addEventListener('DOMContentLoaded', fn);
242 }
243 }
244
245
246 function stage1(){
247
248 var flavour = {
249 1:{color:'#fa9500',start:"-40px",end:"-135px"},
250 2:{color:'#008bd8',start:"-35px",end:"-115px"},
251 3:{color:'#75b00a',start:"-20px",end:"-105px"},
252 4:{color:'#434448',start:"-50px",end:"-150px"}
253 };
254
255 var rand = 3;
256
257 document.querySelector('.top-bar').style.background = flavour[rand].color;
258 document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
259 document.querySelector('#img').style.top = flavour[rand].start;
260 document.querySelector('#img').style.opacity = 1;
261 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
262 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
263 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
264
265 var tl = new TimelineMax({repeat:0, repeatDelay:3});
266
267 tl.to("#img",10.0,{top:flavour[rand].end});
268 tl.to(".img1",0,{opacity:0},"-=6.5");
269 tl.to(".img2",0.5,{opacity:1},"-=6.5");
270 tl.to(".img2",0.5,{opacity:0},"-=2.5");
271 tl.to(".img3",0.5,{opacity:1},"-=2.5");
272
273 }
274
275 ready(stage1());
276
277 </script>
278 </body>
279
280 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 // eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 300px;
84 height: 250px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 300px;
107 height: 250px;
108 border: 1px solid #55565A;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #img {
116 position: absolute;
117 opacity: 0;
118 }
119
120 #copy {
121 position: absolute;
122 bottom:0;
123 width:100%;
124 height:75px;
125 background:white;
126 z-index: 10;
127 }
128
129 #copy img {
130 height:55px;
131 width:auto;
132 position: absolute;
133 left:15px;
134 top:10px;
135 }
136
137 .img2 {
138 opacity: 0;
139 }
140
141 .img3 {
142 opacity: 0;
143 }
144
145 #logo{
146 position: absolute;
147 z-index: 11;
148 bottom:10px;
149 right:10px;
150 }
151
152 #logo img{
153 width:auto;
154 height:40px;
155 }
156 .bar {
157 position: absolute;
158 width: 26px;
159 height: 14px;
160 z-index: 2;
161 }
162 .green{
163 background-color: #75b00a;
164 top:120px;
165 }
166
167 .blue{
168 background-color: #008bd8;
169 top:136px;
170 }
171
172 .orange{
173 background-color: #fa9500;
174 top:152px;
175 }
176
177 .grey{
178 background-color: #434448;
179 top:102px;
180 }
181
182 .top-bar {
183 height:14px;
184 width: 100%;
185 position:absolute;
186 top:0;
187 z-index: 12;
188 }
189
190
191
192 </style>
193 </head>
194
195 <body>
196 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
197 <a href="javascript:eyeBuild.doClick(0)">
198 <div id="border">
199
200 <div class='top-bar'></div>
201 <div id="img"><img src="" alt="img" width="300" ></div>
202
203 <div id="bar1" class="bar green"></div>
204 <div id="bar2" class="bar blue"></div>
205 <div id="bar3" class="bar orange"></div>
206 <div id="bar4" class="bar grey"></div>
207
208 <div id="logo">
209 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
210 </div>
211
212 <div id="copy">
213 <img class='img1' src="" alt="" >
214 <img class='img2' src="" alt="" >
215 <img class='img3' src="" alt="" >
216 </div>
217
218
219
220 </div>
221 </a>
222
223 <!-- jQuery-->
224
225 <!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
226
227 <!-- GREENSOCK-->
228 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
229 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
230
231 <script>
232
233 function getRandomInt(max) {
234 return Math.floor(Math.random() * Math.floor(max));
235 }
236
237 function ready(fn) {
238 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
239 fn();
240 } else {
241 document.addEventListener('DOMContentLoaded', fn);
242 }
243 }
244
245
246 function stage1(){
247
248 var flavour = {
249 1:{color:'#fa9500',start:"-40px",end:"-135px"},
250 2:{color:'#008bd8',start:"-35px",end:"-115px"},
251 3:{color:'#75b00a',start:"-20px",end:"-105px"},
252 4:{color:'#434448',start:"-50px",end:"-150px"}
253 };
254
255 var rand = 4;
256
257 document.querySelector('.top-bar').style.background = flavour[rand].color;
258 document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
259 document.querySelector('#img').style.top = flavour[rand].start;
260 document.querySelector('#img').style.opacity = 1;
261 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
262 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
263 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
264
265 var tl = new TimelineMax({repeat:0});
266
267 tl.to("#img",10.0,{top:flavour[rand].end});
268 tl.to(".img1",0,{opacity:0},"-=6.5");
269 tl.to(".img2",0.5,{opacity:1},"-=6.5");
270 tl.to(".img2",0.5,{opacity:0},"-=2.5");
271 tl.to(".img3",0.5,{opacity:1},"-=2.5");
272
273 }
274
275 ready(stage1());
276
277 </script>
278 </body>
279
280 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 // eyeBuild.initialize();
27 }
28
29 </script>
30
31 <style>
32
33 body{
34 margin: 0;
35 padding: 0;
36 width: 300px;
37 height: 600px;
38 line-height: 1.2;
39 font-size: 27px;
40 letter-spacing: .4;
41 color: #CD040B;
42 font-family: "Neue Haas Grotesk", Arial, sans-serif;
43 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
44 font-style: normal;
45 }
46
47 a{
48 text-decoration: none;
49 color: inherit;
50 }
51
52 #border{
53 position: relative;
54 width: 300px;
55 height: 600px;
56 /* border: 1px solid #55565A; */
57 background-color: #FFFFFF;
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 }
62
63
64 #img {
65 position: absolute;
66 opacity: 0;
67 }
68
69 #img img {
70 position: absolute;
71 }
72
73 .faceimg2 {
74 opacity: 0;
75 }
76
77 .faceimg3 {
78 opacity: 0;
79 }
80
81
82 #copy {
83 position: absolute;
84 bottom:0;
85 width:100%;
86 height:250px;
87 background:white;
88 z-index: 10;
89 }
90
91 #copy img {
92 width:250px;
93 position: absolute;
94 left:5px;
95 top:10px;
96 padding:15px;
97 }
98
99 .img2 {
100 opacity: 0;
101 }
102
103 #copy img.img3 {
104 opacity: 0;
105 }
106
107 #logo{
108 position: absolute;
109 z-index: 11;
110 bottom:10px;
111 right:10px;
112 }
113
114 #logo img{
115 width:auto;
116 height:62px;
117 }
118 .bar {
119 position: absolute;
120 width: 26px;
121 height: 14px;
122 z-index: 2;
123 }
124 .green{
125 background-color: #75b00a;
126 top:296px;
127 }
128
129 .blue{
130 background-color: #008bd8;
131 top:313px;
132 }
133
134 .orange{
135 background-color: #fa9500;
136 top:330px;
137 }
138
139 .grey{
140 background-color: #434448;
141 top:279px;
142 }
143
144 .top-bar {
145 height:14px;
146 width: 100%;
147 position:absolute;
148 top:0;
149 z-index: 12;
150 }
151
152
153 </style>
154
155 </head>
156
157 <body>
158
159 <div id="border">
160
161 <div class='top-bar'></div>
162 <div id="img">
163 <img class='faceimg1' src="" alt="img" width="300" >
164 <img class='faceimg2' src="" alt="img" width="300" >
165 <img class='faceimg3' src="" alt="img" width="300" >
166 </div>
167
168 <div id="bar1" class="bar green"></div>
169 <div id="bar2" class="bar blue"></div>
170 <div id="bar3" class="bar orange"></div>
171 <div id="bar4" class="bar grey"></div>
172
173 <div id="logo">
174 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
175 </div>
176
177 <div id="copy">
178 <img class='img1' src="" alt="" >
179 <img class='img2' src="" alt="" >
180 <img class='img3' src="" alt="" >
181 </div>
182
183
184 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
185 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
186 </div>
187
188 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
189
190 <script>
191
192 function getRandomInt(max) {
193 return Math.floor(Math.random() * Math.floor(max));
194 }
195
196 function ready(fn) {
197 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
198 fn();
199 } else {
200 document.addEventListener('DOMContentLoaded', fn);
201 }
202 }
203
204
205 function stage1(){
206
207 var flavour = {
208 1:{color:'#fa9500'},
209 2:{color:'#008bd8'},
210 3:{color:'#75b00a'},
211 4:{color:'#434448'}
212 };
213
214 var rand = 1;
215
216 document.querySelector('.top-bar').style.background = flavour[rand].color;
217 document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
218 document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
219 document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
220 document.querySelector('#img').style.top = flavour[rand].start;
221 document.querySelector('#img').style.opacity = 1;
222 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
223 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
224 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
225
226 var tl = new TimelineMax({repeat:1, repeatDelay:5});
227
228 tl.to("#img",10.0,{top:flavour[rand].end});
229 tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
230 tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
231 tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
232 tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
233
234 }
235
236 ready(stage1());
237
238 </script>
239
240 </body>
241
242 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 // eyeBuild.initialize();
27 }
28
29 </script>
30
31 <style>
32
33 body{
34 margin: 0;
35 padding: 0;
36 width: 300px;
37 height: 600px;
38 line-height: 1.2;
39 font-size: 27px;
40 letter-spacing: .4;
41 color: #CD040B;
42 font-family: "Neue Haas Grotesk", Arial, sans-serif;
43 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
44 font-style: normal;
45 }
46
47 a{
48 text-decoration: none;
49 color: inherit;
50 }
51
52 #border{
53 position: relative;
54 width: 300px;
55 height: 600px;
56 /* border: 1px solid #55565A; */
57 background-color: #FFFFFF;
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 }
62
63
64 #img {
65 position: absolute;
66 opacity: 0;
67 }
68
69 #img img {
70 position: absolute;
71 }
72
73 .faceimg2 {
74 opacity: 0;
75 }
76
77 .faceimg3 {
78 opacity: 0;
79 }
80
81
82 #copy {
83 position: absolute;
84 bottom:0;
85 width:100%;
86 height:250px;
87 background:white;
88 z-index: 10;
89 }
90
91 #copy img {
92 width:250px;
93 position: absolute;
94 left:5px;
95 top:10px;
96 padding:15px;
97 }
98
99 .img2 {
100 opacity: 0;
101 }
102
103 #copy img.img3 {
104 opacity: 0;
105 }
106
107 #logo{
108 position: absolute;
109 z-index: 11;
110 bottom:10px;
111 right:10px;
112 }
113
114 #logo img{
115 width:auto;
116 height:62px;
117 }
118 .bar {
119 position: absolute;
120 width: 26px;
121 height: 14px;
122 z-index: 2;
123 }
124 .green{
125 background-color: #75b00a;
126 top:296px;
127 }
128
129 .blue{
130 background-color: #008bd8;
131 top:313px;
132 }
133
134 .orange{
135 background-color: #fa9500;
136 top:330px;
137 }
138
139 .grey{
140 background-color: #434448;
141 top:279px;
142 }
143
144 .top-bar {
145 height:14px;
146 width: 100%;
147 position:absolute;
148 top:0;
149 z-index: 12;
150 }
151
152
153 </style>
154
155 </head>
156
157 <body>
158
159 <div id="border">
160
161 <div class='top-bar'></div>
162 <div id="img">
163 <img class='faceimg1' src="" alt="img" width="300" >
164 <img class='faceimg2' src="" alt="img" width="300" >
165 <img class='faceimg3' src="" alt="img" width="300" >
166 </div>
167
168 <div id="bar1" class="bar green"></div>
169 <div id="bar2" class="bar blue"></div>
170 <div id="bar3" class="bar orange"></div>
171 <div id="bar4" class="bar grey"></div>
172
173 <div id="logo">
174 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
175 </div>
176
177 <div id="copy">
178 <img class='img1' src="" alt="" >
179 <img class='img2' src="" alt="" >
180 <img class='img3' src="" alt="" >
181 </div>
182
183
184 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
185 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
186 </div>
187
188 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
189
190 <script>
191
192 function getRandomInt(max) {
193 return Math.floor(Math.random() * Math.floor(max));
194 }
195
196 function ready(fn) {
197 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
198 fn();
199 } else {
200 document.addEventListener('DOMContentLoaded', fn);
201 }
202 }
203
204
205 function stage1(){
206
207 var flavour = {
208 1:{color:'#fa9500'},
209 2:{color:'#008bd8'},
210 3:{color:'#75b00a'},
211 4:{color:'#434448'}
212 };
213
214 var rand = 2;
215
216 document.querySelector('.top-bar').style.background = flavour[rand].color;
217 document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
218 document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
219 document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
220 document.querySelector('#img').style.top = flavour[rand].start;
221 document.querySelector('#img').style.opacity = 1;
222 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
223 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
224 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
225
226 var tl = new TimelineMax({repeat:1, repeatDelay:5});
227
228 tl.to("#img",10.0,{top:flavour[rand].end});
229 tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
230 tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
231 tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
232 tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
233
234 }
235
236 ready(stage1());
237
238 </script>
239
240 </body>
241
242 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 // eyeBuild.initialize();
27 }
28
29 </script>
30
31 <style>
32
33 body{
34 margin: 0;
35 padding: 0;
36 width: 300px;
37 height: 600px;
38 line-height: 1.2;
39 font-size: 27px;
40 letter-spacing: .4;
41 color: #CD040B;
42 font-family: "Neue Haas Grotesk", Arial, sans-serif;
43 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
44 font-style: normal;
45 }
46
47 a{
48 text-decoration: none;
49 color: inherit;
50 }
51
52 #border{
53 position: relative;
54 width: 300px;
55 height: 600px;
56 /* border: 1px solid #55565A; */
57 background-color: #FFFFFF;
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 }
62
63
64 #img {
65 position: absolute;
66 opacity: 0;
67 }
68
69 #img img {
70 position: absolute;
71 }
72
73 .faceimg2 {
74 opacity: 0;
75 }
76
77 .faceimg3 {
78 opacity: 0;
79 }
80
81
82 #copy {
83 position: absolute;
84 bottom:0;
85 width:100%;
86 height:250px;
87 background:white;
88 z-index: 10;
89 }
90
91 #copy img {
92 width:250px;
93 position: absolute;
94 left:5px;
95 top:10px;
96 padding:15px;
97 }
98
99 #copy img.img2 {
100 opacity: 0;
101 }
102
103 #copy img.img3 {
104 opacity: 0;
105 }
106
107 #logo{
108 position: absolute;
109 z-index: 11;
110 bottom:10px;
111 right:10px;
112 }
113
114 #logo img{
115 width:auto;
116 height:62px;
117 }
118 .bar {
119 position: absolute;
120 width: 26px;
121 height: 14px;
122 z-index: 2;
123 }
124 .green{
125 background-color: #75b00a;
126 top:296px;
127 }
128
129 .blue{
130 background-color: #008bd8;
131 top:313px;
132 }
133
134 .orange{
135 background-color: #fa9500;
136 top:330px;
137 }
138
139 .grey{
140 background-color: #434448;
141 top:279px;
142 }
143
144 .top-bar {
145 height:14px;
146 width: 100%;
147 position:absolute;
148 top:0;
149 z-index: 12;
150 }
151
152
153 </style>
154
155 </head>
156
157 <body>
158
159 <div id="border">
160
161 <div class='top-bar'></div>
162 <div id="img">
163 <img class='faceimg1' src="" alt="img" width="300" >
164 <img class='faceimg2' src="" alt="img" width="300" >
165 <img class='faceimg3' src="" alt="img" width="300" >
166 </div>
167
168 <div id="bar1" class="bar green"></div>
169 <div id="bar2" class="bar blue"></div>
170 <div id="bar3" class="bar orange"></div>
171 <div id="bar4" class="bar grey"></div>
172
173 <div id="logo">
174 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
175 </div>
176
177 <div id="copy">
178 <img class='img1' src="" alt="" >
179 <img class='img2' src="" alt="" >
180 <img class='img3' src="" alt="" >
181 </div>
182
183
184 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
185 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
186 </div>
187
188 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
189
190 <script>
191
192 function getRandomInt(max) {
193 return Math.floor(Math.random() * Math.floor(max));
194 }
195
196 function ready(fn) {
197 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
198 fn();
199 } else {
200 document.addEventListener('DOMContentLoaded', fn);
201 }
202 }
203
204
205 function stage1(){
206
207 var flavour = {
208 1:{color:'#fa9500'},
209 2:{color:'#008bd8'},
210 3:{color:'#75b00a'},
211 4:{color:'#434448'}
212 };
213
214 var rand = 3;
215
216 document.querySelector('.top-bar').style.background = flavour[rand].color;
217 document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
218 document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
219 document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
220 document.querySelector('#img').style.top = flavour[rand].start;
221 document.querySelector('#img').style.opacity = 1;
222 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
223 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
224 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
225
226 var tl = new TimelineMax({repeat:1, repeatDelay:5});
227
228 tl.to("#img",10.0,{top:flavour[rand].end});
229 tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
230 tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
231 tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
232 tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
233
234 }
235
236 ready(stage1());
237
238 </script>
239
240 </body>
241
242 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 // eyeBuild.initialize();
27 }
28
29 </script>
30
31 <style>
32
33 body{
34 margin: 0;
35 padding: 0;
36 width: 300px;
37 height: 600px;
38 line-height: 1.2;
39 font-size: 27px;
40 letter-spacing: .4;
41 color: #CD040B;
42 font-family: "Neue Haas Grotesk", Arial, sans-serif;
43 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
44 font-style: normal;
45 }
46
47 a{
48 text-decoration: none;
49 color: inherit;
50 }
51
52 #border{
53 position: relative;
54 width: 300px;
55 height: 600px;
56 /* border: 1px solid #55565A; */
57 background-color: #FFFFFF;
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 }
62
63
64 #img {
65 position: absolute;
66 opacity: 0;
67 }
68
69 #img img {
70 position: absolute;
71 }
72
73 .faceimg2 {
74 opacity: 0;
75 }
76
77 .faceimg3 {
78 opacity: 0;
79 }
80
81
82 #copy {
83 position: absolute;
84 bottom:0;
85 width:100%;
86 height:250px;
87 background:white;
88 z-index: 10;
89 }
90
91 #copy img {
92 width:250px;
93 position: absolute;
94 left:5px;
95 top:10px;
96 padding:15px;
97 }
98
99 .img2 {
100 opacity: 0;
101 }
102
103 #copy img.img3 {
104 opacity: 0;
105 }
106
107 #logo{
108 position: absolute;
109 z-index: 11;
110 bottom:10px;
111 right:10px;
112 }
113
114 #logo img{
115 width:auto;
116 height:62px;
117 }
118 .bar {
119 position: absolute;
120 width: 26px;
121 height: 14px;
122 z-index: 2;
123 }
124 .green{
125 background-color: #75b00a;
126 top:296px;
127 }
128
129 .blue{
130 background-color: #008bd8;
131 top:313px;
132 }
133
134 .orange{
135 background-color: #fa9500;
136 top:330px;
137 }
138
139 .grey{
140 background-color: #434448;
141 top:279px;
142 }
143
144 .top-bar {
145 height:14px;
146 width: 100%;
147 position:absolute;
148 top:0;
149 z-index: 12;
150 }
151
152
153 </style>
154
155 </head>
156
157 <body>
158
159 <div id="border">
160
161 <div class='top-bar'></div>
162 <div id="img">
163 <img class='faceimg1' src="" alt="img" width="300" >
164 <img class='faceimg2' src="" alt="img" width="300" >
165 <img class='faceimg3' src="" alt="img" width="300" >
166 </div>
167
168 <div id="bar1" class="bar green"></div>
169 <div id="bar2" class="bar blue"></div>
170 <div id="bar3" class="bar orange"></div>
171 <div id="bar4" class="bar grey"></div>
172
173 <div id="logo">
174 <img src="assets/logo@2x.png" alt="The Commonwell Logo">
175 </div>
176
177 <div id="copy">
178 <img class='img1' src="" alt="" >
179 <img class='img2' src="" alt="" >
180 <img class='img3' src="" alt="" >
181 </div>
182
183
184 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
185 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
186 </div>
187
188 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
189
190 <script>
191
192 function getRandomInt(max) {
193 return Math.floor(Math.random() * Math.floor(max));
194 }
195
196 function ready(fn) {
197 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
198 fn();
199 } else {
200 document.addEventListener('DOMContentLoaded', fn);
201 }
202 }
203
204
205 function stage1(){
206
207 var flavour = {
208 1:{color:'#fa9500'},
209 2:{color:'#008bd8'},
210 3:{color:'#75b00a'},
211 4:{color:'#434448'}
212 };
213
214 var rand = 4;
215
216 document.querySelector('.top-bar').style.background = flavour[rand].color;
217 document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
218 document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
219 document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
220 document.querySelector('#img').style.top = flavour[rand].start;
221 document.querySelector('#img').style.opacity = 1;
222 document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
223 document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
224 document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
225
226 var tl = new TimelineMax({repeat:1, repeatDelay:5});
227
228 tl.to("#img",10.0,{top:flavour[rand].end});
229 tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
230 tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
231 tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
232 tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
233
234 }
235
236 ready(stage1());
237
238 </script>
239
240 </body>
241
242 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 728px;
84 height: 90px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 728px;
107 height: 90px;
108 border: 1px solid #929497;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 22px;
118 left: 40px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #copy1 {
125 top:35px;
126 z-index: 1;
127 }
128 #copy2 {
129 left:70px;
130 }
131 #copy3 {
132 top:35px;
133 z-index: 5;
134 }
135 #logo{
136 position: absolute;
137 width: 194px;
138 right: 0px;
139 top: 0px;
140 z-index: 3;
141 height:100%;
142 background:white;
143 }
144 #logo img{
145 width: 145px;
146 height: auto;
147 margin-top: 20px;
148 margin-left: 25px;
149 }
150 .bar {
151 position: absolute;
152 height: 19px;
153 width: 37px;
154 left: 490px;
155 overflow:hidden;
156 z-index: 2;
157 }
158 .grey{
159 background-color: #55565A;
160 top:0px;
161 }
162 .green{
163 background-color: #77BC1F;
164 top:23px;
165 }
166
167 .blue{
168 background-color: #009BDE;
169 top:46px;
170 }
171
172 .orange{
173 background-color: #F7A800;
174 top:69px;
175 }
176
177 #bar0.bar {
178 width:485px;
179 background-color: #F7A800;
180 height:100%;
181 z-index: 1;
182 left:0;
183 }
184
185
186
187 </style>
188 </head>
189
190 <body>
191 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
192 <a href="javascript:eyeBuild.doClick(0)">
193 <div id="border">
194
195 <div id="bar0" class="bar">
196 <div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
197 </div>
198 <div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
199 <div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
200 <div id="bar1" class="bar grey"></div>
201 <div id="bar2" class="bar green"></div>
202 <div id="bar3" class="bar blue"></div>
203 <div id="bar4" class="bar orange"></div>
204
205
206 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
207 </div>
208 </a>
209
210 <!-- jQuery-->
211 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
212
213 <!-- GREENSOCK-->
214 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
215 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
216
217 <script>
218
219 function stage1(){
220
221 var tl = new TimelineMax({repeat:1, repeatDelay:5});
222 var barDelay = -0.95;
223 var copyDelay = 2.5;
224
225 var leftPos = 0;
226 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
227 tl.to("#bar0", 1, {width:0, delay:-1 });
228
229 tl.to("#copy1", 0, {opacity:0, delay:0 });
230 tl.to("#copy2", 0, {opacity:1, delay:0 });
231
232 leftPos = 490;
233 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
234 tl.to("#bar0", 1, {width:485, delay:-1 });
235
236 tl.to("#copy2", 0, {opacity:0, delay:0 });
237 tl.to("#copy3", 0, {opacity:1, delay:0 });
238
239 }
240
241
242 //---------------------
243 $(document).ready(function(){
244 stage1();
245 });
246
247
248
249 </script>
250 </body>
251
252 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 728px;
84 height: 90px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 728px;
107 height: 90px;
108 border: 1px solid #929497;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 22px;
118 left: 40px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #copy1 {
125 z-index: 1;
126 }
127 #copy2 {
128 left:70px;
129 }
130 #copy3 {
131 top:35px;
132 z-index: 5;
133 }
134 #logo{
135 position: absolute;
136 width: 194px;
137 right: 0px;
138 top: 0px;
139 z-index: 3;
140 height:100%;
141 background:white;
142 }
143 #logo img{
144 width: 145px;
145 height: auto;
146 margin-top: 20px;
147 margin-left: 25px;
148 }
149 .bar {
150 position: absolute;
151 height: 19px;
152 width: 37px;
153 left: 490px;
154 overflow:hidden;
155 z-index: 2;
156 }
157 .grey{
158 background-color: #55565A;
159 top:0px;
160 }
161 .green{
162 background-color: #77BC1F;
163 top:23px;
164 }
165
166 .blue{
167 background-color: #009BDE;
168 top:46px;
169 }
170
171 .orange{
172 background-color: #F7A800;
173 top:69px;
174 }
175
176 #bar0.bar {
177 width:485px;
178 background-color: #009BDE;
179 height:100%;
180 z-index: 1;
181 left:0;
182 }
183
184
185
186 </style>
187 </head>
188
189 <body>
190 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
191 <a href="javascript:eyeBuild.doClick(0)">
192 <div id="border">
193
194 <div id="bar0" class="bar">
195 <div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
196 </div>
197 <div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
198 <div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
199 <div id="bar1" class="bar grey"></div>
200 <div id="bar2" class="bar green"></div>
201 <div id="bar3" class="bar blue"></div>
202 <div id="bar4" class="bar orange"></div>
203
204
205 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
206 </div>
207 </a>
208
209 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211
212 <!-- GREENSOCK-->
213 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
214 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
215
216 <script>
217
218 function stage1(){
219
220 var tl = new TimelineMax({repeat:1, repeatDelay:5});
221 var barDelay = -0.95;
222 var copyDelay = 2.5;
223
224 var leftPos = 0;
225 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
226 tl.to("#bar0", 1, {width:0, delay:-1 });
227
228 tl.to("#copy1", 0, {opacity:0, delay:0 });
229 tl.to("#copy2", 0, {opacity:1, delay:0 });
230
231 leftPos = 490;
232 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
233 tl.to("#bar0", 1, {width:485, delay:-1 });
234
235 tl.to("#copy2", 0, {opacity:0, delay:0 });
236 tl.to("#copy3", 0, {opacity:1, delay:0 });
237
238 }
239
240
241 //---------------------
242 $(document).ready(function(){
243 stage1();
244 });
245
246
247
248 </script>
249 </body>
250
251 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 728px;
84 height: 90px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 728px;
107 height: 90px;
108 border: 1px solid #929497;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 22px;
118 left: 40px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #copy1 {
125 z-index: 1;
126 }
127 #copy2 {
128 left:70px;
129 }
130 #copy3 {
131 top:35px;
132 z-index: 5;
133 }
134 #logo{
135 position: absolute;
136 width: 194px;
137 right: 0px;
138 top: 0px;
139 z-index: 3;
140 height:100%;
141 background:white;
142 }
143 #logo img{
144 width: 145px;
145 height: auto;
146 margin-top: 20px;
147 margin-left: 25px;
148 }
149 .bar {
150 position: absolute;
151 height: 19px;
152 width: 37px;
153 left: 490px;
154 overflow:hidden;
155 z-index: 2;
156 }
157 .grey{
158 background-color: #55565A;
159 top:0px;
160 }
161 .green{
162 background-color: #77BC1F;
163 top:23px;
164 }
165
166 .blue{
167 background-color: #009BDE;
168 top:46px;
169 }
170
171 .orange{
172 background-color: #F7A800;
173 top:69px;
174 }
175
176 #bar0.bar {
177 width:485px;
178 background-color: #77BC1F;
179 height:100%;
180 z-index: 1;
181 left:0;
182 }
183
184
185
186 </style>
187 </head>
188
189 <body>
190 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
191 <a href="javascript:eyeBuild.doClick(0)">
192 <div id="border">
193
194 <div id="bar0" class="bar">
195 <div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
196 </div>
197 <div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
198 <div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
199 <div id="bar1" class="bar grey"></div>
200 <div id="bar2" class="bar green"></div>
201 <div id="bar3" class="bar blue"></div>
202 <div id="bar4" class="bar orange"></div>
203
204
205 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
206 </div>
207 </a>
208
209 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211
212 <!-- GREENSOCK-->
213 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
214 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
215
216 <script>
217
218 function stage1(){
219
220 var tl = new TimelineMax({repeat:1, repeatDelay:5});
221 var barDelay = -0.95;
222 var copyDelay = 2.5;
223
224 var leftPos = 0;
225 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
226 tl.to("#bar0", 1, {width:0, delay:-1 });
227
228 tl.to("#copy1", 0, {opacity:0, delay:0 });
229 tl.to("#copy2", 0, {opacity:1, delay:0 });
230
231 leftPos = 490;
232 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
233 tl.to("#bar0", 1, {width:485, delay:-1 });
234
235 tl.to("#copy2", 0, {opacity:0, delay:0 });
236 tl.to("#copy3", 0, {opacity:1, delay:0 });
237
238 }
239
240
241 //---------------------
242 $(document).ready(function(){
243 stage1();
244 });
245
246
247
248 </script>
249 </body>
250
251 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 728px;
84 height: 90px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 728px;
107 height: 90px;
108 border: 1px solid #929497;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 22px;
118 left: 40px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #copy1 {
125 z-index: 1;
126 }
127 #copy2 {
128 left:70px;
129 }
130 #copy3 {
131 top:35px;
132 z-index: 5;
133 }
134 #logo{
135 position: absolute;
136 width: 194px;
137 right: 0px;
138 top: 0px;
139 z-index: 3;
140 height:100%;
141 background:white;
142 }
143 #logo img{
144 width: 145px;
145 height: auto;
146 margin-top: 20px;
147 margin-left: 25px;
148 }
149 .bar {
150 position: absolute;
151 height: 19px;
152 width: 37px;
153 left: 490px;
154 overflow:hidden;
155 z-index: 2;
156 }
157 .grey{
158 background-color: #55565A;
159 top:0px;
160 }
161 .green{
162 background-color: #77BC1F;
163 top:23px;
164 }
165
166 .blue{
167 background-color: #009BDE;
168 top:46px;
169 }
170
171 .orange{
172 background-color: #F7A800;
173 top:69px;
174 }
175
176 #bar0.bar {
177 width:485px;
178 background-color: #55565A;
179 height:100%;
180 z-index: 1;
181 left:0;
182 }
183
184
185
186 </style>
187 </head>
188
189 <body>
190 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
191 <a href="javascript:eyeBuild.doClick(0)">
192 <div id="border">
193
194 <div id="bar0" class="bar">
195 <div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
196 </div>
197 <div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
198 <div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
199 <div id="bar1" class="bar grey"></div>
200 <div id="bar2" class="bar green"></div>
201 <div id="bar3" class="bar blue"></div>
202 <div id="bar4" class="bar orange"></div>
203
204
205 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
206 </div>
207 </a>
208
209 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211
212 <!-- GREENSOCK-->
213 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
214 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
215
216 <script>
217
218 function stage1(){
219
220 var tl = new TimelineMax({repeat:1, repeatDelay:5});
221 var barDelay = -0.95;
222 var copyDelay = 2.5;
223
224 var leftPos = 0;
225 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
226 tl.to("#bar0", 1, {width:0, delay:-1 });
227
228 tl.to("#copy1", 0, {opacity:0, delay:0 });
229 tl.to("#copy2", 0, {opacity:1, delay:0 });
230
231 leftPos = 490;
232 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
233 tl.to("#bar0", 1, {width:485, delay:-1 });
234
235 tl.to("#copy2", 0, {opacity:0, delay:0 });
236 tl.to("#copy3", 0, {opacity:1, delay:0 });
237
238 }
239
240
241 //---------------------
242 $(document).ready(function(){
243 stage1();
244 });
245
246
247
248 </script>
249 </body>
250
251 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <!-- <h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3> -->
15
16 <iframe id='' class="b300x250 " scrolling="no" src="300x250-1/index.html"></iframe>
17 <iframe id='' class="b300x250 " scrolling="no" src="300x250-2/index.html"></iframe>
18 <iframe id='' class="b300x250 " scrolling="no" src="300x250-3/index.html"></iframe>
19 <iframe id='' class="b300x250 " scrolling="no" src="300x250-4/index.html"></iframe>
20
21 <iframe id='' class="b300x600 " scrolling="no" src="300x600-1/index.html"></iframe>
22 <iframe id='' class="b300x600 " scrolling="no" src="300x600-2/index.html"></iframe>
23 <iframe id='' class="b300x600 " scrolling="no" src="300x600-3/index.html"></iframe>
24 <iframe id='' class="b300x600 " scrolling="no" src="300x600-4/index.html"></iframe>
25
26 <iframe id='' class="b728x90 " scrolling="no" src="728x90-1/index.html"></iframe>
27 <iframe id='' class="b728x90 " scrolling="no" src="728x90-2/index.html"></iframe>
28 <iframe id='' class="b728x90 " scrolling="no" src="728x90-3/index.html"></iframe>
29 <iframe id='' class="b728x90 " scrolling="no" src="728x90-4/index.html"></iframe>
30
31
32 </body>
33 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
29 overflow: hidden;
30 iframe::-webkit-scrollbar {
31 display: none;
32 };
33 }
34
35 .stacked {
36 display: flex;
37
38 }
39 .b300x250 {
40 width: 300px;
41 height: 250px;
42 }
43 .b728x90 {
44 width: 728px;
45 height: 90px;
46 }
47 .b300x600 {
48 width: 300px;
49 height: 600px;
50 }
51 .b600x566 {
52 width: 600px;
53 height: 566px;
54 }