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
Inline Side-by-side
Showing 64 changed files with 352 additions and 306 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <head><script type="text/javascript"> 2 <head>
3 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"> 4 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title> 5 <title>HTML5 Ad</title>
6
53 <meta name="ad.size" content="width=300,height=250"> 7 <meta name="ad.size" content="width=300,height=250">
54 8
55 <script type="text/javascript"> 9 <script type="text/javascript">
...@@ -68,189 +22,202 @@ ...@@ -68,189 +22,202 @@
68 clickTag = getParameterByName('clickTag'); 22 clickTag = getParameterByName('clickTag');
69 </script> 23 </script>
70 24
71
72 <style> 25 <style>
26
73 body{ 27 body{
74 margin: 0; 28 margin: 0;
75 padding: 0; 29 padding: 0;
76 width: 250px; 30 width: 300px;
77 height: 300px; 31 height: 250px;
78 line-height: 1.2; 32 line-height: 1.2;
79 font-size: 27px; 33 font-size: 27px;
80 letter-spacing: .4; 34 letter-spacing: .4;
35 background:white;
81 color: #CD040B; 36 color: #CD040B;
82 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/ 37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
83 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
84 font-style: normal; 39 font-style: normal;
85
86
87 } 40 }
88 41
89 a{ 42 a{
90 text-decoration: none; 43 text-decoration: none;
91 color: inherit; 44 color: inherit;
92 } 45 }
93 img {
94 border-style:none;
95 }
96 46
97 #border{ 47 #border{
98 position: relative; 48 position: relative;
99 width: 300px; 49 width: 300px;
100 height: 250px; 50 height: 250px;
101 border: 1px solid #55565A; 51 /* border: 1px solid #55565A; */
102 background-color: #FFFFFF; 52 background-color: #FFFFFF;
103 overflow: hidden; 53 overflow: hidden;
104 cursor: pointer; 54 cursor: pointer;
105 box-sizing: border-box; 55 box-sizing: border-box;
106 } 56 }
107 57
108 #img { 58 .img1 {
109 position: absolute; 59 opacity:0;
60 }
61
62 .img2 {
63 opacity: 0;
64 }
65
66 .img3 {
110 opacity: 0; 67 opacity: 0;
111 } 68 }
112 69
113 #copy { 70 #copy {
114 position: absolute; 71 position: absolute;
115 bottom:0; 72 width:100%;
116 width:100%; 73 top:0;
117 height:75px; 74 text-align: center;
118 background:white; 75 max-width: 300px;
119 z-index: 10; 76
120 } 77 }
121 78
122 #copy img { 79 #copy .txt2 {
123 height:55px; 80 position: absolute;
124 width:auto; 81 top:25px;
125 position: absolute; 82 left:30px;
126 left:15px; 83 opacity: 0;
127 top:10px;
128 } 84 }
129 85
130 .img2 { 86 #copy .txt3 {
131 opacity: 0; 87 opacity: 0;
88 position: absolute;
89 top:40px;
90 left:30px;
132 } 91 }
133 92
134 .img3 { 93 #copy .txt1 {
135 opacity: 0; 94 position: absolute;
95 top:25px;
96 left:30px;
97 opacity: 0;
136 } 98 }
137 99
138 #logo{ 100 #logo{
139 position: absolute; 101 position: absolute;
140 z-index: 11; 102 z-index: 11;
141 bottom:10px; 103 top: 15px;
142 right:10px; 104 width: 100%;
105 text-align: center;
143 } 106 }
144 107
145 #logo img{ 108 #logo img {
146 width:auto; 109 opacity: 0;
147 height:40px;
148 } 110 }
149 .bar { 111
112 #img img {
150 position: absolute; 113 position: absolute;
151 width: 26px; 114 top:0;
152 height: 14px;
153 z-index: 2;
154 } 115 }
155 .green{
156 background-color: #75b00a;
157 top:120px;
158 }
159
160 .blue{
161 background-color: #008bd8;
162 top:136px;
163 }
164 116
165 .orange{ 117 .circles {
166 background-color: #fa9500; 118 position: absolute;
167 top:152px; 119 bottom:0;
120 right:20px;
168 } 121 }
169 122
170 .grey{ 123 #last-frame {
171 background-color: #434448; 124 opacity:0;
172 top:102px; 125 position: absolute;
126 top:70px;
127 text-align: center;
173 } 128 }
174 129
175 .top-bar { 130 hr {
176 height:14px; 131 border:1px solid #2C5435;
177 width: 100%; 132 position: relative;
178 position:absolute; 133 width:230px;
179 top:0; 134 border-radius: 10px;
180 z-index: 12;
181 } 135 }
182 136
137 .img4 {
138 position: relative;
139 top:10px;
140 }
183 141
184 142
185 </style> 143 </style>
144
186 </head> 145 </head>
187 146
188 <body> 147 <body>
189 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 148 <a id="click-tag" href="javascript:window.open(window.clickTag)">
190 <div id="border"> 149 <div id="border">
191 150
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"> 151 <div id="logo">
201 <img src="./assets/logo.png" alt="The Commonwell Logo"> 152 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
202 </div> 153 </div>
203 154
204 <div id="copy"> 155 <div id='last-frame'>
205 <img class='img1' src="" alt="" > 156 <img class='txt4' src="./assets/txt4.png" alt="" >
206 <img class='img2' src="" alt="" > 157 <img class='img4' src="./assets/donate_btn.png" alt="img" >
207 <img class='img3' src="" alt="" >
208 </div> 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>
209 171
172 <img class='circles' src="./assets/circles.png" alt="" >
210 173
211 174 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
212 </div> 175 </div>
213 </a> 176 </a>
214
215 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 177 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
216 178
217 <script> 179 <script>
218 180
219 function ready(fn) { 181
220 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ 182 function ready(fn) {
221 fn(); 183 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
222 } else { 184 fn();
223 document.addEventListener('DOMContentLoaded', fn); 185 } else {
186 document.addEventListener('DOMContentLoaded', fn);
187 }
224 } 188 }
225 }
226 189
227 190
228 function stage1(){ 191 function stage1(){
229 192
230 var flavour = { 193 var tl = new TimelineMax({repeat:0, repeatDelay:10});
231 2:{color:'#008bd8',start:"-35px",end:"-115px"}, 194
232 }; 195 tl.to(".img1",2.5,{opacity:1});
233 196 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
234 document.querySelector('.top-bar').style.background = flavour[rand].color; 197
235 document.querySelector('#img img').setAttribute('src', "./assets/head.jpg"); 198 tl.to(".img1",2.5,{opacity:0}, "+=1");
236 document.querySelector('#img').style.top = flavour[rand].start; 199 tl.to(".txt1",0.5,{opacity:0});
237 document.querySelector('#img').style.opacity = 1; 200 tl.to(".img2",2.5,{opacity:1});
238 document.querySelector('#copy .img1').setAttribute('src', "./assets/one.png"); 201 tl.to(".txt2",1,{opacity:1}, "-=2.5");
239 document.querySelector('#copy .img2').setAttribute('src', "./assets/two.png"); 202
240 document.querySelector('#copy .img3').setAttribute('src', "./assets/three.png"); 203 tl.to(".img2",2,{opacity:0}, "+=1");
241 204 tl.to(".txt2",2,{opacity:0}, "-=2");
242 var tl = new TimelineMax({repeat:0, repeatDelay:3}); 205 tl.to(".img3",2,{opacity:1}, "-=0.5");
243 206 tl.to(".txt3",1,{opacity:1}, "-=2");
244 tl.to("#img",15.0,{top:flavour[rand].end}); 207
245 tl.to(".img1",0,{opacity:0},"-=9.5"); 208 tl.to(".img3",2,{opacity:0}, "+=2.5");
246 tl.to(".img2",0.5,{opacity:1},"-=9.5"); 209 tl.to(".circles",2,{opacity:0}, "-=2");
247 tl.to(".img2",0.5,{opacity:0},"-=3.5"); 210 tl.to(".txt3",0.5,{opacity:0}, "-=2");
248 tl.to(".img3",0.5,{opacity:1},"-=3.5"); 211
249 } 212 tl.to("#logo img",2,{opacity:1}, "-=1.5");
250 213 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
251 ready(stage1()); 214
215 }
216
217 ready(stage1());
252 218
253 </script> 219 </script>
220
254 </body> 221 </body>
255 222
256 </html> 223 </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 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>
......