Skip to content

Tenzing / banners-with-skip

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

Fall ad - revisions from spring ads - ready for client review

1 parent be73b009
Expand all
Inline Side-by-side
Showing 63 changed files with 1534 additions and 0 deletions
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 playButton.addEventListener("click", function(e) {
39 if (video.paused == true) {
40 play();
41 eyeBuild.doIAT(0);
42 } else {
43 pause();
44 eyeBuild.doIAT(1);
45 }
46 });
47 var play = function(){
48 video.play();
49 videoPlays++;
50 playButton.setAttribute("class", "pause");
51 videoControls.setAttribute("class", "play");
52 }
53 var pause = function(){
54 video.pause();
55 playButton.setAttribute("class", "play");
56 }
57 video.addEventListener('ended', function(e){
58 video.currentTime = 0;
59 pause();
60 videoControls.setAttribute("class", "start");
61 playButton.setAttribute("class", "play");
62 v0 = false;
63 v25 = false;
64 v50 = false;
65 v75 = false;
66 eyeBuild.doIAT(9);
67 }, false);
68
69 // track video plays
70 video.addEventListener('timeupdate', function(e){
71 var pct = video.currentTime / video.duration *100;
72 if (pct > 75 && !v75){
73 v75 = true;
74 eyeBuild.doIAT(8);
75 }else if (pct > 50 && !v50){
76 v50 = true;
77 eyeBuild.doIAT(7);
78 }else if (pct > 25 && !v25){
79 v25 = true;
80 eyeBuild.doIAT(6);
81 }else if (pct > 0 && !v0){
82 v0 = true;
83 eyeBuild.doIAT(5);
84 if(videoPlays>1){
85 eyeBuild.doIAT(10);
86 }
87 }
88 }, false);
89
90 }
91 </script>
92
93
94 <style>
95
96 body{
97 margin: 0;
98 padding: 0;
99 width: 300px;
100 height: 600px;
101 line-height: 1.2;
102 font-size: 27px;
103 letter-spacing: .4;
104 color: #CD040B;
105 font-family: "Neue Haas Grotesk", Arial, sans-serif;
106 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
107 font-style: normal;
108 }
109
110 a{
111 text-decoration: none;
112 color: inherit;
113 }
114 #click-tag{
115 display: block;
116 position: absolute;
117 width: 100%;
118 height: 420px;
119 top:180px;
120 }
121
122 #border{
123 position: relative;
124 width: 300px;
125 height: 600px;
126 border: 1px solid #55565A;
127 background-color: #FFFFFF;
128 overflow: hidden;
129 cursor: pointer;
130 box-sizing: border-box;
131 }
132
133 #border:hover #cta{
134 background-color: #666666;
135 }
136
137 #border:active #cta{
138 background-color: #000000;
139 }
140
141 #video, #video-controls{
142 position: absolute;
143 width: 272px;
144 height: 152px;
145 left:13px;
146 top:15px;
147 }
148 #video-controls.start{
149 background: url(assets/video-poster.jpg) no-repeat center center;
150 }
151 #video-controls button{
152 background: url(assets/play.svg) no-repeat center center;
153 border: none;
154 cursor: pointer;
155 width: 100%;
156 height: 100%;
157 }
158 #video-controls button.play:hover{
159 background-size: 88px 88px;
160 }
161 #video-controls button.play{
162 background: url(assets/play.svg) no-repeat center center;
163 background-size: 85px 85px;
164 }
165 #video-controls button.pause{
166 background: none;
167 }
168
169 </style>
170
171 </head>
172
173 <body>
174 <div id="border">
175 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
176 <video id="video" width="272" height="152">
177 <source src="assets/vid.mp4" type="video/mp4">
178 Your browser doesn't support HTML5 video.
179 </video>
180 <div id="video-controls" class="start">
181 <button type="button" id="play-pause" class="play"></button>
182 </div>
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 </body>
189
190 </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="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 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="425.51" height="47.84" viewBox="0 0 425.51 47.84"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>txt1</title><path class="cls-1" d="M75.81,397.52l15.88,41.94,16.48-41.94h6.7v47.84h-4.56V404h-0.13L93.83,445.36H89.54L73.8,404H73.66v41.34H69.11V397.52h6.7Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M141.67,397.52l18.76,47.84h-4.89l-5.83-14.87H127.93l-5.76,14.87h-4.82l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52-9.58,24.52h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M167.66,397.52v25.73l27.81-25.73h6.16l-21.37,19.76,22.38,28.07h-5.9l-19.9-24.92-9.18,8.51v16.42h-4.56V397.52h4.56Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M237.88,397.52v3.89H209.4v17.29h26.67v3.89H209.4v18.89h28.81v3.89H204.85V397.52h33Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M278.95,397.52l18.76,47.84h-4.89L287,430.48H265.21l-5.76,14.87h-4.82l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52-9.58,24.52h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M317.41,397.52l10.85,41.88h0.13l11.66-41.87h5.7l11.72,41.88h0.13l10.92-41.87h4.56l-13.2,47.84h-4.82l-12.13-42.81H342.8l-12.06,42.81h-5l-13.27-47.84h4.89Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M394.32,397.52l18.76,47.84h-4.89l-5.83-14.87H380.59l-5.76,14.87H370l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52L382,426.6h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M412,397.52l15.54,42.81h0.13l15.41-42.81h4.82l-17.75,47.84h-5.29l-17.69-47.84H412Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M483.5,397.52v3.89H455v17.29h26.67v3.89H455v18.89h28.81v3.89H450.47V397.52h33Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M489,438.25h5.63v7.1H489v-7.1Zm0.54-40.74h4.56v14.27l-1,21.64h-2.55l-1-21.64V397.52Z" transform="translate(-69.11 -397.52)"/></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
22 </script>
23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <script type="text/javascript">
26 window.onload = function() {
27 eyeBuild.initialize();
28 window.isVideoClick = false;
29
30 var videoPlays = 0;
31 var v0 = false;
32 var v25 = false;
33 var v50 = false;
34 var v75 = false;
35
36 var video = document.getElementById("video");
37 var videoControls = document.getElementById("video-controls");
38 var playButton = document.getElementById("play-pause");
39 playButton.addEventListener("click", function(e) {
40 if (video.paused == true) {
41 play();
42 eyeBuild.doIAT(0);
43 } else {
44 pause();
45 eyeBuild.doIAT(1);
46 }
47 });
48 var play = function(){
49 video.play();
50 videoPlays++;
51 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play");
53 }
54 var pause = function(){
55 video.pause();
56 playButton.setAttribute("class", "play");
57 }
58 video.addEventListener('ended', function(e){
59 video.currentTime = 0;
60 pause();
61 videoControls.setAttribute("class", "start");
62 playButton.setAttribute("class", "play");
63 v0 = false;
64 v25 = false;
65 v50 = false;
66 v75 = false;
67 eyeBuild.doIAT(9);
68 }, false);
69
70 // track video plays
71 video.addEventListener('timeupdate', function(e){
72 var pct = video.currentTime / video.duration *100;
73 if (pct > 75 && !v75){
74 v75 = true;
75 eyeBuild.doIAT(8);
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 }
88 }
89 }, false);
90
91 }
92 </script>
93
94
95 <style>
96
97 body{
98 margin: 0;
99 padding: 0;
100 width: 600px;
101 height: 566px;
102 line-height: 1.2;
103 font-size: 27px;
104 letter-spacing: .4;
105 color: #CD040B;
106 font-family: "Neue Haas Grotesk", Arial, sans-serif;
107 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
108 font-style: normal;
109 }
110
111 a{
112 text-decoration: none;
113 color: inherit;
114 }
115 #click-tag{
116 display: block;
117 position: absolute;
118 width: 100%;
119 height: 186px;
120 top:380px;
121 }
122
123 #border{
124 position: relative;
125 width: 600px;
126 height: 566px;
127 border: 1px solid #55565A;
128 background-color: #FFFFFF;
129 overflow: hidden;
130 cursor: pointer;
131 box-sizing: border-box;
132 }
133
134 #border:hover #cta{
135 background-color: #666666;
136 }
137
138 #border:active #cta{
139 background-color: #000000;
140 }
141
142 #video, #video-controls{
143 position: absolute;
144 width: 553px;
145 height: 311px;
146 left:23px;
147 top:23px;
148 }
149 #video-controls.start{
150 background: url(assets/video-poster.jpg) no-repeat center center;
151 }
152 #video-controls.play {
153 background: none;
154 }
155 #video-controls button{
156 width: 100%;
157 height: 100%;
158 background: url(assets/play.svg) no-repeat center center;
159 border: none;
160 cursor: pointer;
161 }
162 #video-controls button.play:hover{
163 background-size: 160px 160px;
164 }
165 #video-controls button.play{
166 background: url(assets/play.svg) no-repeat center center;
167 background-size: 155px 155px;
168 }
169 #video-controls button.pause{
170 background: none;
171 }
172
173
174 .bar{
175 position: absolute;
176 width: 47px;
177 height: 30px;
178 left:-50px;
179 }
180 .grey{
181 background-color: #55565A;
182 top:396px;
183 }
184 .green{
185 background-color: #77BC1F;
186 top:434px;
187 }
188 .blue{
189 background-color: #009BDE;
190 top:472px;
191 }
192 .orange{
193 background-color: #F7A800;
194 top:510px;
195 }
196 #txt1, #txt2{
197 position: absolute;
198 left:69px;
199 top:396px;
200 opacity: 0;
201 }
202 #logoImg{
203 position: absolute;
204 left:297px;
205 top:395px;
206 opacity: 0;
207 }
208 </style>
209 </head>
210
211 <body>
212 <div id="border">
213 <!--<div id="img"><img id="" src="assets/img@1x.gif" width="600" height="566" style="border-style:none"></div>-->
214 <video id="video" width="" height="">
215 <source src="assets/vid.mp4" type="video/mp4">
216 Your browser doesn't support HTML5 video.
217 </video>
218 <div id="video-controls" class="start">
219 <button type="button" id="play-pause" class="play"></button>
220 </div>
221
222 <div id="bar1" class="bar grey"></div>
223 <div id="bar2" class="bar green"></div>
224 <div id="bar3" class="bar blue"></div>
225 <div id="bar4" class="bar orange"></div>
226
227 <img id="txt1" src="assets/txt1.svg" style="border-style:none">
228 <img id="txt2" src="assets/txt2.svg" style="border-style:none">
229 <img id="logoImg" src="assets/logo.svg" style="border-style:none">
230
231 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
232 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
233 </div>
234
235 <!-- jQuery-->
236 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
237
238 <!-- GREENSOCK-->
239 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
240 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
241 <script>
242
243 function stage1(){
244 var tl = new TimelineMax({repeat:0, repeatDelay:2});
245
246 var barDelay = -0.05;
247 var barDuration = .25;
248 tl.to("#bar1", barDuration, {left:0, ease:Power1.easeInOut, delay:0 });
249 tl.to("#bar2", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
250 tl.to("#bar3", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
251 tl.to("#bar4", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
252
253 var fadeDuration = .5;
254 tl.to("#txt1", fadeDuration, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
255 tl.to("#txt1", fadeDuration, {opacity:0, ease:Power1.easeInOut, delay:1.5 });
256 tl.to("#txt2", fadeDuration, {opacity:1, ease:Power1.easeInOut, delay:-.5});
257 tl.to("#txt2", fadeDuration, {opacity:0, ease:Power1.easeInOut, delay:2});
258
259 tl.to("#logoImg", 1, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
260
261 console.log( "time: " + tl.totalDuration() );
262 }
263
264 //---------------------
265 $(document).ready(function(){
266 stage1();
267 });
268
269
270
271 </script>
272
273 </body>
274
275 </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{
116 position: absolute;
117 top: 18px;
118 left: -740px;
119 }
120 #copy2{
121 top: 30px;
122 }
123 #logo{
124 position: absolute;
125 width: 150px;
126 left: 557px;
127 top: 8px;
128 opacity: 0;
129 }
130 #logo img{
131 width: 150px;
132 height: auto;
133 }
134 #cta{
135 position: absolute;
136 top: 30px;
137 left: 740px;
138 }
139 .bar {
140 position: absolute;
141 height: 19px;
142 width: 690px;
143 left: -653px;/*37*/
144 }
145 .grey{
146 background-color: #55565A;
147 top:0px;
148 }
149 .green{
150 background-color: #77BC1F;
151 top:23px;
152 }
153
154 .blue{
155 background-color: #009BDE;
156 top:46px;
157 }
158
159 .orange{
160 background-color: #F7A800;
161 top:69px;
162 }
163
164
165 </style>
166 </head>
167
168 <body>
169 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
170 <a href="javascript:eyeBuild.doClick(0)">
171 <div id="border">
172
173 <!--
174
175 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
176 <div id="copy1"><img src="assets/txt1-trades.svg" alt="Which trades people make your day?"></div>
177
178 -->
179
180 <div id="copy1"><img src="assets/txt1-business.svg" alt="Which store owners make your day?"></div>
181
182 <div id="copy2"><img src="assets/txt2.svg" alt="Share the love in a shout-out video or selfie."></div>
183 <div id="cta"><img src="assets/url.svg" alt="thecommonwell.ca/wave"></div>
184 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
185 <div id="bar1" class="bar grey"></div>
186 <div id="bar2" class="bar green"></div>
187 <div id="bar3" class="bar blue"></div>
188 <div id="bar4" class="bar orange"></div>
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:4});
203 var barDelay = -0.95;
204 var copyDelay = 2.5;
205 var copyLeft = 30;
206 var copyLeftOff = 740;
207
208 var leftPos = 692;
209 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:0 });
210 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
211 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
212 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
213
214 tl.to("#copy1", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
215 tl.to("#copy1", 1, {left:copyLeftOff, ease:Power1.easeInOut, delay:copyDelay });
216 tl.to("#copy2", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
217 tl.to("#copy2", 1, {opacity:0, ease:Power1.easeInOut, delay:copyDelay});
218
219 leftPos = -653;
220 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:-.9 });
221 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
223 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
224
225 tl.to("#cta", 1, {left:65, ease:Power1.easeInOut, delay:-.7 });
226 tl.to("#logo", .5, {opacity:1, ease:Power1.easeInOut, delay:-.3, onComplete:this.logTime });
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 <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
80 <style>
81 body{
82 margin: 0;
83 padding: 0;
84 width: 728px;
85 height: 90px;
86 line-height: 1.2;
87 font-size: 27px;
88 letter-spacing: .4;
89 color: #CD040B;
90 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
91 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
92 font-style: normal;
93
94
95 }
96
97 a{
98 text-decoration: none;
99 color: inherit;
100 }
101 img {
102 border-style:none;
103 }
104
105 #border{
106 position: relative;
107 width: 728px;
108 height: 90px;
109 border: 1px solid #55565A;
110 background-color: #FFFFFF;
111 overflow: hidden;
112 cursor: pointer;
113 box-sizing: border-box;
114 }
115 #copy1, #copy2{
116 position: absolute;
117 top: 18px;
118 left: -740px;
119 }
120 #copy2{
121 top: 30px;
122 }
123 #logo{
124 position: absolute;
125 width: 150px;
126 left: 557px;
127 top: 8px;
128 opacity: 0;
129 }
130 #logo img{
131 width: 150px;
132 height: auto;
133 }
134 #cta{
135 position: absolute;
136 top: 30px;
137 left: 740px;
138 }
139 .bar {
140 position: absolute;
141 height: 19px;
142 width: 690px;
143 left: -653px;/*37*/
144 }
145 .grey{
146 background-color: #55565A;
147 top:0px;
148 }
149 .green{
150 background-color: #77BC1F;
151 top:23px;
152 }
153
154 .blue{
155 background-color: #009BDE;
156 top:46px;
157 }
158
159 .orange{
160 background-color: #F7A800;
161 top:69px;
162 }
163
164
165 </style>
166 </head>
167
168 <body>
169 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
170 <a href="javascript:eyeBuild.doClick(0)" class="cta">
171 <div id="border">
172
173 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
174 <!-- <div id="copy1"><img src="assets/txt1-store.svg" alt="Which store owners make your day?"></div>
175 <div id="copy1"><img src="assets/txt1-trades.svg" alt="Which trades people make your day?"></div>-->
176
177 <div id="copy2"><img src="assets/txt2.svg" alt="Share the love in a shout-out video or selfie."></div>
178 <div id="cta"><img src="assets/url.svg" alt="thecommonwell.ca/wave"></div>
179 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
180 <div id="bar1" class="bar grey"></div>
181 <div id="bar2" class="bar green"></div>
182 <div id="bar3" class="bar blue"></div>
183 <div id="bar4" class="bar orange"></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:4});
198 var barDelay = -0.95;
199 var copyDelay = 2.5;
200 var copyLeft = 30;
201 var copyLeftOff = 740;
202
203 var leftPos = 692;
204 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:0 });
205 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
206 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
207 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
208
209 tl.to("#copy1", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
210 tl.to("#copy1", 1, {left:copyLeftOff, ease:Power1.easeInOut, delay:copyDelay });
211 tl.to("#copy2", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
212 tl.to("#copy2", 1, {opacity:0, ease:Power1.easeInOut, delay:copyDelay});
213
214 leftPos = -653;
215 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:-.9 });
216 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
217 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
218 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
219
220 tl.to("#cta", 1, {left:65, ease:Power1.easeInOut, delay:-.7 });
221 tl.to("#logo", .5, {opacity:1, ease:Power1.easeInOut, delay:-.3, onComplete:this.logTime });
222
223 console.log( "time: " + tl.totalDuration() );
224 }
225
226
227 //---------------------
228 $(document).ready(function(){
229 stage1();
230 });
231
232
233
234 </script>
235 </body>
236
237 </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 #copy1, #copy2{
115 position: absolute;
116 top: 18px;
117 left: -740px;
118 }
119 #copy2{
120 top: 30px;
121 }
122 #logo{
123 position: absolute;
124 width: 150px;
125 left: 557px;
126 top: 8px;
127 opacity: 0;
128 }
129 #logo img{
130 width: 150px;
131 height: auto;
132 }
133 #cta{
134 position: absolute;
135 top: 30px;
136 left: 740px;
137 }
138 .bar {
139 position: absolute;
140 height: 19px;
141 width: 690px;
142 left: -653px;/*37*/
143 }
144 .grey{
145 background-color: #55565A;
146 top:0px;
147 }
148 .green{
149 background-color: #77BC1F;
150 top:23px;
151 }
152
153 .blue{
154 background-color: #009BDE;
155 top:46px;
156 }
157
158 .orange{
159 background-color: #F7A800;
160 top:69px;
161 }
162
163
164 </style>
165 </head>
166
167 <body>
168 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
169 <a href="javascript:eyeBuild.doClick(0)">
170 <div id="border">
171
172 <!--
173
174 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
175 <div id="copy1"><img src="assets/txt1-trades.svg" alt="Which trades people make your day?"></div>
176
177 -->
178
179 <div id="copy1"><img src="assets/txt1-store.svg" alt="Which store owners make your day?"></div>
180
181 <div id="copy2"><img src="assets/txt2.svg" alt="Share the love in a shout-out video or selfie."></div>
182 <div id="cta"><img src="assets/url.svg" alt="thecommonwell.ca/wave"></div>
183 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
184 <div id="bar1" class="bar grey"></div>
185 <div id="bar2" class="bar green"></div>
186 <div id="bar3" class="bar blue"></div>
187 <div id="bar4" class="bar orange"></div>
188 </div>
189 </a>
190
191 <!-- jQuery-->
192 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
193
194 <!-- GREENSOCK-->
195 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
196 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
197
198 <script>
199
200 function stage1(){
201 var tl = new TimelineMax({repeat:1, repeatDelay:4});
202 var barDelay = -0.95;
203 var copyDelay = 2.5;
204 var copyLeft = 30;
205 var copyLeftOff = 740;
206
207 var leftPos = 692;
208 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:0 });
209 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
210 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
211 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
212
213 tl.to("#copy1", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
214 tl.to("#copy1", 1, {left:copyLeftOff, ease:Power1.easeInOut, delay:copyDelay });
215 tl.to("#copy2", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
216 tl.to("#copy2", 1, {opacity:0, ease:Power1.easeInOut, delay:copyDelay});
217
218 leftPos = -653;
219 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:-.9 });
220 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
221 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
223
224 tl.to("#cta", 1, {left:65, ease:Power1.easeInOut, delay:-.7 });
225 tl.to("#logo", .5, {opacity:1, ease:Power1.easeInOut, delay:-.3, onComplete:this.logTime });
226
227 console.log( "time: " + tl.totalDuration() );
228 }
229
230
231 //---------------------
232 $(document).ready(function(){
233 stage1();
234 });
235
236
237
238 </script>
239 </body>
240
241 </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{
116 position: absolute;
117 top: 18px;
118 left: -740px;
119 }
120 #copy2{
121 top: 30px;
122 }
123 #logo{
124 position: absolute;
125 width: 150px;
126 left: 557px;
127 top: 8px;
128 opacity: 0;
129 }
130 #logo img{
131 width: 150px;
132 height: auto;
133 }
134 #cta{
135 position: absolute;
136 top: 30px;
137 left: 740px;
138 }
139 .bar {
140 position: absolute;
141 height: 19px;
142 width: 690px;
143 left: -653px;/*37*/
144 }
145 .grey{
146 background-color: #55565A;
147 top:0px;
148 }
149 .green{
150 background-color: #77BC1F;
151 top:23px;
152 }
153
154 .blue{
155 background-color: #009BDE;
156 top:46px;
157 }
158
159 .orange{
160 background-color: #F7A800;
161 top:69px;
162 }
163
164
165 </style>
166 </head>
167
168 <body>
169 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
170 <a href="javascript:eyeBuild.doClick(0)">
171 <div id="border">
172
173 <!--
174
175 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
176 <div id="copy1"><img src="assets/txt1-trades.svg" alt="Which trades people make your day?"></div>
177
178 -->
179
180 <div id="copy1"><img src="assets/txt1-store.svg" alt="Which store owners make your day?"></div>
181
182 <div id="copy2"><img src="assets/txt2.svg" alt="Share the love in a shout-out video or selfie."></div>
183 <div id="cta"><img src="assets/url.svg" alt="thecommonwell.ca/wave"></div>
184 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
185 <div id="bar1" class="bar grey"></div>
186 <div id="bar2" class="bar green"></div>
187 <div id="bar3" class="bar blue"></div>
188 <div id="bar4" class="bar orange"></div>
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:4});
203 var barDelay = -0.95;
204 var copyDelay = 2.5;
205 var copyLeft = 30;
206 var copyLeftOff = 740;
207
208 var leftPos = 692;
209 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:0 });
210 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
211 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
212 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
213
214 tl.to("#copy1", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
215 tl.to("#copy1", 1, {left:copyLeftOff, ease:Power1.easeInOut, delay:copyDelay });
216 tl.to("#copy2", 1, {left:copyLeft, ease:Power1.easeInOut, delay:-.9 });
217 tl.to("#copy2", 1, {opacity:0, ease:Power1.easeInOut, delay:copyDelay});
218
219 leftPos = -653;
220 tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:-.9 });
221 tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
222 tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
223 tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
224
225 tl.to("#cta", 1, {left:65, ease:Power1.easeInOut, delay:-.7 });
226 tl.to("#logo", .5, {opacity:1, ease:Power1.easeInOut, delay:-.3, onComplete:this.logTime });
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 <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">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3>
15
16 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_farmers/index.html"></iframe>
17 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_store/index.html"></iframe>
18 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_trades/index.html"></iframe>
19
20 <iframe id='' class="b300x600 stacked" scrolling="no" src="en_300x600_cwl_2016Fall_makeawave/index.html"></iframe>
21 <iframe id='' class="b600x566 stacked" scrolling="no" src="en_600x566_cwl_2016Fall_makeawave/index.html"></iframe>
22
23 </body>
24 </html>
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">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3>
15
16 <img class="stacked" src="en_320x50_cwl_2016Fall_business.gif" alt="en_320x50_cwl_2016Fall_business" width="320" height="50">
17 <img class="stacked" src="en_640x100_cwl_2016Fall_farmers.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
18 <img class="stacked" src="en_640x100_cwl_2016Fall_store.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
19 <img class="stacked" src="en_640x100_cwl_2016Fall_trades.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
20 <img class="stacked" src="en_640x100_cwl_2016Fall_business.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
21 </body>
22 </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 overflow: hidden;
29 iframe::-webkit-scrollbar {
30 display: none;
31 };
32 }
33
34 .stacked {
35 display: flex;
36
37 }
38 .b300x250 {
39 width: 300px;
40 height: 250px;
41 }
42 .b728x90 {
43 width: 728px;
44 height: 90px;
45 }
46 .b300x600 {
47 width: 300px;
48 height: 600px;
49 }
50 .b600x566 {
51 width: 600px;
52 height: 566px;
53 }
1 js file
...\ No newline at end of file ...\ No newline at end of file