Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
4b89a244 by Jeremy Groot
Options

wpv updates

1 parent 13492ca1
Expand all
Inline Side-by-side
Showing 64 changed files with 229 additions and 150 deletions
...@@ -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 6 <meta name="ad.size" content="width=300,height=600">
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
...@@ -162,9 +162,9 @@ ...@@ -162,9 +162,9 @@
162 </div> 162 </div>
163 163
164 <div id="img"> 164 <div id="img">
165 <img class='img1' src="./assets/img_1@2x.png" alt="img" width="300" > 165 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
166 <img class='img2' src="./assets/img_2@2x.png" alt="img" width="300" > 166 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
167 <img class='img3' src="./assets/img_3@2x.png" alt="img" width="300" > 167 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
168 </div> 168 </div>
169 169
170 <div id="copy"> 170 <div id="copy">
...@@ -194,23 +194,23 @@ ...@@ -194,23 +194,23 @@
194 194
195 function stage1(){ 195 function stage1(){
196 196
197 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 197 var tl = new TimelineMax({repeat:0, repeatDelay:10});
198 198
199 tl.to(".img1",2.5,{opacity:1}); 199 tl.to(".img1",2.5,{opacity:1});
200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
201 201
202 tl.to(".img1",2.5,{opacity:0}, "+=1"); 202 tl.to(".img1",2.5,{opacity:0}, "+=1");
203 tl.to(".txt1",0.5,{opacity:0}, "-=0.5"); 203 tl.to(".txt1",0.5,{opacity:0});
204 tl.to(".img2",2.5,{opacity:1}, "-=0.5"); 204 tl.to(".img2",2.5,{opacity:1});
205 tl.to(".txt2",1,{opacity:1}, "-=2.5"); 205 tl.to(".txt2",1,{opacity:1}, "-=2.5");
206 206
207 tl.to(".img2",2,{opacity:0}, "+=1"); 207 tl.to(".img2",2,{opacity:0}, "+=1");
208 tl.to(".txt2",0.5,{opacity:0}, "-=1.5"); 208 tl.to(".txt2",2,{opacity:0}, "-=2");
209 tl.to(".img3",2,{opacity:1}, "-=0.5"); 209 tl.to(".img3",2,{opacity:1}, "-=0.5");
210 tl.to(".txt3",1,{opacity:1}, "-=1"); 210 tl.to(".txt3",1,{opacity:1}, "-=2");
211 211
212 tl.to(".img3",2,{opacity:0}, "+=2.5"); 212 tl.to(".img3",2,{opacity:0}, "+=2.5");
213 tl.to(".txt3",0.5,{opacity:0}, "-=1.5"); 213 tl.to(".txt3",0.5,{opacity:0}, "-=2");
214 214
215 tl.to("#logo img",2,{opacity:1}, "-=1.5"); 215 tl.to("#logo img",2,{opacity:1}, "-=1.5");
216 tl.to("#last-frame",1,{opacity:1}, "-=1.5"); 216 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
......
...@@ -180,20 +180,20 @@ ...@@ -180,20 +180,20 @@
180 180
181 function stage1(){ 181 function stage1(){
182 182
183 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 183 var tl = new TimelineMax({repeat:0, repeatDelay:10});
184 184
185 tl.to(".img1",2.5,{opacity:1}); 185 tl.to(".img1",2.5,{opacity:1});
186 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 186 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
187 187
188 tl.to(".img1",2.5,{opacity:0}, "+=1"); 188 tl.to(".img1",2.5,{opacity:0}, "+=1");
189 tl.to(".txt1",0.5,{opacity:0}, "-=0.5"); 189 tl.to(".txt1",0.5,{opacity:0});
190 tl.to(".img2",2.5,{opacity:1}, "-=0.5"); 190 tl.to(".img2",2.5,{opacity:1});
191 tl.to(".txt2",1,{opacity:1}, "-=2.5"); 191 tl.to(".txt2",1,{opacity:1}, "-=2.5");
192 192
193 tl.to(".img2",2,{opacity:0}, "+=1"); 193 tl.to(".img2",2,{opacity:0}, "+=1");
194 tl.to(".txt2",0.5,{opacity:0}, "-=1.5"); 194 tl.to(".txt2",2,{opacity:0}, "-=2");
195 tl.to(".img3",2,{opacity:1}, "-=0.5"); 195 tl.to(".img3",2,{opacity:1}, "-=0.5");
196 tl.to(".txt3",1,{opacity:1}, "-=1"); 196 tl.to(".txt3",1,{opacity:1}, "-=1.5");
197 197
198 tl.to(".img3",2,{opacity:0}, "+=2.5"); 198 tl.to(".img3",2,{opacity:0}, "+=2.5");
199 tl.to(".txt3",0.5,{opacity:0}, "-=1.5"); 199 tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
......
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: white;
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
186 tl.to("#logo img",2,{opacity:1}, "-=1.5");
187 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
188 tl.to(".txt4",1,{opacity:1}, "-=2.5");
189 }
190
191 ready(stage1());
192
193 </script>
194
195 </body>
196
197 </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 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
...@@ -12,14 +12,26 @@ ...@@ -12,14 +12,26 @@
12 <body> 12 <body>
13 13
14 <h3><a href="index.html">WPV Spring Digital Media Ads</a></h3> 14 <h3><a href="index.html">WPV Spring Digital Media Ads</a></h3>
15 <!-- DEPLOY! -->
16 <iframe id='' class="b300x250 " scrolling="no" src="300x250/index.html"></iframe>
17 15
18 <iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe> 16 <h1>Balanced</h1>
19 17
20 <iframe id='' class="b728x90 " scrolling="no" src="728x90/index.html"></iframe> 18 <iframe id='' class="b300x250 " scrolling="no" src="300x250-balanced/index.html"></iframe>
21 19
22 <iframe id='' class="b300x600 " scrolling="no" src="970x250/index.html"></iframe> 20 <iframe id='' class="b300x600 " scrolling="no" src="300x600-balanced/index.html"></iframe>
21
22 <iframe id='' class="b728x90 " scrolling="no" src="728x90-balanced/index.html"></iframe>
23
24 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-balanced/index.html"></iframe>
25
26 <h1>Positive</h1>
27
28 <iframe id='' class="b300x250 " scrolling="no" src="300x250-positive/index.html"></iframe>
29
30 <iframe id='' class="b300x600 " scrolling="no" src="300x600-positive/index.html"></iframe>
31
32 <iframe id='' class="b728x90 " scrolling="no" src="728x90-positive/index.html"></iframe>
33
34 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-positive/index.html"></iframe>
23 35
24 36
25 </body> 37 </body>
......