Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
0731ecad by Jeremy Groot
Options

CWL

1 parent 19b10ae6
Inline Side-by-side
Showing 6 changed files with 0 additions and 252 deletions
1 <!DOCTYPE html>
2 <head><script type="text/javascript">
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">
52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=728,height=90">
54 <!--
55 <script type="text/javascript">
56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
78
79 <style>
80 body{
81 margin: 0;
82 padding: 0;
83 width: 728px;
84 height: 90px;
85 line-height: 1.2;
86 font-size: 27px;
87 letter-spacing: .4;
88 color: #CD040B;
89 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
90 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
91 font-style: normal;
92
93
94 }
95
96 a{
97 text-decoration: none;
98 color: inherit;
99 }
100 img {
101 border-style:none;
102 }
103
104 #border{
105 position: relative;
106 width: 728px;
107 height: 90px;
108 border: 1px solid #929497;
109 background-color: #FFFFFF;
110 overflow: hidden;
111 cursor: pointer;
112 box-sizing: border-box;
113 }
114
115 #copy1, #copy2, #copy3{
116 position: absolute;
117 top: 22px;
118 left: 40px;
119 opacity: 0;
120 }
121 #copy1{
122 opacity: 1;
123 }
124 #copy1 {
125 z-index: 1;
126 }
127 #copy2 {
128 left:70px;
129 }
130 #copy3 {
131 top:35px;
132 z-index: 5;
133 }
134 #logo{
135 position: absolute;
136 width: 194px;
137 right: 0px;
138 top: 0px;
139 z-index: 3;
140 height:100%;
141 background:white;
142 }
143 #logo img{
144 width: 145px;
145 height: auto;
146 margin-top: 20px;
147 margin-left: 25px;
148 }
149 .bar {
150 position: absolute;
151 height: 19px;
152 width: 37px;
153 left: 490px;
154 overflow:hidden;
155 z-index: 2;
156 }
157 .grey{
158 background-color: #54565a;
159 top:0px;
160 }
161 .green{
162 background-color: #76bc21;
163 top:23px;
164 }
165
166 .blue{
167 background-color: #009ade;
168 top:46px;
169 }
170
171 .orange{
172 background-color: #f5a800;
173 top:69px;
174 }
175
176 #bar0.bar {
177 width:485px;
178 background-color: #009ade;
179 height:100%;
180 z-index: 1;
181 left:0;
182 }
183
184
185
186 </style>
187 </head>
188
189 <body>
190 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
191 <a href="javascript:eyeBuild.doClick(0)">
192 <div id="border">
193
194 <div id="bar0" class="bar">
195 <div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
196 </div>
197 <div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
198 <div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
199 <div id="bar1" class="bar grey"></div>
200 <div id="bar2" class="bar green"></div>
201 <div id="bar3" class="bar blue"></div>
202 <div id="bar4" class="bar orange"></div>
203
204
205 <div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
206 </div>
207 </a>
208
209 <!-- jQuery-->
210 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
211
212 <!-- GREENSOCK-->
213 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
214 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
215
216 <script>
217
218 function stage1(){
219
220 var tl = new TimelineMax({repeat:1, repeatDelay:5});
221 var barDelay = -0.95;
222 var copyDelay = 2.5;
223
224 var leftPos = 0;
225 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
226 tl.to("#bar0", 1, {width:0, delay:-1 });
227
228 tl.to("#copy1", 0, {opacity:0, delay:0 });
229 tl.to("#copy2", 0, {opacity:1, delay:0 });
230
231 leftPos = 490;
232 tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
233 tl.to("#bar0", 1, {width:485, delay:-1 });
234
235 tl.to("#copy2", 0, {opacity:0, delay:0 });
236 tl.to("#copy3", 0, {opacity:1, delay:0 });
237
238 }
239
240
241 //---------------------
242 $(document).ready(function(){
243 stage1();
244 });
245
246
247
248 </script>
249 </body>
250
251 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
24 <iframe id='' class="b300x600 " scrolling="no" src="300x600-4/index.html"></iframe> 24 <iframe id='' class="b300x600 " scrolling="no" src="300x600-4/index.html"></iframe>
25 25
26 <iframe id='' class="b728x90 " scrolling="no" src="728x90-1/index.html"></iframe> 26 <iframe id='' class="b728x90 " scrolling="no" src="728x90-1/index.html"></iframe>
27 <iframe id='' class="b728x90 " scrolling="no" src="728x90-2/index.html"></iframe>
28 <iframe id='' class="b728x90 " scrolling="no" src="728x90-3/index.html"></iframe> 27 <iframe id='' class="b728x90 " scrolling="no" src="728x90-3/index.html"></iframe>
29 <iframe id='' class="b728x90 " scrolling="no" src="728x90-4/index.html"></iframe> 28 <iframe id='' class="b728x90 " scrolling="no" src="728x90-4/index.html"></iframe>
30 29
......