Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
06d25332 by Dan Rempel
Options

CWL 2018 Spring Ads for approval

1 parent de3ba32f
Inline Side-by-side
Showing 81 changed files with 2764 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 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 102px;
118 left: 33px;
119 opacity: 0;
120 }
121 #copy2{
122 top:108px;
123 }
124 #copy3{
125 left: 50px;
126 top: 35px;
127 }
128 #logo{
129 position: absolute;
130 width: 104px;
131 bottom:4px;
132 right:15px;
133 }
134 #logo img{
135 width: 104px;
136 height: auto;
137 }
138 .bar {
139 position: absolute;
140 width: 38px;
141 height: 20px;
142 }
143 .green{
144 background-color: #77BC1F;
145 top:15px;
146 }
147
148 .blue{
149 background-color: #009BDE;
150 top:40px;
151 }
152
153 .orange{
154 background-color: #F7A800;
155 top:65px;
156 }
157
158 .grey{
159 /* background-color: #55565A; */
160 background-color: #000000;
161 opacity:0.6;
162 top:90px;
163 }
164
165
166
167 </style>
168 </head>
169
170 <body>
171 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
172 <a href="javascript:eyeBuild.doClick(0)">
173 <div id="border">
174
175 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
176
177 <div id="bar1" class="bar green"></div>
178 <div id="bar2" class="bar blue"></div>
179 <div id="bar3" class="bar orange"></div>
180 <div id="bar4" class="bar grey"></div>
181 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
182
183 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
184 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
185 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
186
187
188
189 </div>
190 </a>
191
192 <!-- jQuery-->
193 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
194
195 <!-- GREENSOCK-->
196 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
197 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
198
199 <script>
200
201 function stage1(){
202 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203
204 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 });
210
211 tl.to("#copy2", .7, {opacity:0, delay:4 });
212 tl.to("#img", .7, {opacity:0, delay:0 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 });
215
216 console.log( "time: " + tl.totalDuration() );
217 }
218
219
220 //---------------------
221 $(document).ready(function(){
222 stage1();
223 });
224
225
226
227 </script>
228 </body>
229
230 </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 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 102px;
118 left: 33px;
119 opacity: 0;
120 }
121 #copy2{
122 top:108px;
123 }
124 #copy3{
125 left: 50px;
126 top: 30px;
127 }
128 #logo{
129 position: absolute;
130 width: 104px;
131 bottom:4px;
132 right:15px;
133 }
134 #logo img{
135 width: 104px;
136 height: auto;
137 }
138 .bar {
139 position: absolute;
140 width: 38px;
141 height: 20px;
142 }
143 .green{
144 background-color: #77BC1F;
145 top:15px;
146 }
147
148 .blue{
149 background-color: #009BDE;
150 top:40px;
151 }
152
153 .orange{
154 background-color: #F7A800;
155 top:65px;
156 }
157
158 .grey{
159 /* background-color: #55565A; */
160 background-color: #000000;
161 opacity:0.6;
162 top:90px;
163 }
164
165
166
167 </style>
168 </head>
169
170 <body>
171 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
172 <a href="javascript:eyeBuild.doClick(0)">
173 <div id="border">
174
175 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
176
177 <div id="bar1" class="bar green"></div>
178 <div id="bar2" class="bar blue"></div>
179 <div id="bar3" class="bar orange"></div>
180 <div id="bar4" class="bar grey"></div>
181 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
182
183 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
184 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
185 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
186
187
188
189 </div>
190 </a>
191
192 <!-- jQuery-->
193 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
194
195 <!-- GREENSOCK-->
196 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
197 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
198
199 <script>
200
201 function stage1(){
202 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203
204 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 });
210
211 tl.to("#copy2", .7, {opacity:0, delay:4 });
212 tl.to("#img", .7, {opacity:0, delay:0 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 });
215
216 console.log( "time: " + tl.totalDuration() );
217 }
218
219
220 //---------------------
221 $(document).ready(function(){
222 stage1();
223 });
224
225
226
227 </script>
228 </body>
229
230 </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 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 102px;
118 left: 33px;
119 opacity: 0;
120 }
121 #copy2{
122 top:108px;
123 }
124 #copy3{
125 left: 50px;
126 top: 30px;
127 }
128 #logo{
129 position: absolute;
130 width: 104px;
131 bottom:4px;
132 right:15px;
133 }
134 #logo img{
135 width: 104px;
136 height: auto;
137 }
138 .bar {
139 position: absolute;
140 width: 38px;
141 height: 20px;
142 }
143 .green{
144 background-color: #77BC1F;
145 top:15px;
146 }
147
148 .blue{
149 background-color: #009BDE;
150 top:40px;
151 }
152
153 .orange{
154 background-color: #F7A800;
155 top:65px;
156 }
157
158 .grey{
159 /* background-color: #55565A; */
160 background-color: #000000;
161 opacity:0.6;
162 top:90px;
163 }
164
165
166
167 </style>
168 </head>
169
170 <body>
171 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
172 <a href="javascript:eyeBuild.doClick(0)">
173 <div id="border">
174
175 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
176
177 <div id="bar1" class="bar green"></div>
178 <div id="bar2" class="bar blue"></div>
179 <div id="bar3" class="bar orange"></div>
180 <div id="bar4" class="bar grey"></div>
181 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
182
183 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
184 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
185 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
186
187
188
189 </div>
190 </a>
191
192 <!-- jQuery-->
193 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
194
195 <!-- GREENSOCK-->
196 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
197 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
198
199 <script>
200
201 function stage1(){
202 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203
204 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 });
210
211 tl.to("#copy2", .7, {opacity:0, delay:4 });
212 tl.to("#img", .7, {opacity:0, delay:0 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 });
215
216 console.log( "time: " + tl.totalDuration() );
217 }
218
219
220 //---------------------
221 $(document).ready(function(){
222 stage1();
223 });
224
225
226
227 </script>
228 </body>
229
230 </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: 600px;
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: 600px;
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 height: auto;
117 }
118 #img{
119 position: absolute;
120 width: 257px;
121 left:21px;
122 top:24px;
123 }
124 #img img{
125 width: 257px;
126 }
127 #copy1, #copy2, #copy3{
128 position: absolute;
129 top: 204px;
130 left: 31px;
131 opacity: 1;
132 }
133 #copy2{
134 top:261px;
135 left:-280px;
136 }
137 #copy3{
138 left: 37px;
139 top: 389px;
140 opacity: 0;
141 }
142 #logo{
143 position: absolute;
144 width: 185px;
145 bottom:37px;
146 left:55px;
147 }
148 #logo img{
149 width: 185px;
150 height: auto;
151 }
152 .bar {
153 position: absolute;
154 width: 22px;
155 left:-70px;
156 height: 16px;
157 }
158 .grey{
159 background-color: #55565A;
160 top:264px;
161 }
162 .green{
163 background-color: #77BC1F;
164 top:283px;
165 }
166
167 .blue{
168 background-color: #009BDE;
169 top:302px;
170 }
171
172 .orange{
173 background-color: #F7A800;
174 top:321px;
175 }
176
177
178
179
180 </style>
181 </head>
182
183 <body>
184 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
185 <a href="javascript:eyeBuild.doClick(0)">
186 <div id="border">
187 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
188
189 <div id="bar1" class="bar grey"></div>
190 <div id="bar2" class="bar green"></div>
191 <div id="bar3" class="bar blue"></div>
192 <div id="bar4" class="bar orange"></div>
193 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
194
195 <div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
196 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
197 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
198 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
199
200
201 </div>
202 </a>
203
204 <!-- jQuery-->
205 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
206
207 <!-- GREENSOCK-->
208 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
209 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
210
211 <script>
212
213 function stage1(){
214 var tl = new TimelineMax({repeat:1, repeatDelay:5});
215
216 var barDelay = -0.95;
217 var copyDelay = 2.5;
218
219 var leftPos = 0;
220 tl.to("#copy2", 1, {left:31, ease:Power1.easeInOut, delay:3 });
221 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
223 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
224 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
225
226 tl.to("#copy3", 1, {opacity:1, delay:1 });
227
228 console.log( "time: " + tl.totalDuration() );
229 }
230
231
232 //---------------------
233 $(document).ready(function(){
234 stage1();
235 });
236
237
238
239 </script>
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: 300px;
84 height: 600px;
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: 600px;
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 height: auto;
117 }
118 #img{
119 position: absolute;
120 width: 257px;
121 left:21px;
122 top:24px;
123 }
124 #img img{
125 width: 257px;
126 }
127 #copy1, #copy2, #copy3{
128 position: absolute;
129 top: 204px;
130 left: 31px;
131 opacity: 1;
132 }
133 #copy2{
134 top:261px;
135 }
136 #copy3{
137 left: 37px;
138 top: 389px;
139 }
140 #logo{
141 position: absolute;
142 width: 185px;
143 bottom:37px;
144 left:55px;
145 }
146 #logo img{
147 width: 185px;
148 height: auto;
149 }
150 .bar {
151 position: absolute;
152 width: 22px;
153 height: 16px;
154 }
155 .grey{
156 background-color: #55565A;
157 top:264px;
158 }
159 .green{
160 background-color: #77BC1F;
161 top:283px;
162 }
163
164 .blue{
165 background-color: #009BDE;
166 top:302px;
167 }
168
169 .orange{
170 background-color: #F7A800;
171 top:321px;
172 }
173
174
175
176
177 </style>
178 </head>
179
180 <body>
181 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
182 <a href="javascript:eyeBuild.doClick(0)">
183 <div id="border">
184 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
185
186 <div id="bar1" class="bar grey"></div>
187 <div id="bar2" class="bar green"></div>
188 <div id="bar3" class="bar blue"></div>
189 <div id="bar4" class="bar orange"></div>
190 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
191
192 <div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
193 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
194 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
195 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
196
197
198 </div>
199 </a>
200
201 <!-- jQuery-->
202 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
203
204 <!-- GREENSOCK-->
205 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
206 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
207
208 <script>
209
210 function stage1(){
211 var tl = new TimelineMax({repeat:1, repeatDelay:5});
212
213 var barDelay = -0.95;
214 var copyDelay = 2.5;
215
216 var leftPos = -70;
217 tl.from("#copy2", 1, {left:-280, ease:Power1.easeInOut, delay:3 });
218 tl.from("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
219 tl.from("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
220 tl.from("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
221 tl.from("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222
223 tl.from("#copy3", 1, {opacity:0, delay:1 });
224
225 console.log( "time: " + tl.totalDuration() );
226 }
227
228
229 //---------------------
230 $(document).ready(function(){
231 stage1();
232 });
233
234
235
236 </script>
237 </body>
238
239 </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: 600px;
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: 600px;
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 height: auto;
117 }
118 #img{
119 position: absolute;
120 width: 257px;
121 left:21px;
122 top:24px;
123 }
124 #img img{
125 width: 257px;
126 }
127 #copy1, #copy2, #copy3{
128 position: absolute;
129 top: 204px;
130 left: 31px;
131 opacity: 1;
132 }
133 #copy2{
134 top:261px;
135 }
136 #copy3{
137 left: 37px;
138 top: 389px;
139 }
140 #logo{
141 position: absolute;
142 width: 185px;
143 bottom:37px;
144 left:55px;
145 }
146 #logo img{
147 width: 185px;
148 height: auto;
149 }
150 .bar {
151 position: absolute;
152 width: 22px;
153 height: 16px;
154 }
155 .grey{
156 background-color: #55565A;
157 top:264px;
158 }
159 .green{
160 background-color: #77BC1F;
161 top:283px;
162 }
163
164 .blue{
165 background-color: #009BDE;
166 top:302px;
167 }
168
169 .orange{
170 background-color: #F7A800;
171 top:321px;
172 }
173
174
175
176
177 </style>
178 </head>
179
180 <body>
181 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
182 <a href="javascript:eyeBuild.doClick(0)">
183 <div id="border">
184 <div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
185
186 <div id="bar1" class="bar grey"></div>
187 <div id="bar2" class="bar green"></div>
188 <div id="bar3" class="bar blue"></div>
189 <div id="bar4" class="bar orange"></div>
190 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
191
192 <div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
193 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
194 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
195 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
196
197
198 </div>
199 </a>
200
201 <!-- jQuery-->
202 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
203
204 <!-- GREENSOCK-->
205 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
206 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
207
208 <script>
209
210 function stage1(){
211 var tl = new TimelineMax({repeat:1, repeatDelay:5});
212
213 var barDelay = -0.95;
214 var copyDelay = 2.5;
215
216 var leftPos = -70;
217 tl.from("#copy2", 1, {left:-280, ease:Power1.easeInOut, delay:3 });
218 tl.from("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
219 tl.from("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
220 tl.from("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
221 tl.from("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222
223 tl.from("#copy3", 1, {opacity:0, delay:1 });
224
225 console.log( "time: " + tl.totalDuration() );
226 }
227
228
229 //---------------------
230 $(document).ready(function(){
231 stage1();
232 });
233
234
235
236 </script>
237 </body>
238
239 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
...\ 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 #55565A;
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: 24px;
118 left: 57px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #logo{
125 position: absolute;
126 width: 194px;
127 right: 0px;
128 top: 0px;
129 }
130 #logo img{
131 width: 194px;
132 height: auto;
133 }
134 .bar {
135 position: absolute;
136 height: 19px;
137 width: 690px;
138 left: -653px;/*37*/
139 }
140 .grey{
141 background-color: #55565A;
142 top:0px;
143 }
144 .green{
145 background-color: #77BC1F;
146 top:23px;
147 }
148
149 .blue{
150 background-color: #009BDE;
151 top:46px;
152 }
153
154 .orange{
155 background-color: #F7A800;
156 top:69px;
157 }
158
159 .white{
160 background-color: #FFFFFF;
161 height:90px;
162 width: 670px;
163 }
164
165
166 </style>
167 </head>
168
169 <body>
170 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
171 <a href="javascript:eyeBuild.doClick(0)">
172 <div id="border">
173
174 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
175 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
176 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
177
178 <div id="bar0" class="bar white"></div>
179 <div id="bar1" class="bar grey"></div>
180 <div id="bar2" class="bar green"></div>
181 <div id="bar3" class="bar blue"></div>
182 <div id="bar4" class="bar orange"></div>
183 <div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
184 </div>
185 </a>
186
187 <!-- jQuery-->
188 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
189
190 <!-- GREENSOCK-->
191 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
192 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
193
194 <script>
195
196 function stage1(){
197 var tl = new TimelineMax({repeat:1, repeatDelay:5});
198 var barDelay = -0.95;
199 var copyDelay = 2.5;
200
201 var leftPos = 490;
202 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
203 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
204 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
205 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
206 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:-.9 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.7 });
210
211 leftPos = -653;
212 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
213 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
214 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
215 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
216 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
217
218 tl.to("#copy2", .7, {opacity:0, delay:-.9 });
219 tl.to("#copy3", .7, {opacity:1, delay:-.7 });
220
221 console.log( "time: " + tl.totalDuration() );
222 }
223
224
225 //---------------------
226 $(document).ready(function(){
227 stage1();
228 });
229
230
231
232 </script>
233 </body>
234
235 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
...\ 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 #55565A;
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: 24px;
118 left: 57px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #logo{
125 position: absolute;
126 width: 194px;
127 right: 0px;
128 top: 0px;
129 }
130 #logo img{
131 width: 194px;
132 height: auto;
133 }
134 .bar {
135 position: absolute;
136 height: 19px;
137 width: 690px;
138 left: -653px;/*37*/
139 }
140 .grey{
141 background-color: #55565A;
142 top:0px;
143 }
144 .green{
145 background-color: #77BC1F;
146 top:23px;
147 }
148
149 .blue{
150 background-color: #009BDE;
151 top:46px;
152 }
153
154 .orange{
155 background-color: #F7A800;
156 top:69px;
157 }
158
159 .white{
160 background-color: #FFFFFF;
161 height:90px;
162 width: 670px;
163 }
164
165
166 </style>
167 </head>
168
169 <body>
170 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
171 <a href="javascript:eyeBuild.doClick(0)">
172 <div id="border">
173
174 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
175 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
176 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
177
178 <div id="bar0" class="bar white"></div>
179 <div id="bar1" class="bar grey"></div>
180 <div id="bar2" class="bar green"></div>
181 <div id="bar3" class="bar blue"></div>
182 <div id="bar4" class="bar orange"></div>
183 <div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
184 </div>
185 </a>
186
187 <!-- jQuery-->
188 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
189
190 <!-- GREENSOCK-->
191 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
192 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
193
194 <script>
195
196 function stage1(){
197 var tl = new TimelineMax({repeat:1, repeatDelay:5});
198 var barDelay = -0.95;
199 var copyDelay = 2.5;
200
201 var leftPos = 490;
202 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
203 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
204 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
205 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
206 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:-.9 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.7 });
210
211 leftPos = -653;
212 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
213 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
214 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
215 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
216 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
217
218 tl.to("#copy2", .7, {opacity:0, delay:-.9 });
219 tl.to("#copy3", .7, {opacity:1, delay:-.7 });
220
221 console.log( "time: " + tl.totalDuration() );
222 }
223
224
225 //---------------------
226 $(document).ready(function(){
227 stage1();
228 });
229
230
231
232 </script>
233 </body>
234
235 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
...\ 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 #55565A;
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: 24px;
118 left: 57px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #logo{
125 position: absolute;
126 width: 194px;
127 right: 0px;
128 top: 0px;
129 }
130 #logo img{
131 width: 194px;
132 height: auto;
133 }
134 .bar {
135 position: absolute;
136 height: 19px;
137 width: 690px;
138 left: -653px;/*37*/
139 }
140 .grey{
141 background-color: #55565A;
142 top:0px;
143 }
144 .green{
145 background-color: #77BC1F;
146 top:23px;
147 }
148
149 .blue{
150 background-color: #009BDE;
151 top:46px;
152 }
153
154 .orange{
155 background-color: #F7A800;
156 top:69px;
157 }
158
159 .white{
160 background-color: #FFFFFF;
161 height:90px;
162 width: 670px;
163 }
164
165
166 </style>
167 </head>
168
169 <body>
170 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
171 <a href="javascript:eyeBuild.doClick(0)">
172 <div id="border">
173
174 <div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
175 <div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
176 <div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
177
178 <div id="bar0" class="bar white"></div>
179 <div id="bar1" class="bar grey"></div>
180 <div id="bar2" class="bar green"></div>
181 <div id="bar3" class="bar blue"></div>
182 <div id="bar4" class="bar orange"></div>
183 <div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
184 </div>
185 </a>
186
187 <!-- jQuery-->
188 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
189
190 <!-- GREENSOCK-->
191 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
192 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
193
194 <script>
195
196 function stage1(){
197 var tl = new TimelineMax({repeat:1, repeatDelay:5});
198 var barDelay = -0.95;
199 var copyDelay = 2.5;
200
201 var leftPos = 490;
202 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
203 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
204 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
205 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
206 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
207
208 tl.to("#copy1", .7, {opacity:0, delay:-.9 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.7 });
210
211 leftPos = -653;
212 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
213 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
214 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
215 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
216 tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
217
218 tl.to("#copy2", .7, {opacity:0, delay:-.9 });
219 tl.to("#copy3", .7, {opacity:1, delay:-.7 });
220
221 console.log( "time: " + tl.totalDuration() );
222 }
223
224
225 //---------------------
226 $(document).ready(function(){
227 stage1();
228 });
229
230
231
232 </script>
233 </body>
234
235 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
...\ 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 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
117
118
119 <style>
120
121 body{
122 margin: 0;
123 padding: 0;
124 width: 300px;
125 height: 600px;
126 line-height: 1.2;
127 font-size: 27px;
128 letter-spacing: .4;
129 color: #CD040B;
130 font-family: "Neue Haas Grotesk", Arial, sans-serif;
131 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
132 font-style: normal;
133 }
134
135 a{
136 text-decoration: none;
137 color: inherit;
138 }
139 #click-tag{
140 display: block;
141 position: absolute;
142 width: 100%;
143 height: 169px;
144 top:0px;
145 }
146 #click-tag2{
147 display: block;
148 position: absolute;
149 width: 100%;
150 height: 243px;
151 top:357px;
152 }
153
154 #border{
155 position: relative;
156 width: 300px;
157 height: 600px;
158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF;
160 overflow: hidden;
161 cursor: pointer;
162 box-sizing: border-box;
163 }
164
165 #border:hover #cta{
166 background-color: #666666;
167 }
168
169 #border:active #cta{
170 background-color: #000000;
171 }
172
173 #video, #video-controls{
174 position: absolute;
175 width: 298px;
176 height: 167px;
177 left:1px;
178 top:169px;
179 }
180 #video-controls.start{
181 background: url(assets/video-poster.jpg) no-repeat center center;
182 opacity:1;
183 }
184 #video-controls.playing {
185 opacity:0;
186 }
187
188 #video-controls:hover {
189 opacity:1;
190 }
191
192 #video-controls button{
193 border: none;
194 cursor: pointer;
195 width: 100%;
196 height: 100%;
197 }
198
199 /*
200 button#play-pause{
201 background: url(assets/play.svg) no-repeat center center;
202 background-size: 83px 83px;
203 }
204 button#play-pause.playing{
205 background: url(assets/pause.svg) no-repeat 30px 127px;
206 background-size: 20px 20px;
207 }
208 button#play-pause:hover{
209 background-size: 85px 85px;
210 }
211 button#play-pause.playing:hover{
212 background-position: 29px 126px;
213 background-size: 21px 21px;
214 }
215 */
216 button#play-pause{
217 background: url(assets/play.svg) no-repeat center center;
218 background-size: 83px 83px;
219 }
220 button#play-pause.playing{
221 background: url(assets/pause.svg) no-repeat 30px 141px;
222 background-size: 20px 20px;
223 }
224 button#play-pause:hover{
225 background-size: 85px 85px;
226 }
227 button#play-pause.playing:hover{
228 background-position: 29px 140px;
229 background-size: 21px 21px;
230 }
231
232
233 button#mute{
234 background: url(assets/mute-un.svg) no-repeat center center;
235 background-size: 20px 20px;
236 position: absolute;
237 width: 22px;
238 height: 22px;
239 left:5px;
240 bottom: 5px;
241 }
242 button#mute.muted{
243 background: url(assets/mute.svg) no-repeat center center;
244 background-size: 20px 20px;
245 }
246
247 button#mute:hover{
248 background-size: 22px 22px;
249 }
250
251
252 </style>
253
254 </head>
255
256 <body>
257 <div id="border">
258 <div id="img"><img id="logoImg" src="assets/img.gif" width="300" height="600" style="border-style:none"></div>
259 <video id="video" width="272" height="152">
260 <source src="https://player.vimeo.com/external/233484382.sd.mp4?s=902644b5e5e2872370be3b5c3b80b9ef2547af91&profile_id=164" type="video/mp4" class="A">
261 <!-- <source src="https://player.vimeo.com/external/233484621.sd.mp4?s=57947d1e6ae360d26336a99694999f6d5e7dcad3&profile_id=164" type="video/mp4" class="B"> -->
262 Your browser doesn't support HTML5 video.
263 </video>
264 <div id="video-controls" class="start">
265 <button type="button" id="play-pause" class=""></button>
266 <button type="button" id="mute" class=""></button>
267 </div>
268
269 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
270 <a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
271 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
272 </div>
273
274 </body>
275
276 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
...\ 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 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
117
118
119 <style>
120
121 body{
122 margin: 0;
123 padding: 0;
124 width: 600px;
125 height: 566px;
126 line-height: 1.2;
127 font-size: 27px;
128 letter-spacing: .4;
129 color: #CD040B;
130 font-family: "Neue Haas Grotesk", Arial, sans-serif;
131 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
132 font-style: normal;
133 }
134
135 a{
136 text-decoration: none;
137 color: inherit;
138 }
139 #click-tag{
140 display: block;
141 position: absolute;
142 width: 100%;
143 height: 114px;
144 top:0px;
145 }
146 #click-tag2{
147 display: block;
148 position: absolute;
149 width: 100%;
150 height: 114px;
151 top:453px;
152 }
153
154 #border{
155 position: relative;
156 width: 600px;
157 height: 566px;
158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF;
160 overflow: hidden;
161 cursor: pointer;
162 box-sizing: border-box;
163 }
164
165 #border:hover #cta{
166 background-color: #666666;
167 }
168
169 #border:active #cta{
170 background-color: #000000;
171 }
172
173 #video, #video-controls{
174 position: absolute;
175 width: 598px;
176 height: 337px;
177 left:1px;
178 top:113px;
179 }
180 #video-controls.start{
181 background: url(assets/video-poster.jpg) no-repeat center center;
182 opacity:1;
183 }
184 #video-controls.playing {
185 opacity:0;
186 }
187
188 #video-controls:hover {
189 opacity:1;
190 }
191
192 #video-controls button{
193 border: none;
194 cursor: pointer;
195 width: 100%;
196 height: 100%;
197 }
198
199 /*
200 button#play-pause{
201 background: url(assets/play.svg) no-repeat center center;
202 background-size: 83px 83px;
203 }
204 button#play-pause.playing{
205 background: url(assets/pause.svg) no-repeat 30px 127px;
206 background-size: 20px 20px;
207 }
208 button#play-pause:hover{
209 background-size: 85px 85px;
210 }
211 button#play-pause.playing:hover{
212 background-position: 29px 126px;
213 background-size: 21px 21px;
214 }
215 */
216 button#play-pause{
217 background: url(assets/play.svg) no-repeat center center;
218 background-size: 83px 83px;
219 }
220 button#play-pause.playing{
221 background: url(assets/pause.svg) no-repeat 30px 311px;
222 background-size: 20px 20px;
223 }
224 button#play-pause:hover{
225 background-size: 85px 85px;
226 }
227 button#play-pause.playing:hover{
228 background-position: 29px 310px;
229 background-size: 21px 21px;
230 }
231
232
233 button#mute{
234 background: url(assets/mute-un.svg) no-repeat center center;
235 background-size: 20px 20px;
236 position: absolute;
237 width: 22px;
238 height: 22px;
239 left:5px;
240 bottom: 5px;
241 }
242 button#mute.muted{
243 background: url(assets/mute.svg) no-repeat center center;
244 background-size: 20px 20px;
245 }
246
247 button#mute:hover{
248 background-size: 22px 22px;
249 }
250
251
252 </style>
253
254 </head>
255
256 <body>
257 <div id="border">
258 <div id="img"><img id="logoImg" src="assets/img.gif" width="600" height="566" style="border-style:none"></div>
259 <video id="video" width="272" height="152">
260 <source src="https://player.vimeo.com/external/233484382.sd.mp4?s=902644b5e5e2872370be3b5c3b80b9ef2547af91&profile_id=164" type="video/mp4" class="A">
261 <!-- <source src="https://player.vimeo.com/external/233484621.sd.mp4?s=57947d1e6ae360d26336a99694999f6d5e7dcad3&profile_id=164" type="video/mp4" class="B"> -->
262 Your browser doesn't support HTML5 video.
263 </video>
264 <div id="video-controls" class="start">
265 <button type="button" id="play-pause" class=""></button>
266 <button type="button" id="mute" class=""></button>
267 </div>
268
269 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
270 <a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
271 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
272 </div>
273
274 </body>
275
276 </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="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_A/index.html"></iframe>
17 <iframe id='' class="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_B/index.html"></iframe>
18 <iframe id='' class="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_C/index.html"></iframe>
19
20 <iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_A/index.html"></iframe>
21 <iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_B/index.html"></iframe>
22 <iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_C/index.html"></iframe>
23
24 <iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_A/index.html"></iframe>
25 <iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_B/index.html"></iframe>
26 <iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_C/index.html"></iframe>
27
28
29
30 </body>
31 </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 }
1 js file
...\ No newline at end of file ...\ No newline at end of file