Skip to content

Tenzing / banners-with-skip

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

wpv spring ads

1 parent 0731ecad
Inline Side-by-side
Showing 45 changed files with 858 additions and 0 deletions
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=300,height=250">
54
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://westperthvillage.ca";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70
71
72 <style>
73 body{
74 margin: 0;
75 padding: 0;
76 width: 250px;
77 height: 300px;
78 line-height: 1.2;
79 font-size: 27px;
80 letter-spacing: .4;
81 color: #CD040B;
82 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
83 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
84 font-style: normal;
85
86
87 }
88
89 a{
90 text-decoration: none;
91 color: inherit;
92 }
93 img {
94 border-style:none;
95 }
96
97 #border{
98 position: relative;
99 width: 300px;
100 height: 250px;
101 border: 1px solid #55565A;
102 background-color: #FFFFFF;
103 overflow: hidden;
104 cursor: pointer;
105 box-sizing: border-box;
106 }
107
108 #img {
109 position: absolute;
110 opacity: 0;
111 }
112
113 #copy {
114 position: absolute;
115 bottom:0;
116 width:100%;
117 height:75px;
118 background:white;
119 z-index: 10;
120 }
121
122 #copy img {
123 height:55px;
124 width:auto;
125 position: absolute;
126 left:15px;
127 top:10px;
128 }
129
130 .img2 {
131 opacity: 0;
132 }
133
134 .img3 {
135 opacity: 0;
136 }
137
138 #logo{
139 position: absolute;
140 z-index: 11;
141 bottom:10px;
142 right:10px;
143 }
144
145 #logo img{
146 width:auto;
147 height:40px;
148 }
149 .bar {
150 position: absolute;
151 width: 26px;
152 height: 14px;
153 z-index: 2;
154 }
155 .green{
156 background-color: #75b00a;
157 top:120px;
158 }
159
160 .blue{
161 background-color: #008bd8;
162 top:136px;
163 }
164
165 .orange{
166 background-color: #fa9500;
167 top:152px;
168 }
169
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;
181 }
182
183
184
185 </style>
186 </head>
187
188 <body>
189 <a id="click-tag" href="javascript:window.open(window.clickTag)">
190 <div id="border">
191
192 <div class='top-bar'></div>
193 <div id="img"><img src="" alt="img" width="300" ></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>
199
200 <div id="logo">
201 <img src="./assets/logo.png" alt="The Commonwell Logo">
202 </div>
203
204 <div id="copy">
205 <img class='img1' src="" alt="" >
206 <img class='img2' src="" alt="" >
207 <img class='img3' src="" alt="" >
208 </div>
209
210
211
212 </div>
213 </a>
214
215 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
216
217 <script>
218
219 function ready(fn) {
220 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
221 fn();
222 } else {
223 document.addEventListener('DOMContentLoaded', fn);
224 }
225 }
226
227
228 function stage1(){
229
230 var flavour = {
231 2:{color:'#008bd8',start:"-35px",end:"-115px"},
232 };
233
234 document.querySelector('.top-bar').style.background = flavour[rand].color;
235 document.querySelector('#img img').setAttribute('src', "./assets/head.jpg");
236 document.querySelector('#img').style.top = flavour[rand].start;
237 document.querySelector('#img').style.opacity = 1;
238 document.querySelector('#copy .img1').setAttribute('src', "./assets/one.png");
239 document.querySelector('#copy .img2').setAttribute('src', "./assets/two.png");
240 document.querySelector('#copy .img3').setAttribute('src', "./assets/three.png");
241
242 var tl = new TimelineMax({repeat:0, repeatDelay:3});
243
244 tl.to("#img",15.0,{top:flavour[rand].end});
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");
249 }
250
251 ready(stage1());
252
253 </script>
254 </body>
255
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
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: #FFFFFF;
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:40px;
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/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="" >
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 function getRandomInt(max) {
186 return Math.floor(Math.random() * Math.floor(max));
187 }
188
189 function ready(fn) {
190 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
191 fn();
192 } else {
193 document.addEventListener('DOMContentLoaded', fn);
194 }
195 }
196
197
198 function stage1(){
199
200 var tl = new TimelineMax({repeat:0, repeatDelay:10});
201
202 tl.to(".img1",2.5,{opacity:1});
203 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
204
205 tl.to(".img1",2.5,{opacity:0}, "+=1");
206 tl.to(".txt1",0.5,{opacity:0}, "-=0.5");
207 tl.to(".img2",2.5,{opacity:1}, "-=0.5");
208 tl.to(".txt2",1,{opacity:1}, "-=2.5");
209
210 tl.to(".img2",2,{opacity:0}, "+=1");
211 tl.to(".txt2",0.5,{opacity:0}, "-=1.5");
212 tl.to(".img3",2,{opacity:1}, "-=0.5");
213 tl.to(".txt3",1,{opacity:1}, "-=1");
214
215 tl.to(".img3",2,{opacity:0}, "+=2.5");
216 tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
217
218 tl.to("#logo img",2,{opacity:1}, "-=1.5");
219 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
220
221 }
222
223 ready(stage1());
224
225 </script>
226
227 </body>
228
229 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
3
4 (function() {
5 var relegateNavigation = '';
6 var handleClickTagMessage = function(e) {
7 try {
8 var eventData = JSON.parse(e.data);
9 } catch (err) {
10 return;
11 }
12 if (eventData.isInitClickTag) {
13 if (eventData.clickTags) {
14 for (var i = 0; i < eventData.clickTags.length; i++) {
15 var clkTag = eventData.clickTags[i];
16 window[clkTag.name] = clkTag.url;
17 }
18 } else if (eventData.clickTag) {
19 window.clickTag = eventData.clickTag;
20 }
21 relegateNavigation = eventData.relegateNavigation;
22 }
23 };
24
25 if (open.call) {
26 window.open = function(open) {
27 return function(url, name, features) {
28 if (relegateNavigation === 'parent') {
29 var message = {'clickTag': url, 'isPostClickTag': true};
30 parent.postMessage(JSON.stringify(message), '*');
31 } else {
32 var args = [url, name];
33 if (features) {
34 args.push(features);
35 }
36 open.apply(window, args);
37 }
38 };
39 }(window.open);
40 }
41
42 if (window.addEventListener) {
43 window.addEventListener(
44 'message', handleClickTagMessage, false);
45 } else {
46 window.attachEvent('onmessage', handleClickTagMessage);
47 }
48 })();
49
50 </script>
51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://westperthvillage.ca";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70
71 <style>
72 body{
73 margin: 0;
74 padding: 0;
75 width: 728px;
76 height: 90px;
77 line-height: 1.2;
78 font-size: 27px;
79 letter-spacing: .4;
80 color: #CD040B;
81 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
82 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
83 font-style: normal;
84
85
86 }
87
88 a{
89 text-decoration: none;
90 color: inherit;
91 }
92 img {
93 border-style:none;
94 }
95
96 #border{
97 position: relative;
98 width: 728px;
99 height: 90px;
100 border: 1px solid #929497;
101 background-color: #FFFFFF;
102 overflow: hidden;
103 cursor: pointer;
104 box-sizing: border-box;
105 }
106
107 #copy1, #copy2, #copy3{
108 position: absolute;
109 top: 22px;
110 left: 40px;
111 opacity: 0;
112 }
113 #copy1{
114 opacity: 1;
115 }
116 #copy1 {
117 z-index: 1;
118 }
119 #copy2 {
120 left:70px;
121 }
122 #copy3 {
123 top:35px;
124 z-index: 5;
125 }
126 #logo{
127 position: absolute;
128 width: 194px;
129 right: 0px;
130 top: 0px;
131 z-index: 3;
132 height:100%;
133 background:white;
134 }
135 #logo img{
136 width: 145px;
137 height: auto;
138 margin-top: 20px;
139 margin-left: 25px;
140 }
141 .bar {
142 position: absolute;
143 height: 19px;
144 width: 37px;
145 left: 490px;
146 overflow:hidden;
147 z-index: 2;
148 }
149 .grey{
150 background-color: #54565a;
151 top:0px;
152 }
153 .green{
154 background-color: #76bc21;
155 top:23px;
156 }
157
158 .blue{
159 background-color: #009ade;
160 top:46px;
161 }
162
163 .orange{
164 background-color: #f5a800;
165 top:69px;
166 }
167
168 #bar0.bar {
169 width:485px;
170 background-color: #009ADE;
171 height:100%;
172 z-index: 1;
173 left:0;
174 }
175
176
177
178 </style>
179 </head>
180
181 <body>
182 <a id="click-tag" href="javascript:window.open(window.clickTag)">
183 <!-- <a href="javascript:eyeBuild.doClick(0)"> -->
184 <div id="border">
185
186 <div id="bar0" class="bar">
187 <div id="copy1"><img src="./assets/one.png" alt="copy1@2x" width="378"></div>
188 </div>
189 <div id="copy2"><img src="./assets/two.png" alt="copy2@2x" width="378"></div>
190 <div id="copy3"><img src="./assets/three.png" alt="copy3@2x" width="378"></div>
191 <div id="bar1" class="bar grey"></div>
192 <div id="bar2" class="bar green"></div>
193 <div id="bar3" class="bar blue"></div>
194 <div id="bar4" class="bar orange"></div>
195
196
197 <div id="logo"><img src="./assets/logo.png" alt="The Commonwell Logo"></div>
198 </div>
199 </a>
200
201 <!-- jQuery-->
202 <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
203
204 <!-- GREENSOCK-->
205 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
206 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
207
208 <script>
209
210 function stage1(){
211
212 var tl = new TimelineMax({repeat:1, repeatDelay:5});
213 var barDelay = -0.95;
214 var copyDelay = 2.5;
215
216 var leftPos = 0;
217 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
218 tl.to("#bar0", 1, {width:0, delay:-1 });
219
220 tl.to("#copy1", 0, {opacity:0, delay:0 });
221 tl.to("#copy2", 0, {opacity:1, delay:0 });
222
223 leftPos = 490;
224 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
225 tl.to("#bar0", 1, {width:485, delay:-1 });
226
227 tl.to("#copy2", 0, {opacity:0, delay:0 });
228 tl.to("#copy3", 0, {opacity:1, delay:0 });
229
230 }
231
232
233 //---------------------
234 $(document).ready(function(){
235 stage1();
236 });
237
238
239
240 </script>
241 </body>
242
243 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
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 border: 1px solid black;
49 background-color: black;/* #0077a0 */
50 overflow: hidden;
51 cursor: pointer;
52 box-sizing: border-box;
53 /* background: url(img-50.jpg); */
54 /* background: url(guide2@2x.png) no-repeat center center; */
55 /* background-size: 300px 600px ; */
56 }
57 #img{
58 position: absolute;
59 }
60 .txt{
61 position: absolute;
62 left:65px;
63 top:58px;
64 }
65 #txt1 {
66 opacity: 0;
67 }
68 #txt2 {
69 left:975px;/* 314px */
70 top:96px;
71 }
72 #txt3 {
73 top:255px;/* 59px */
74 }
75 #txt4 {
76 top:275px;/* 100px */
77 }
78
79 #logo{
80 position: absolute;
81 right: 68px;/* 68px */
82 top:125px;
83 }
84
85
86 </style>
87 </head>
88
89 <body>
90 <a id="click-tag" href="javascript:window.open(window.clickTag)">
91 <div id="border">
92 <div id="img" class="img"><img src="assets/img.jpg" alt="img" width="970"></div>
93
94 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="488">
95 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="488">
96 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="517">
97 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="517">
98
99 <img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="270">
100 </div>
101 </a>
102
103 <!-- GREENSOCK-->
104 <script src="assets/TweenMax.min.js"></script>
105
106 <script>
107
108 var tl = new TimelineMax({repeat:2, repeatDelay:0});
109 var d=10;
110
111 tl.to("#img", d, {top:-52 , ease:Linear.easeNone});// , ease:Linear.easeNone
112 d=d*-1;
113
114 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
115 tl.to("#txt2", .5, {left:314, ease:Power1.easeOut, delay:d+=1});
116
117 tl.to("#txt1", .5, {top:-100, ease:Power1.easeIn, delay:d+=2.4});
118 tl.to("#txt2", .5, {top:-80, ease:Power1.easeIn, delay:d});
119
120 tl.to("#txt3", .5, {top:59, ease:Power1.easeOut, delay:d+=.3});
121 tl.to("#txt4", .5, {top:100, ease:Power1.easeOut, delay:d+=.2});
122
123 console.log( "time: " + tl.totalDuration() );
124
125
126 </script>
127
128 </body>
129
130 </html>
...\ No newline at end of file ...\ No newline at end of file