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