Skip to content

Tenzing / banners-with-skip

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

missed ads

1 parent 5e11a664
Inline Side-by-side
Showing 19 changed files with 419 additions and 0 deletions
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(234,243,140);
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:20px;
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:25px;
113 left:60px;
114 }
115
116 #copy .txt1 {
117 position: absolute;
118 top:20px;
119 left:60px;
120 opacity: 0;
121 }
122
123 #logo img {
124 opacity: 0;
125 position: absolute;
126 right:40px;
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='txt5' src="./assets/donate_btn.png" alt="" >
155 </div>
156
157 <div id="logo">
158 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
159 </div>
160
161 <img class='circles' src="./assets/circles.png" alt="" >
162
163 </div>
164 </a>
165
166
167 <!-- GREENSOCK-->
168 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
169
170 <script>
171
172 function ready(fn) {
173 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
174 fn();
175 } else {
176 document.addEventListener('DOMContentLoaded', fn);
177 }
178 }
179
180 function stage1(){
181
182 var tl = new TimelineMax({repeat:-1, repeatDelay:7});
183
184 tl.to(".img1",1.0,{opacity:1});
185 tl.to(".txt1",1.0,{opacity:1}, "-=1");
186
187 tl.to(".img1",1,{opacity:0}, "+=2");
188 tl.to(".txt1",1,{opacity:0}, "-=1");
189 tl.to(".img2",1,{opacity:1});
190 tl.to(".txt2",1,{opacity:1}, "-=1");
191
192 tl.to(".img2",1,{opacity:0}, "+=2");
193 tl.to(".txt2",1,{opacity:0}, "-=1");
194 tl.to(".circles",1,{opacity:0}, "-=1");
195 tl.to("#border",1,{"background-color":"rgb(255,255,255)"}, "-=1");
196 tl.to(".txt3",1,{opacity:1});
197 tl.to("#logo img",1,{opacity:1}, "-=1");
198
199 tl.to(".txt3",1,{opacity:0}, "+=2");
200 tl.to(".txt5",1,{opacity:1}, "-=1");
201 }
202
203 ready(stage1());
204
205
206
207 </script>
208 </body>
209
210 </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=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:20px;
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:25px;
113 left:60px;
114 }
115
116 #copy .txt1 {
117 position: absolute;
118 top:20px;
119 left:60px;
120 opacity: 0;
121 }
122
123 #logo img {
124 opacity: 0;
125 position: absolute;
126 right:40px;
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 </div>
147
148 <div id="copy">
149 <img class='txt1' src="./assets/txt1.png" alt="" >
150 <img class='txt2' src="./assets/txt2.png" alt="" >
151 <img class='txt3' src="./assets/txt3.png" alt="" >
152 <img class='txt5' src="./assets/donate_btn.png" alt="" >
153 </div>
154
155 <div id="logo">
156 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
157 </div>
158
159 <img class='circles' src="./assets/circles.png" alt="" >
160
161 </div>
162 </a>
163
164
165 <!-- GREENSOCK-->
166 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
167
168 <script>
169
170 function ready(fn) {
171 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
172 fn();
173 } else {
174 document.addEventListener('DOMContentLoaded', fn);
175 }
176 }
177
178 function stage1(){
179
180 var tl = new TimelineMax({repeat:-1, repeatDelay:7});
181
182 tl.to(".img1",1.0,{opacity:1});
183 tl.to(".txt1",1.0,{opacity:1}, "-=1");
184
185 tl.to(".txt1",1,{opacity:0}, "+=2");
186 tl.to(".img2",1,{opacity:1});
187 tl.to(".txt2",1,{opacity:1}, "-=1");
188
189 tl.to(".img1",1,{opacity:0}, "+=2");
190 tl.to(".txt2",1,{opacity:0}, "-=1");
191 tl.to(".circles",1,{opacity:0}, "-=1");
192 tl.to("#border",1,{"background-color":"rgb(255,255,255)"}, "-=1");
193 tl.to(".txt3",1,{opacity:1});
194 tl.to("#logo img",1,{opacity:1}, "-=1");
195
196 tl.to(".txt3",1,{opacity:0}, "+=2");
197 tl.to(".txt5",1,{opacity:1}, "-=1");
198
199
200 }
201
202 ready(stage1());
203
204
205
206 </script>
207 </body>
208
209 </html>
...\ No newline at end of file ...\ No newline at end of file