Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
20d7f937 by Jeremy Groot
Options

ritz

1 parent f5a1b039
Expand all
Inline Side-by-side
Showing 209 changed files with 1304 additions and 85 deletions
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://westperthvillage.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46
47 #border{
48 position: relative;
49 width: 300px;
50 height: 250px;
51 /* border: 1px solid #55565A; */
52 background-color: rgba(209,219,47, .4);
53 overflow: hidden;
54 cursor: pointer;
55 box-sizing: border-box;
56 }
57
58 .img1 {
59 opacity:0;
60 }
61
62 .img2 {
63 opacity: 0;
64 }
65
66 .img3 {
67 opacity: 0;
68 }
69
70 #copy {
71 position: absolute;
72 width:100%;
73 top:0;
74 text-align: center;
75 max-width: 300px;
76
77 }
78
79 #copy .txt2 {
80 position: absolute;
81 top:25px;
82 left:30px;
83 opacity: 0;
84 }
85
86 #copy .txt3 {
87 opacity: 0;
88 position: absolute;
89 top:40px;
90 left:30px;
91 }
92
93 #copy .txt1 {
94 position: absolute;
95 top:25px;
96 left:30px;
97 opacity: 0;
98 }
99
100 #logo{
101 position: absolute;
102 z-index: 11;
103 top: 15px;
104 width: 100%;
105 text-align: center;
106 }
107
108 #logo img {
109 opacity: 0;
110 }
111
112 #img img {
113 position: absolute;
114 top:0;
115 }
116
117 .circles {
118 position: absolute;
119 bottom:0;
120 right:20px;
121 }
122
123 #last-frame {
124 opacity:0;
125 position: absolute;
126 top:70px;
127 text-align: center;
128 }
129
130 hr {
131 border:1px solid #2C5435;
132 position: relative;
133 width:230px;
134 border-radius: 10px;
135 }
136
137 .img4 {
138 position: relative;
139 top:10px;
140 }
141
142
143 </style>
144
145 </head>
146
147 <body>
148 <a id="click-tag" href="javascript:window.open(window.clickTag)">
149 <div id="border">
150
151 <div id="logo">
152 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
153 </div>
154
155 <div id='last-frame'>
156 <img class='txt4' src="./assets/txt4.png" alt="" >
157 <img class='img4' src="./assets/donate_btn.png" alt="img" >
158 </div>
159
160 <div id="img">
161 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
162 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
163 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
164 </div>
165
166 <div id="copy">
167 <img class='txt1' src="./assets/txt1.png" alt="" >
168 <img class='txt2' src="./assets/txt2.png" alt="" >
169 <img class='txt3' src="./assets/txt3.png" alt="" >
170 </div>
171
172 <img class='circles' src="./assets/circles.png" alt="" >
173
174 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
175 </div>
176 </a>
177 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
178
179 <script>
180
181
182 function ready(fn) {
183 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
184 fn();
185 } else {
186 document.addEventListener('DOMContentLoaded', fn);
187 }
188 }
189
190
191 function stage1(){
192
193 var tl = new TimelineMax({repeat:0, repeatDelay:10});
194
195 tl.to(".img1",2.5,{opacity:1});
196 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
197
198 tl.to(".img1",2.5,{opacity:0}, "+=1");
199 tl.to(".txt1",0.5,{opacity:0});
200 tl.to(".img2",2.5,{opacity:1});
201 tl.to(".txt2",1,{opacity:1}, "-=2.5");
202
203 tl.to(".img2",2,{opacity:0}, "+=1");
204 tl.to(".txt2",2,{opacity:0}, "-=2");
205 tl.to(".img3",2,{opacity:1}, "-=0.5");
206 tl.to(".txt3",1,{opacity:1}, "-=2");
207
208 tl.to(".img3",2,{opacity:0}, "+=2.5");
209 tl.to(".circles",2,{opacity:0}, "-=2");
210 tl.to(".txt3",0.5,{opacity:0}, "-=2");
211 tl.to("#border",2,{"background-color":"white"}, "-=2");
212
213 tl.to("#logo img",2,{opacity:1}, "-=1.5");
214 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
215
216 }
217
218 ready(stage1());
219
220 </script>
221
222 </body>
223
224 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://westperthvillage.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46
47 #border{
48 position: relative;
49 width: 300px;
50 height: 250px;
51 /* border: 1px solid #55565A; */
52 background-color: rgba(209,219,47, .4);
53 overflow: hidden;
54 cursor: pointer;
55 box-sizing: border-box;
56 }
57
58 .img1 {
59 opacity:0;
60 }
61
62 .img2 {
63 opacity: 0;
64 }
65
66 .img3 {
67 opacity: 0;
68 }
69
70
71 .img4 {
72 opacity: 0;
73 }
74
75
76 #copy {
77 position: absolute;
78 width:100%;
79 top:0;
80 text-align: center;
81 max-width: 300px;
82
83 }
84
85 #copy .txt2 {
86 position: absolute;
87 top:25px;
88 left:50px;
89 opacity: 0;
90 }
91
92 #copy .txt3 {
93 opacity: 0;
94 position: absolute;
95 top:15px;
96 left:60px;
97 }
98
99 #copy .txt4 {
100 opacity: 0;
101 position: absolute;
102 top:40px;
103 left:30px;
104 }
105
106 #copy .txt1 {
107 position: absolute;
108 top:55px;
109 left:60px;
110 opacity: 0;
111 }
112
113 #logo{
114 position: absolute;
115 z-index: 11;
116 top: 15px;
117 width: 100%;
118 text-align: center;
119 }
120
121 #logo img {
122 opacity: 0;
123 }
124
125 #img img {
126 position: absolute;
127 top:0;
128 }
129
130 .circles {
131 position: absolute;
132 bottom:0;
133 right:20px;
134 }
135
136 #last-frame {
137 opacity:0;
138 position: absolute;
139 top:70px;
140 text-align: center;
141 }
142
143 hr {
144 border:1px solid #2C5435;
145 position: relative;
146 width:230px;
147 border-radius: 10px;
148 }
149
150 .img5 {
151 position: relative;
152 top:10px;
153 }
154
155
156 </style>
157
158 </head>
159
160 <body>
161 <a id="click-tag" href="javascript:window.open(window.clickTag)">
162 <div id="border">
163
164 <div id="logo">
165 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
166 </div>
167
168 <div id='last-frame'>
169 <img class='txt5' src="./assets/txt5.png" alt="" >
170 <img class='img5' src="./assets/donate_btn.png" alt="img" >
171 </div>
172
173 <div id="img">
174 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
175 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
176 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
177 <img class='img4' src="./assets/img4.png" alt="img" width="300" >
178 </div>
179
180 <div id="copy">
181 <img class='txt1' src="./assets/txt1.png" alt="" >
182 <img class='txt3' src="./assets/txt3.png" alt="" >
183 <img class='txt4' src="./assets/txt3.png" alt="" >
184 </div>
185
186 <img class='circles' src="./assets/circles.png" alt="" >
187
188 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
189 </div>
190 </a>
191 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
192
193 <script>
194
195
196 function ready(fn) {
197 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
198 fn();
199 } else {
200 document.addEventListener('DOMContentLoaded', fn);
201 }
202 }
203
204
205 function stage1(){
206
207 var tl = new TimelineMax({repeat:0, repeatDelay:10});
208
209 tl.to(".img1",2.5,{opacity:1});
210 tl.to(".txt1",1,{opacity:1}, "-=2.5");
211
212 tl.to(".img1",2.5,{opacity:0}, "+=1");
213 tl.to(".txt1",2,{opacity:0}, "-=2");
214 tl.to(".img2",2.5,{opacity:1});
215
216 tl.to(".img2",2,{opacity:0}, "+=1");
217 tl.to(".img3",2,{opacity:1}, "-=0.5");
218 tl.to(".txt3",1,{opacity:1}, "-=2");
219
220 tl.to(".img3",2,{opacity:0}, "+=2.5");
221 tl.to(".txt3",2,{opacity:0}, "-=2.5");
222
223 // tl.to(".img4",2,{opacity:1}, "-=0.5");
224 tl.to(".txt4",1,{opacity:1}, "-=2");
225
226 tl.to(".circles",2,{opacity:0}, "-=2");
227 tl.to(".txt4",0.5,{opacity:0}, "-=2");
228 // tl.to(".img4",0.5,{opacity:0}, "-=2.5");
229 tl.to("#border",2,{"background-color":"white"}, "-=2");
230
231 tl.to("#logo img",2,{opacity:1}, "-=1.5");
232 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
233
234 }
235
236 ready(stage1());
237
238 </script>
239
240 </body>
241
242 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://westperthvillage.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46
47 #border{
48 position: relative;
49 width: 300px;
50 height: 250px;
51 /* border: 1px solid #55565A; */
52 background-color: rgba(209,219,47, .4);
53 overflow: hidden;
54 cursor: pointer;
55 box-sizing: border-box;
56 }
57
58 .img1 {
59 opacity:0;
60 }
61
62 .img2 {
63 opacity: 0;
64 }
65
66 .img3 {
67 opacity: 0;
68 }
69
70
71 #copy {
72 position: absolute;
73 width:100%;
74 top:0;
75 text-align: center;
76 max-width: 300px;
77
78 }
79
80 #copy .txt2 {
81 position: absolute;
82 top:10px;
83 left:50px;
84 opacity: 0;
85 }
86
87 #copy .txt3 {
88 opacity: 0;
89 position: absolute;
90 top:30px;
91 left:40px;
92 }
93
94 #copy .txt4 {
95 opacity: 0;
96 position: absolute;
97 top:40px;
98 left:30px;
99 }
100
101 #copy .txt1 {
102 position: absolute;
103 top:25px;
104 left:20px;
105 opacity: 0;
106 }
107
108 #logo{
109 position: absolute;
110 z-index: 11;
111 top: 15px;
112 width: 100%;
113 text-align: center;
114 }
115
116 #logo img {
117 opacity: 0;
118 }
119
120 #img img {
121 position: absolute;
122 top:0;
123 }
124
125 .circles {
126 position: absolute;
127 bottom:0;
128 right:20px;
129 }
130
131 #last-frame {
132 opacity:0;
133 position: absolute;
134 top:70px;
135 text-align: center;
136 }
137
138 hr {
139 border:1px solid #2C5435;
140 position: relative;
141 width:230px;
142 border-radius: 10px;
143 }
144
145 .img5 {
146 position: relative;
147 top:10px;
148 }
149
150
151 </style>
152
153 </head>
154
155 <body>
156 <a id="click-tag" href="javascript:window.open(window.clickTag)">
157 <div id="border">
158
159 <div id="logo">
160 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
161 </div>
162
163 <div id='last-frame'>
164 <img class='txt4' src="./assets/txt4.png" alt="" >
165 <img class='img5' src="./assets/donate_btn.png" alt="img" >
166 </div>
167
168 <div id="img">
169 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
170 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
171 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
172 </div>
173
174 <div id="copy">
175 <img class='txt1' src="./assets/txt1.png" alt="" >
176 <img class='txt2' src="./assets/txt2.png" alt="" >
177 <img class='txt3' src="./assets/txt3.png" alt="" >
178 </div>
179
180 <img class='circles' src="./assets/circles.png" alt="" >
181
182 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
183 </div>
184 </a>
185 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
186
187 <script>
188
189
190 function ready(fn) {
191 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
192 fn();
193 } else {
194 document.addEventListener('DOMContentLoaded', fn);
195 }
196 }
197
198
199 function stage1(){
200
201 var tl = new TimelineMax({repeat:0, repeatDelay:10});
202
203 tl.to(".img1",2.5,{opacity:1});
204 tl.to(".txt1",1,{opacity:1}, "-=2.5");
205
206 tl.to(".img1",2.5,{opacity:0}, "+=1");
207 tl.to(".txt1",2,{opacity:0}, "-=2");
208 tl.to(".img2",2.5,{opacity:1});
209 tl.to(".txt2",1,{opacity:1}, "-=2");
210
211 tl.to(".img2",2,{opacity:0}, "+=1");
212 tl.to(".txt2",2,{opacity:0}, "-=2.5");
213 tl.to(".img3",2,{opacity:1}, "-=0.5");
214 tl.to(".txt3",1,{opacity:1}, "-=2");
215
216 tl.to(".img3",2,{opacity:0}, "+=2.5");
217 tl.to(".txt3",2,{opacity:0}, "-=2.5");
218
219 // tl.to(".img4",2,{opacity:1}, "-=0.5");
220
221 tl.to(".circles",2,{opacity:0}, "-=2");
222 // tl.to(".txt4",0.5,{opacity:0}, "-=2");
223 // tl.to(".img4",0.5,{opacity:0}, "-=2.5");
224 tl.to("#border",2,{"background-color":"white"}, "-=2");
225
226 tl.to("#logo img",2,{opacity:1}, "-=1.5");
227 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
228
229 }
230
231 ready(stage1());
232
233 </script>
234
235 </body>
236
237 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head> 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 }
3 41
4 <meta charset="utf-8"> 42 if (window.addEventListener) {
5 <title>HTML5 Ad</title> 43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
6 49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=300,height=250"> 53 <meta name="ad.size" content="width=300,height=250">
8 54
9 <script type="text/javascript"> 55 <script type="text/javascript">
...@@ -22,21 +68,22 @@ ...@@ -22,21 +68,22 @@
22 clickTag = getParameterByName('clickTag'); 68 clickTag = getParameterByName('clickTag');
23 </script> 69 </script>
24 70
25 <style>
26 71
72 <style>
27 body{ 73 body{
28 margin: 0; 74 margin: 0;
29 padding: 0; 75 padding: 0;
30 width: 300px; 76 width: 250px;
31 height: 250px; 77 height: 300px;
32 line-height: 1.2; 78 line-height: 1.2;
33 font-size: 27px; 79 font-size: 27px;
34 letter-spacing: .4; 80 letter-spacing: .4;
35 background:white;
36 color: #CD040B; 81 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif; 82 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 83 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal; 84 font-style: normal;
85
86
40 } 87 }
41 88
42 a{ 89 a{
...@@ -48,114 +95,127 @@ ...@@ -48,114 +95,127 @@
48 } 95 }
49 96
50 #border{ 97 #border{
51 position: absolute; 98 position: relative;
52 width: 300px; 99 width: 300px;
53 height: 250px; 100 height: 250px;
54 background:#F2F2F2; 101 border: 1px solid #55565A;
102 background-color: #FFFFFF;
55 overflow: hidden; 103 overflow: hidden;
56 cursor: pointer; 104 cursor: pointer;
57 box-sizing: border-box; 105 box-sizing: border-box;
58 /* border:1px solid; */
59 } 106 }
60 107
61 a{ 108 #img {
62 text-decoration: none; 109 position: absolute;
63 color: inherit; 110 opacity: 0;
64 } 111 }
65 112
66 #gray-panel{ 113 #copy {
114 position: absolute;
115 bottom:0;
67 width:100%; 116 width:100%;
68 height:100%; 117 height:75px;
69 max-height: 100%; 118 background:white;
70 text-align: center; 119 z-index: 10;
71 } 120 }
72 121
73 #blue-panel { 122 #copy img {
74 width:100%; 123 height:55px;
75 height:250px; 124 width:auto;
76 max-height: 100%;
77 text-align: center;
78 position: absolute; 125 position: absolute;
79 background:#0B4D85; 126 left:15px;
80 top:-240px; 127 top:10px;
81 } 128 }
82 129
83 #gold-panel { 130 .img2 {
84 width:100%; 131 opacity: 0;
85 height:165px;
86 max-height: 100%;
87 text-align: center;
88 position: absolute;
89 background:#EDC130;
90 bottom:-155px;
91 } 132 }
92 133
93 .txt1 { 134 .img3 {
94 position: absolute;
95 top:80px;
96 left:30px;
97 opacity: 0; 135 opacity: 0;
98 } 136 }
99 137
100 .txt2 { 138 #logo{
101 position: absolute; 139 position: absolute;
102 bottom:0; 140 z-index: 11;
103 bottom: 15px; 141 bottom:10px;
104 left: 50px; 142 right:10px;
105 } 143 }
106 144
107 .txt3 { 145 #logo img{
108 opacity: 0; 146 width:auto;
147 height:40px;
148 }
149 .bar {
109 position: absolute; 150 position: absolute;
110 left: 50px; 151 width: 26px;
111 top: 5px; 152 height: 14px;
153 z-index: 2;
154 }
155 .green{
156 background-color: #75b00a;
157 top:120px;
112 } 158 }
113 159
114 .img1 { 160 .blue{
115 position: absolute; 161 background-color: #008bd8;
116 left: 70px; 162 top:136px;
117 top: 11px;
118 height: 160px;
119 } 163 }
120 164
121 .img2 { 165 .orange{
122 opacity: 0; 166 background-color: #fa9500;
123 position: absolute; 167 top:152px;
124 left: 55px; 168 }
125 top: 20px; 169
126 height: 45px; 170 .grey{
171 background-color: #434448;
172 top:102px;
173 }
174
175 .top-bar {
176 height:14px;
177 width: 100%;
178 position:absolute;
179 top:0;
180 z-index: 12;
127 } 181 }
128 182
129 </style>
130 183
184
185 </style>
131 </head> 186 </head>
132 187
133 <body> 188 <body>
134 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 189 <a id="click-tag" href="javascript:window.open(window.clickTag)">
135 <div id="border"> 190 <div id="border">
136 191
137 <div id="gray-panel"> 192 <div class='top-bar'></div>
138 <img class='txt1' src="./assets/txt1.png" alt="" > 193 <div id="img"><img src="" alt="img" width="300" ></div>
139 </div> 194
195 <div id="bar1" class="bar green"></div>
196 <div id="bar2" class="bar blue"></div>
197 <div id="bar3" class="bar orange"></div>
198 <div id="bar4" class="bar grey"></div>
140 199
141 <div id='blue-panel'> 200 <div id="logo">
142 <img class='txt2' src="./assets/txt2.png" alt="" > 201 <img src="./assets/logo.png" alt="The Commonwell Logo">
143 <img class='txt3' src="./assets/txt3.png" alt="" >
144 </div> 202 </div>
145 203
146 <div id='gold-panel'> 204 <div id="copy">
147 <img class='img1' src="./assets/logo_rpp.png" alt="" > 205 <img class='img1' src="" alt="" >
148 <img class='img2' src="./assets/sponserd.png" alt="" > 206 <img class='img2' src="" alt="" >
207 <img class='img3' src="" alt="" >
149 </div> 208 </div>
150 209
151 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> --> 210
211
152 </div> 212 </div>
153 </a> 213 </a>
214
154 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 215 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
155 216
156 <script> 217 <script>
157 218
158
159 function ready(fn) { 219 function ready(fn) {
160 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ 220 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
161 fn(); 221 fn();
...@@ -167,28 +227,30 @@ ...@@ -167,28 +227,30 @@
167 227
168 function stage1(){ 228 function stage1(){
169 229
170 var tl = new TimelineMax({repeat:0, repeatDelay:10}); 230 var flavour = {
171 231 2:{color:'#008bd8',start:"-35px",end:"-115px"},
172 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 232 };
173 233
174 tl.to("#blue-panel",2,{top:-160}, "+=4"); 234 document.querySelector('.top-bar').style.background = flavour[rand].color;
175 tl.to("#gold-panel",2,{bottom:-5}, "-=2"); 235 document.querySelector('#img img').setAttribute('src', "./assets/head.jpg");
176 236 document.querySelector('#img').style.top = flavour[rand].start;
177 tl.to(".txt2",1,{opacity:0}, "+=2.5"); 237 document.querySelector('#img').style.opacity = 1;
178 tl.to(".img1",1,{opacity:0}, "-=1.5"); 238 document.querySelector('#copy .img1').setAttribute('src', "./assets/one.png");
179 239 document.querySelector('#copy .img2').setAttribute('src', "./assets/two.png");
180 tl.to("#blue-panel",2,{top:0}); 240 document.querySelector('#copy .img3').setAttribute('src', "./assets/three.png");
181 tl.to("#gold-panel",2,{bottom:-80}, "-=2"); 241
182 242 var tl = new TimelineMax({repeat:0, repeatDelay:3});
183 tl.to(".txt3",1,{opacity:1}, "-=2"); 243
184 tl.to(".img2",1,{opacity:1}, "-=1"); 244 tl.to("#img",15.0,{top:flavour[rand].end});
185 245 tl.to(".img1",0,{opacity:0},"-=9.5");
246 tl.to(".img2",0.5,{opacity:1},"-=9.5");
247 tl.to(".img2",0.5,{opacity:0},"-=3.5");
248 tl.to(".img3",0.5,{opacity:1},"-=3.5");
186 } 249 }
187 250
188 ready(stage1()); 251 ready(stage1());
189 252
190 </script> 253 </script>
191
192 </body> 254 </body>
193 255
194 </html> 256 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <meta name="ad.size" content="width=300,height=600">
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://westperthvillage.ca";
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 <style>
24
25 body{
26 margin: 0;
27 padding: 0;
28 width: 300px;
29 height: 600px;
30 line-height: 1.2;
31 font-size: 27px;
32 letter-spacing: .4;
33 background:white;
34 color: #CD040B;
35 font-family: "Neue Haas Grotesk", Arial, sans-serif;
36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
37 font-style: normal;
38 }
39
40 a{
41 text-decoration: none;
42 color: inherit;
43 }
44
45 #border{
46 position: relative;
47 width: 300px;
48 height: 600px;
49 /* border: 1px solid #55565A; */
50 background-color: rgba(209,219,47, .4);
51 overflow: hidden;
52 cursor: pointer;
53 box-sizing: border-box;
54 }
55
56 .img1 {
57 opacity:0;
58 }
59
60 .img2 {
61 opacity: 0;
62 }
63
64 .img3 {
65 opacity: 0;
66 }
67
68 #copy {
69 position: absolute;
70 width:100%;
71 top:0;
72 text-align: center;
73 max-width: 300px;
74
75 }
76
77 #copy .txt2 {
78 position: absolute;
79 top:45px;
80 left:40px;
81 opacity: 0;
82 }
83
84 #copy .txt3 {
85 opacity: 0;
86 position: absolute;
87 top:125px;
88 left:40px;
89 }
90
91 #copy .txt1 {
92 position: absolute;
93 top:45px;
94 left:40px;
95 opacity: 0;
96 }
97
98 #logo{
99 position: absolute;
100 z-index: 11;
101 top:45px;
102 left:45px;
103 }
104
105 #logo img {
106 opacity: 0;
107 }
108
109 #img img {
110 position: absolute;
111 top:0;
112 }
113
114 .circles {
115 position: absolute;
116 bottom:0;
117 right:20px;
118 }
119
120 #last-frame {
121 opacity:0;
122 position: absolute;
123 top:145px;
124 left:15px;
125 }
126
127 hr {
128 border:1px solid #2C5435;
129 position: relative;
130 width:230px;
131 border-radius: 10px;
132 }
133
134 .img4 {
135 position: relative;
136 left:20px;
137 top:50px;
138 }
139
140 .txt4 {
141 padding:30px 0;
142 }
143
144
145 </style>
146
147 </head>
148
149 <body>
150 <a id="click-tag" href="javascript:window.open(window.clickTag)">
151 <div id="border">
152
153 <div id="logo">
154 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
155 </div>
156
157 <div id='last-frame'>
158 <hr />
159 <img class='txt4' src="./assets/txt4.png" alt="" >
160 <hr />
161 <img class='img4' src="./assets/donate_btn.png" alt="img" >
162 </div>
163
164 <div id="img">
165 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
166 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
167 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
168 </div>
169
170 <div id="copy">
171 <img class='txt1' src="./assets/txt1.png" alt="" >
172 <img class='txt2' src="./assets/txt2.png" alt="" >
173 <img class='txt3' src="./assets/txt3.png" alt="" >
174 </div>
175
176 <img class='circles' src="./assets/circles.png" alt="" >
177
178 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
179 </div>
180 </a>
181 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
182
183 <script>
184
185
186 function ready(fn) {
187 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
188 fn();
189 } else {
190 document.addEventListener('DOMContentLoaded', fn);
191 }
192 }
193
194
195 function stage1(){
196
197 var tl = new TimelineMax({repeat:0, repeatDelay:10});
198
199 tl.to(".img1",2.5,{opacity:1});
200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
201
202 tl.to(".img1",2.5,{opacity:0}, "+=1");
203 tl.to(".txt1",0.5,{opacity:0});
204 tl.to(".img2",2.5,{opacity:1});
205 tl.to(".txt2",1,{opacity:1}, "-=2.5");
206
207 tl.to(".img2",2,{opacity:0}, "+=1");
208 tl.to(".txt2",2,{opacity:0}, "-=2");
209 tl.to(".img3",2,{opacity:1}, "-=0.5");
210 tl.to(".txt3",1,{opacity:1}, "-=2");
211
212 tl.to(".img3",2,{opacity:0}, "+=2.5");
213 tl.to(".txt3",0.5,{opacity:0}, "-=2");
214 tl.to("#border",2,{"background-color":"white"}, "-=2");
215
216 tl.to("#logo img",2,{opacity:1}, "-=1.5");
217 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
218
219 }
220
221 ready(stage1());
222
223 </script>
224
225 </body>
226
227 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <meta name="ad.size" content="width=300,height=600">
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://westperthvillage.ca";
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 <style>
24
25 body{
26 margin: 0;
27 padding: 0;
28 width: 300px;
29 height: 600px;
30 line-height: 1.2;
31 font-size: 27px;
32 letter-spacing: .4;
33 background:white;
34 color: #CD040B;
35 font-family: "Neue Haas Grotesk", Arial, sans-serif;
36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
37 font-style: normal;
38 }
39
40 a{
41 text-decoration: none;
42 color: inherit;
43 }
44
45 #border{
46 position: relative;
47 width: 300px;
48 height: 600px;
49 /* border: 1px solid #55565A; */
50 background-color: rgba(209,219,47, .4);
51 overflow: hidden;
52 cursor: pointer;
53 box-sizing: border-box;
54 }
55
56 .img1 {
57 opacity:0;
58 }
59
60 .img2 {
61 opacity: 0;
62 }
63
64 .img3 {
65 opacity: 0;
66 }
67
68 #copy {
69 position: absolute;
70 width:100%;
71 top:0;
72 text-align: center;
73 max-width: 300px;
74
75 }
76
77 #copy .txt2 {
78 position: absolute;
79 top:65px;
80 left:50px;
81 opacity: 0;
82 }
83
84 #copy .txt3 {
85 opacity: 0;
86 position: absolute;
87 top:125px;
88 left:40px;
89 }
90
91 #copy .txt1 {
92 position: absolute;
93 top:45px;
94 left:50px;
95 opacity: 0;
96 }
97
98 #logo{
99 position: absolute;
100 z-index: 11;
101 top:45px;
102 left:45px;
103 }
104
105 #logo img {
106 opacity: 0;
107 }
108
109 #img img {
110 position: absolute;
111 top:0;
112 }
113
114 .circles {
115 position: absolute;
116 bottom:0;
117 right:20px;
118 }
119
120 #last-frame {
121 opacity:0;
122 position: absolute;
123 top:145px;
124 left:15px;
125 }
126
127 hr {
128 border:1px solid #2C5435;
129 position: relative;
130 width:230px;
131 border-radius: 10px;
132 }
133
134 .img4 {
135 position: relative;
136 left:20px;
137 top:50px;
138 }
139
140 .txt4 {
141 padding:30px 0;
142 }
143
144
145 </style>
146
147 </head>
148
149 <body>
150 <a id="click-tag" href="javascript:window.open(window.clickTag)">
151 <div id="border">
152
153 <div id="logo">
154 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
155 </div>
156
157 <div id='last-frame'>
158 <hr />
159 <img class='txt4' src="./assets/txt4.png" alt="" >
160 <hr />
161 <img class='img4' src="./assets/donate_btn.png" alt="img" >
162 </div>
163
164 <div id="img">
165 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
166 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
167 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
168 </div>
169
170 <div id="copy">
171 <img class='txt1' src="./assets/txt1.png" alt="" >
172 <img class='txt2' src="./assets/txt2.png" alt="" >
173 <img class='txt3' src="./assets/txt3.png" alt="" >
174 </div>
175
176 <img class='circles' src="./assets/circles.png" alt="" >
177
178 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
179 </div>
180 </a>
181 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
182
183 <script>
184
185
186 function ready(fn) {
187 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
188 fn();
189 } else {
190 document.addEventListener('DOMContentLoaded', fn);
191 }
192 }
193
194
195 function stage1(){
196
197 var tl = new TimelineMax({repeat:0, repeatDelay:10});
198
199 tl.to(".img1",2.5,{opacity:1});
200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
201
202 tl.to(".img1",2,{opacity:0}, "+=1");
203 tl.to(".txt1",2,{opacity:0}, "-=2");
204 tl.to(".img2",2,{opacity:1});
205 tl.to(".txt2",1,{opacity:1}, "-=2.5");
206
207 tl.to(".img2",2,{opacity:0}, "+=1");
208 tl.to(".txt2",2,{opacity:0}, "-=2");
209 tl.to(".img3",2,{opacity:1}, "-=0.5");
210 tl.to(".txt3",1,{opacity:1}, "-=2");
211
212 tl.to(".img3",2,{opacity:0}, "+=2.5");
213 tl.to(".txt3",0.5,{opacity:0}, "-=2");
214 tl.to("#border",2,{"background-color":"white"}, "-=2");
215
216 tl.to("#logo img",2,{opacity:1}, "-=1.5");
217 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
218
219 }
220
221 ready(stage1());
222
223 </script>
224
225 </body>
226
227 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.