Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
13492ca1 by Jeremy Groot
Options

WPV update

1 parent 4acba81f
Inline Side-by-side
Showing 20 changed files with 119 additions and 150 deletions
...@@ -182,9 +182,6 @@ ...@@ -182,9 +182,6 @@
182 182
183 <script> 183 <script>
184 184
185 function getRandomInt(max) {
186 return Math.floor(Math.random() * Math.floor(max));
187 }
188 185
189 function ready(fn) { 186 function ready(fn) {
190 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ 187 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
...@@ -197,7 +194,7 @@ ...@@ -197,7 +194,7 @@
197 194
198 function stage1(){ 195 function stage1(){
199 196
200 var tl = new TimelineMax({repeat:0, repeatDelay:10}); 197 var tl = new TimelineMax({repeat:1, repeatDelay:5});
201 198
202 tl.to(".img1",2.5,{opacity:1}); 199 tl.to(".img1",2.5,{opacity:1});
203 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
......
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 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90"> 6 <meta name="ad.size" content="width=728,height=90">
...@@ -97,83 +50,88 @@ ...@@ -97,83 +50,88 @@
97 position: relative; 50 position: relative;
98 width: 728px; 51 width: 728px;
99 height: 90px; 52 height: 90px;
100 border: 1px solid #929497;
101 background-color: #FFFFFF; 53 background-color: #FFFFFF;
102 overflow: hidden; 54 overflow: hidden;
103 cursor: pointer; 55 cursor: pointer;
104 box-sizing: border-box; 56 box-sizing: border-box;
105 } 57 }
106 58
107 #copy1, #copy2, #copy3{ 59 .img1 {
108 position: absolute; 60 position: absolute;
109 top: 22px; 61 top:0;
110 left: 40px; 62 opacity:0;
111 opacity: 0; 63 width:100%;
112 } 64 }
113 #copy1{ 65
114 opacity: 1; 66 .img2 {
115 } 67 position: absolute;
116 #copy1 { 68 top:0;
117 z-index: 1; 69 opacity: 0;
118 } 70 width:100%;
119 #copy2 { 71 }
120 left:70px; 72
121 } 73 .img3 {
122 #copy3 { 74 position: absolute;
123 top:35px; 75 top:0;
124 z-index: 5; 76 opacity: 0;
125 } 77 width:100%;
126 #logo{ 78 }
127 position: absolute; 79
128 width: 194px; 80 #copy {
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; 81 position: absolute;
143 height: 19px; 82 width:100%;
144 width: 37px; 83 top:0;
145 left: 490px; 84 text-align: center;
146 overflow:hidden; 85
147 z-index: 2;
148 } 86 }
149 .grey{ 87
150 background-color: #54565a; 88 #copy .txt2 {
151 top:0px; 89 position: absolute;
90 top:10px;
91 left:60px;
92 opacity: 0;
152 } 93 }
153 .green{ 94
154 background-color: #76bc21; 95 #copy .txt3 {
155 top:23px; 96 opacity: 0;
97 position: absolute;
98 top:10px;
99 left:60px;
156 } 100 }
157 101
158 .blue{ 102 #copy .txt4 {
159 background-color: #009ade; 103 opacity: 0;
160 top:46px; 104 position: absolute;
105 top:10px;
106 left:60px;
161 } 107 }
162 108
163 .orange{ 109 #copy .txt5 {
164 background-color: #f5a800; 110 opacity: 0;
165 top:69px; 111 position: absolute;
112 top:20px;
113 left:60px;
166 } 114 }
167 115
168 #bar0.bar { 116 #copy .txt1 {
169 width:485px; 117 position: absolute;
170 background-color: #009ADE; 118 top:10px;
171 height:100%; 119 left:60px;
172 z-index: 1; 120 opacity: 0;
173 left:0;
174 } 121 }
175 122
123 #logo img {
124 opacity: 0;
125 position: absolute;
126 right:20px;
127 top:20px;
128 }
176 129
130 .circles {
131 position: absolute;
132 bottom:0;
133 right:0;
134 }
177 135
178 </style> 136 </style>
179 </head> 137 </head>
...@@ -183,57 +141,71 @@ ...@@ -183,57 +141,71 @@
183 <!-- <a href="javascript:eyeBuild.doClick(0)"> --> 141 <!-- <a href="javascript:eyeBuild.doClick(0)"> -->
184 <div id="border"> 142 <div id="border">
185 143
186 <div id="bar0" class="bar"> 144 <div id="img">
187 <div id="copy1"><img src="./assets/one.png" alt="copy1@2x" width="378"></div> 145 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
188 </div> 146 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
189 <div id="copy2"><img src="./assets/two.png" alt="copy2@2x" width="378"></div> 147 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
190 <div id="copy3"><img src="./assets/three.png" alt="copy3@2x" width="378"></div> 148 </div>
191 <div id="bar1" class="bar grey"></div> 149
192 <div id="bar2" class="bar green"></div> 150 <div id="copy">
193 <div id="bar3" class="bar blue"></div> 151 <img class='txt1' src="./assets/txt1.png" alt="" >
194 <div id="bar4" class="bar orange"></div> 152 <img class='txt2' src="./assets/txt2.png" alt="" >
195 153 <img class='txt3' src="./assets/txt3.png" alt="" >
196 154 <img class='txt4' src="./assets/txt4.png" alt="" >
197 <div id="logo"><img src="./assets/logo.png" alt="The Commonwell Logo"></div> 155 <img class='txt5' src="./assets/donate_btn.png" alt="" >
156 </div>
157
158 <div id="logo">
159 <img src="./assets/logo.png" alt="WestPerthVillage Logo">
160 </div>
161
162 <img class='circles' src="./assets/circles.png" alt="" >
163
198 </div> 164 </div>
199 </a> 165 </a>
200 166
201 <!-- jQuery-->
202 <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
203 167
204 <!-- GREENSOCK--> 168 <!-- 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> 169 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
207 170
208 <script> 171 <script>
172
173 function ready(fn) {
174 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
175 fn();
176 } else {
177 document.addEventListener('DOMContentLoaded', fn);
178 }
179 }
209 180
210 function stage1(){ 181 function stage1(){
211 182
212 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 183 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 184
223 leftPos = 490; 185 tl.to(".img1",2.5,{opacity:1});
224 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 }); 186 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
225 tl.to("#bar0", 1, {width:485, delay:-1 });
226 187
227 tl.to("#copy2", 0, {opacity:0, delay:0 }); 188 tl.to(".img1",2.5,{opacity:0}, "+=1");
228 tl.to("#copy3", 0, {opacity:1, delay:0 }); 189 tl.to(".txt1",0.5,{opacity:0}, "-=0.5");
229 190 tl.to(".img2",2.5,{opacity:1}, "-=0.5");
230 } 191 tl.to(".txt2",1,{opacity:1}, "-=2.5");
231 192
232 193 tl.to(".img2",2,{opacity:0}, "+=1");
233 //--------------------- 194 tl.to(".txt2",0.5,{opacity:0}, "-=1.5");
234 $(document).ready(function(){ 195 tl.to(".img3",2,{opacity:1}, "-=0.5");
235 stage1(); 196 tl.to(".txt3",1,{opacity:1}, "-=1");
236 }); 197
198 tl.to(".img3",2,{opacity:0}, "+=2.5");
199 tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
200 tl.to(".txt4",1,{opacity:1}, "-=1");
201 tl.to("#logo img",2,{opacity:1}, "-=1");
202
203 tl.to(".txt4",0.5,{opacity:0}, "+=3");
204 tl.to(".txt5",1,{opacity:1});
205
206 }
207
208 ready(stage1());
237 209
238 210
239 211
......