Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
5e11a664 by Jeremy Groot
Options

oppi

1 parent 20d7f937
Inline Side-by-side
Showing 35 changed files with 1074 additions and 0 deletions
1 <svg xmlns="http://www.w3.org/2000/svg" width="116.05" height="24.76" viewBox="0 0 116.05 24.76"><title>btn_small</title><g id="ae2ce1e0-da9f-4132-8618-3a28e528cf1c" data-name="Layer 2"><g id="e8bd6253-da31-4f47-ad76-765dbb2eee92" data-name="Layer 1"><path d="M58.92,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17l5.62-5.63L58.32,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M51,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17L56,12.48,50.35,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M103.67,24.32H12.38a11.94,11.94,0,0,1,0-23.88h91.29a11.94,11.94,0,0,1,0,23.88Z" style="fill:none;stroke:#edc130;stroke-miterlimit:10;stroke-width:0.8809999823570251px"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <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 = "https://ontarioplanners.ca/planonit";
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 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#F2F2F2;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 }
60
61 a{
62 text-decoration: none;
63 color: inherit;
64 }
65
66 #gray-panel{
67 width:100%;
68 height:100%;
69 max-height: 100%;
70 text-align: center;
71 }
72
73 #blue-panel {
74 width:100%;
75 height:250px;
76 max-height: 100%;
77 text-align: center;
78 position: absolute;
79 background:#0B4D85;
80 top:-240px;
81 }
82
83 #gold-panel {
84 width:100%;
85 height:165px;
86 max-height: 100%;
87 text-align: center;
88 position: absolute;
89 background:#EDC130;
90 bottom:-155px;
91 }
92
93 .txt1 {
94 position: absolute;
95 top:80px;
96 left:30px;
97 opacity: 0;
98 }
99
100 .txt2 {
101 position: absolute;
102 bottom:0;
103 bottom: 15px;
104 left: 50px;
105 }
106
107 .txt3 {
108 opacity: 0;
109 position: absolute;
110 left: 50px;
111 top: 5px;
112 }
113
114 .img1 {
115 position: absolute;
116 left: 70px;
117 top: 11px;
118 height: 160px;
119 }
120
121 .img2 {
122 opacity: 0;
123 position: absolute;
124 left: 55px;
125 top: 20px;
126 height: 45px;
127 }
128
129 .img3 {
130 opacity: 0;
131 position: absolute;
132 top: 125px;
133 left: 95px;
134 transition: x 0.5s;
135 }
136
137 .img3 path {
138 pointer-events: none;
139 }
140
141 </style>
142
143 </head>
144
145 <body>
146 <a id="click-tag" href="javascript:window.open(window.clickTag)">
147 <div id="border">
148
149 <div id="gray-panel">
150 <img class='txt1' src="./assets/txt1.png" alt="" >
151 </div>
152
153 <div id='blue-panel'>
154 <img class='txt2' src="./assets/txt2.png" alt="" >
155 <img class='txt3' src="./assets/txt3.png" alt="" >
156 <svg class='img3' xmlns="http://www.w3.org/2000/svg" onmouseout="stopAnimateBtn()" onmouseover="animateBtn()" width="116.05" height="24.76" viewBox="0 0 116.05 24.76"><title>btn_small</title><g id="ae2ce1e0-da9f-4132-8618-3a28e528cf1c" data-name="Layer 2"><g id="e8bd6253-da31-4f47-ad76-765dbb2eee92" data-name="Layer 1"><path d="M58.92,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17l5.62-5.63L58.32,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M51,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17L56,12.48,50.35,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M103.67,24.32H12.38a11.94,11.94,0,0,1,0-23.88h91.29a11.94,11.94,0,0,1,0,23.88Z" style="fill:none;stroke:#edc130;stroke-miterlimit:10;stroke-width:0.8809999823570251px"/></g></g></svg>
157 </div>
158
159 <div id='gold-panel'>
160 <img class='img1' src="./assets/logo_rpp.png" alt="" >
161 <img class='img2' src="./assets/sponserd.png" alt="" >
162 </div>
163
164 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
165 </div>
166 </a>
167 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
168
169 <script>
170
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
181 function stage1(){
182
183 var tl = new TimelineMax({repeat:0, repeatDelay:10});
184
185 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
186
187 tl.to("#blue-panel",2,{top:-160}, "+=4");
188 tl.to("#gold-panel",2,{bottom:-5}, "-=2");
189
190 tl.to(".txt2",1,{opacity:0}, "+=2.5");
191 tl.to(".img1",1,{opacity:0}, "-=1.5");
192
193 tl.to("#blue-panel",2,{top:0});
194 tl.to("#gold-panel",2,{bottom:-80}, "-=2");
195
196 tl.to(".txt3",1,{opacity:1}, "-=2");
197 tl.to(".img2",1,{opacity:1}, "-=1");
198 tl.to(".img3",1,{opacity:1}, "-=1");
199
200 }
201
202 function stopAnimateBtn() {
203 Tlpath.restart();
204 Tlpath.kill();
205 }
206
207 function animateBtn() {
208 Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
209 Tlpath.to(".img3 path:first-of-type",1,{x:10});
210 Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
211 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
212 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
213 Tlpath.to(".img3 path:first-of-type",0,{x:-10});
214 Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
215 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
216 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
217 Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
218 Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
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 = "https://ontarioplanners.ca/planonit";
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 background:#F2F2F2;
39 }
40
41 #border{
42 position: absolute;
43 width: 300px;
44 height: 600px;
45 background:#F2F2F2;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 /* border:1px solid; */
50 }
51
52 a{
53 text-decoration: none;
54 color: inherit;
55 }
56
57 #gray-panel{
58 width:100%;
59 height:100%;
60 max-height: 100%;
61 text-align: center;
62 }
63
64 #blue-panel {
65 width:100%;
66 height:365px;
67 max-height: 100%;
68 text-align: center;
69 position: absolute;
70 background:#0B4D85;
71 top:-350px;
72 }
73
74 #gold-panel {
75 width:100%;
76 height:235px;
77 max-height: 100%;
78 text-align: center;
79 position: absolute;
80 right:-205px;
81 background:#EDC130;
82 bottom:-220px;
83 left:0;
84 }
85
86 .txt1 {
87 position: absolute;
88 top:135px;
89 left:40px;
90 opacity: 0;
91 }
92
93 .txt2 {
94 position: absolute;
95 top: 95px;
96 left: 45px;
97 }
98
99 .txt3 {
100 opacity: 0;
101 position: absolute;
102 left: 45px;
103 top: 80px;
104 }
105
106 .img1 {
107 position: absolute;
108 left: 65px;
109 top: 35px;
110 }
111
112 .img2 {
113 opacity: 0;
114 position: absolute;
115 left: 90px;
116 top: 60px;
117 }
118
119
120 .img3 {
121 opacity: 0;
122 position: absolute;
123 top: 255px;
124 left: 65px;
125 transition: x 0.5s;
126 }
127
128 .img3 path {
129 pointer-events: none;
130 }
131
132 </style>
133
134 </head>
135
136 <body>
137 <a id="click-tag" href="javascript:window.open(window.clickTag)">
138 <div id="border">
139
140 <div id="gray-panel">
141 <img class='txt1' src="./assets/txt1.png" alt="" >
142 </div>
143
144 <div id='blue-panel'>
145 <img class='txt2' src="./assets/txt2.png" alt="" >
146 <img class='txt3' src="./assets/txt3.png" alt="" >
147 <svg class='img3' xmlns="http://www.w3.org/2000/svg" onmouseout="stopAnimateBtn()" onmouseover="animateBtn()" width="159.52" height="34.03" viewBox="0 0 159.52 34.03"><title>btn_large</title><g id="e50de3e8-6120-4330-b91f-55315f6c998e" data-name="Layer 2"><g id="bf431405-8121-44af-940c-6c9b31dd0472" data-name="Layer 1"><path d="M81,26.83a1.17,1.17,0,0,1-.81-.33,1.13,1.13,0,0,1,0-1.61l7.72-7.74L80.17,9.43a1.13,1.13,0,0,1,0-1.61,1.17,1.17,0,0,1,1.61,0l8.53,8.54a1.09,1.09,0,0,1,.33.81,1.2,1.2,0,0,1-.33.82L81.78,26.5a1.15,1.15,0,0,1-.8.33" style="fill:#edc130"/><path d="M70,26.83a1.17,1.17,0,0,1-.81-.33,1.13,1.13,0,0,1,0-1.61l7.72-7.74L69.22,9.43a1.13,1.13,0,0,1,0-1.61,1.15,1.15,0,0,1,1.6,0l8.54,8.54a1.12,1.12,0,0,1,.32.81,1.24,1.24,0,0,1-.32.82L70.82,26.5a1.11,1.11,0,0,1-.79.33" style="fill:#edc130"/><path d="M142.5,33.43H17A16.41,16.41,0,0,1,17,.61H142.5a16.41,16.41,0,0,1,0,32.82Z" style="fill:none;stroke:#edc130;stroke-miterlimit:10;stroke-width:1.2109999656677246px"/></g></g></svg>
148 </div>
149
150 <div id='gold-panel'>
151 <img class='img1' src="./assets/logo_rpp.png" alt="" >
152 <img class='img2' src="./assets/sponserd.png" alt="" >
153 </div>
154
155 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
156 </div>
157 </a>
158 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
159
160 <script>
161
162
163 function ready(fn) {
164 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
165 fn();
166 } else {
167 document.addEventListener('DOMContentLoaded', fn);
168 }
169 }
170
171
172 function stage1(){
173
174 var tl = new TimelineMax({repeat:0, repeatDelay:10});
175
176 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
177
178 tl.to("#blue-panel",2,{top:0}, "+=4");
179 tl.to("#gold-panel",2,{bottom:0}, "-=2");
180
181 tl.to(".txt2",1,{opacity:0}, "+=2.5");
182 tl.to(".img1",1,{opacity:0}, "-=1.5");
183
184 tl.to(".txt3",1,{opacity:1});
185 tl.to(".img2",1,{opacity:1}, "-=1");
186 tl.to(".img3",1,{opacity:1}, "-=1");
187
188 }
189
190
191 function stopAnimateBtn() {
192 Tlpath.restart();
193 Tlpath.kill();
194 }
195
196 function animateBtn() {
197 Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
198 Tlpath.to(".img3 path:first-of-type",1,{x:10});
199 Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
200 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
201 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
202 Tlpath.to(".img3 path:first-of-type",0,{x:-10});
203 Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
204 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
205 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
206 Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
207 Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
208 }
209
210 ready(stage1());
211
212 </script>
213
214 </body>
215
216 </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 = "https://ontarioplanners.ca/planonit";
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: absolute;
51 width: 728px;
52 height: 90px;
53 background:#F2F2F2;
54 overflow: hidden;
55 cursor: pointer;
56 box-sizing: border-box;
57 /* border:1px solid; */
58 }
59
60 a{
61 text-decoration: none;
62 color: inherit;
63 }
64
65 #gray-panel{
66 width:100%;
67 height:100%;
68 max-height: 100%;
69 text-align: center;
70 }
71
72 #blue-panel {
73 width:566px;
74 height:100%;
75 max-height: 100%;
76 text-align: center;
77 position: absolute;
78 background:#0B4D85;
79 top:0;
80 left:-551px;
81 }
82
83 #gold-panel {
84 width:162px;
85 height:100%;
86 max-height: 100%;
87 text-align: center;
88 position: absolute;
89 background:#EDC130;
90 right:-148px;
91 top:0;
92 }
93
94 .txt1 {
95 position: absolute;
96 top:30px;
97 left:60px;
98 opacity: 0;
99 }
100
101 .txt2 {
102 position: absolute;
103 top: 12px;
104 left: 140px;
105 }
106
107 .txt3 {
108 opacity: 0;
109 position: absolute;
110 left: 110px;
111 top: 15px;
112 }
113
114 .img1 {
115 position: absolute;
116 left: 30px;
117 top: -5px;
118 height: 100px;
119 }
120
121 .img2 {
122 opacity: 0;
123 position: absolute;
124 left: 40px;
125 top: 15px;
126 height: 55px;
127 }
128
129 </style>
130 </head>
131
132 <body>
133 <a id="click-tag" href="javascript:window.open(window.clickTag)">
134 <!-- <a href="javascript:eyeBuild.doClick(0)"> -->
135 <div id="border">
136
137 <div id="gray-panel">
138 <img class='txt1' src="./assets/txt1.png" alt="" >
139 </div>
140
141 <div id='blue-panel'>
142 <img class='txt2' src="./assets/txt2.png" alt="" >
143 <img class='txt3' src="./assets/txt3.png" alt="" >
144 </div>
145
146 <div id='gold-panel'>
147 <img class='img1' src="./assets/logo_rpp.png" alt="" >
148 <img class='img2' src="./assets/sponserd.png" alt="" >
149 </div>
150
151 </div>
152 </a>
153
154
155 <!-- GREENSOCK-->
156 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
157
158 <script>
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 function stage1(){
169
170 var tl = new TimelineMax({repeat:0, repeatDelay:10});
171
172 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
173
174 tl.to("#blue-panel",2,{left:0}, "+=4");
175 tl.to("#gold-panel",2,{right:0}, "-=2");
176
177 tl.to(".txt2",1,{opacity:0}, "+=2.5");
178 tl.to(".img1",1,{opacity:0}, "-=1.5");
179
180 tl.to(".txt3",1,{opacity:1});
181 tl.to(".img2",1,{opacity:1}, "-=1");
182
183 }
184
185 ready(stage1());
186
187
188
189 </script>
190 </body>
191
192 </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 = "https://ontarioplanners.ca/planonit";
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 font-family: "Neue Haas Grotesk", Arial, sans-serif;
35 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
36 font-style: normal;
37 background:#F2F2F2;
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:#F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #gray-panel{
55 width:100%;
56 height:100%;
57 max-height: 100%;
58 text-align: center;
59 }
60
61 #blue-panel {
62 width:100%;
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 }
72
73 #gold-panel {
74 width:215px;
75 height:100%;
76 max-height: 100%;
77 text-align: center;
78 position: absolute;
79 right:-205px;
80 background:#EDC130;
81 top:0;
82 }
83
84 #gold-panel img {
85 margin-top:40px;
86 }
87
88 .txt1 {
89 opacity: 0;
90 margin-top:60px;
91 margin-left:-55px;
92 }
93
94 .txt2 {
95 margin-top:75px;
96 }
97
98 .txt3 {
99 opacity: 0;
100 }
101
102 .img2 {
103 opacity: 0;
104 position: absolute;
105 top: 40px;
106 left: 55px;
107 }
108
109 .txt3 {
110 position: absolute;
111 top: 75px;
112 left: 55px;
113 }
114
115
116 </style>
117 </head>
118
119 <body>
120 <a id="click-tag" href="javascript:window.open(window.clickTag)">
121 <div id="border">
122
123 <div id="gray-panel">
124 <img class='txt1' src="./assets/txt1.png" alt="" >
125 </div>
126
127 <div id='blue-panel'>
128 <img class='txt2' src="./assets/txt2.png" alt="" >
129 <img class='txt3' src="./assets/txt3.png" alt="" >
130 </div>
131
132 <div id='gold-panel'>
133 <img class='img1' src="./assets/logo_rpp.png" alt="" >
134 <img class='img2' src="./assets/sponserd.png" alt="" >
135 </div>
136
137 </div>
138 </a>
139
140 <!-- GREENSOCK-->
141 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
142
143 <script>
144
145
146 function ready(fn) {
147 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
148 fn();
149 } else {
150 document.addEventListener('DOMContentLoaded', fn);
151 }
152 }
153
154
155 function stage1(){
156
157 var tl = new TimelineMax({repeat:0, repeatDelay:10});
158
159 tl.to(".img1",2.5,{opacity:1});
160 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
161
162 tl.to("#blue-panel",2,{left:0}, "+=4");
163 tl.to("#gold-panel",2,{right:0}, "-=2");
164
165 tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
166 tl.to(".img1",1.5,{opacity:0}, "-=1.5");
167
168 tl.to(".txt3",1.5,{opacity:1});
169 tl.to(".img2",1.5,{opacity:1}, "-=1.5");
170 }
171
172 ready(stage1());
173
174 </script>
175
176 </body>
177
178 </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 = "https://ontarioplanners.ca/planonit";
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 font-family: "Neue Haas Grotesk", Arial, sans-serif;
35 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
36 font-style: normal;
37 background:#F2F2F2;
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:#F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #gray-panel{
55 width:100%;
56 height:100%;
57 max-height: 100%;
58 text-align: center;
59 }
60
61 #blue-panel {
62 width:100%;
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 }
72
73 #gold-panel {
74 width:215px;
75 height:100%;
76 max-height: 100%;
77 text-align: center;
78 position: absolute;
79 right:-205px;
80 background:#EDC130;
81 top:0;
82 }
83
84 #gold-panel img {
85 margin-top:40px;
86 }
87
88 .txt1 {
89 opacity: 0;
90 margin-top:60px;
91 }
92
93 .txt2 {
94 margin-top:75px;
95 }
96
97 .txt3 {
98 opacity: 0;
99 }
100
101 .img2 {
102 opacity: 0;
103 position: absolute;
104 top: 40px;
105 left: 55px;
106 }
107
108 .txt3 {
109 position: absolute;
110 top: 75px;
111 left: 55px;
112 }
113
114
115 </style>
116 </head>
117
118 <body>
119 <a id="click-tag" href="javascript:window.open(window.clickTag)">
120 <div id="border">
121
122 <div id="gray-panel">
123 <img class='txt1' src="./assets/txt1.png" alt="" >
124 </div>
125
126 <div id='blue-panel'>
127 <img class='txt2' src="./assets/txt2.png" alt="" >
128 <img class='txt3' src="./assets/txt3.png" alt="" >
129 </div>
130
131 <div id='gold-panel'>
132 <img class='img1' src="./assets/logo_rpp.png" alt="" >
133 <img class='img2' src="./assets/sponserd.png" alt="" >
134 </div>
135
136 </div>
137 </a>
138
139 <!-- GREENSOCK-->
140 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
141
142 <script>
143
144
145 function ready(fn) {
146 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
147 fn();
148 } else {
149 document.addEventListener('DOMContentLoaded', fn);
150 }
151 }
152
153
154 function stage1(){
155
156 var tl = new TimelineMax({repeat:0, repeatDelay:10});
157
158 tl.to(".img1",2.5,{opacity:1});
159 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
160
161 tl.to("#blue-panel",2,{left:0}, "+=4");
162 tl.to("#gold-panel",2,{right:0}, "-=2");
163
164 tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
165 tl.to(".img1",1.5,{opacity:0}, "-=1.5");
166
167 tl.to(".txt3",1.5,{opacity:1});
168 tl.to(".img2",1.5,{opacity:1}, "-=1.5");
169 }
170
171 ready(stage1());
172
173 </script>
174
175 </body>
176
177 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <h3><a href="index.html">WPV Spring Digital Media Ads</a></h3>
15
16 <h1>OPPI Spring Media Ads</h1>
17
18 <iframe id='' class="b300x250 " scrolling="no" src="300x250/index.html"></iframe>
19
20 <iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
21
22 <iframe id='' class="b728x90 " scrolling="no" src="728x90/index.html"></iframe>
23
24 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250/index.html"></iframe>
25
26 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-2/index.html"></iframe>
27
28 </body>
29 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
29 overflow: hidden;
30 iframe::-webkit-scrollbar {
31 display: none;
32 };
33 }
34
35 .stacked {
36 display: flex;
37
38 }
39 .b300x250 {
40 width: 300px;
41 height: 250px;
42 }
43 .b728x90 {
44 width: 728px;
45 height: 90px;
46 }
47 .b300x600 {
48 width: 300px;
49 height: 600px;
50 }
51 .b600x566 {
52 width: 600px;
53 height: 566px;
54 }