Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
3fca6336 by Dan Rempel
Options

CWL update ads for new sizes

1 parent 2eef8dce
Expand all
Inline Side-by-side
Showing 18 changed files with 230 additions and 3 deletions
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="425.51" height="47.84" viewBox="0 0 425.51 47.84"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>txt1</title><path class="cls-1" d="M75.81,397.52l15.88,41.94,16.48-41.94h6.7v47.84h-4.56V404h-0.13L93.83,445.36H89.54L73.8,404H73.66v41.34H69.11V397.52h6.7Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M141.67,397.52l18.76,47.84h-4.89l-5.83-14.87H127.93l-5.76,14.87h-4.82l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52-9.58,24.52h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M167.66,397.52v25.73l27.81-25.73h6.16l-21.37,19.76,22.38,28.07h-5.9l-19.9-24.92-9.18,8.51v16.42h-4.56V397.52h4.56Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M237.88,397.52v3.89H209.4v17.29h26.67v3.89H209.4v18.89h28.81v3.89H204.85V397.52h33Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M278.95,397.52l18.76,47.84h-4.89L287,430.48H265.21l-5.76,14.87h-4.82l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52-9.58,24.52h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M317.41,397.52l10.85,41.88h0.13l11.66-41.87h5.7l11.72,41.88h0.13l10.92-41.87h4.56l-13.2,47.84h-4.82l-12.13-42.81H342.8l-12.06,42.81h-5l-13.27-47.84h4.89Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M394.32,397.52l18.76,47.84h-4.89l-5.83-14.87H380.59l-5.76,14.87H370l19.23-47.84h5.09Zm6.5,29.08-9.25-24.52L382,426.6h18.83Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M412,397.52l15.54,42.81h0.13l15.41-42.81h4.82l-17.75,47.84h-5.29l-17.69-47.84H412Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M483.5,397.52v3.89H455v17.29h26.67v3.89H455v18.89h28.81v3.89H450.47V397.52h33Z" transform="translate(-69.11 -397.52)"/><path class="cls-1" d="M489,438.25h5.63v7.1H489v-7.1Zm0.54-40.74h4.56v14.27l-1,21.64h-2.55l-1-21.64V397.52Z" transform="translate(-69.11 -397.52)"/></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 <script type="text/javascript">
7
8 // IAB source: modified to allow link testing
9 var clickTag = "http://thecommonwell.ca/wave";
10 function getParameterByName(name)
11 {
12 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
13 if (match == null || match == ""){
14 return clickTag;
15 } else{
16 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
17 }
18 }
19 clickTag = getParameterByName('clickTag');
20
21 </script>
22 <script type="text/javascript">
23 window.onload = function() {
24 window.isVideoClick = false;
25 var video = document.getElementById("video");
26 var videoControls = document.getElementById("video-controls");
27 var playButton = document.getElementById("play-pause");
28 playButton.addEventListener("click", function(e) {
29 if (video.paused == true) {
30 video.play();
31 playButton.setAttribute("class", "pause");
32 videoControls.setAttribute("class", "play");
33 } else {
34 video.pause();
35 playButton.setAttribute("class", "play");
36 }
37 });
38
39
40 }
41 </script>
42
43
44 <style>
45
46 body{
47 margin: 0;
48 padding: 0;
49 width: 600px;
50 height: 566px;
51 line-height: 1.2;
52 font-size: 27px;
53 letter-spacing: .4;
54 color: #CD040B;
55 font-family: "Neue Haas Grotesk", Arial, sans-serif;
56 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
57 font-style: normal;
58 }
59
60 a{
61 text-decoration: none;
62 color: inherit;
63 }
64 #click-tag{
65 display: block;
66 position: absolute;
67 width: 100%;
68 height: 186px;
69 top:380px;
70 }
71
72 #border{
73 position: relative;
74 width: 600px;
75 height: 566px;
76 border: 1px solid #55565A;
77 background-color: #FFFFFF;
78 overflow: hidden;
79 cursor: pointer;
80 box-sizing: border-box;
81 }
82
83 #border:hover #cta{
84 background-color: #666666;
85 }
86
87 #border:active #cta{
88 background-color: #000000;
89 }
90
91 #video, #video-controls{
92 position: absolute;
93 width: 553px;
94 height: 311px;
95 left:23px;
96 top:23px;
97 }
98 #video-controls{
99 background: url(assets/video-poster.jpg) no-repeat center center;
100 }
101 #video-controls.play {
102 background: none;
103 }
104 #video-controls button{
105 width: 100%;
106 height: 100%;
107 background: url(assets/play.svg) no-repeat center center;
108 border: none;
109 cursor: pointer;
110 }
111 #video-controls button.play:hover{
112 background-size: 160px 160px;
113 }
114 #video-controls button.play{
115 background: url(assets/play.svg) no-repeat center center;
116 background-size: 155px 155px;
117 }
118 #video-controls button.pause{
119 background: none;
120 }
121 .bar{
122 position: absolute;
123 width: 47px;
124 height: 30px;
125 left:-50px;
126 }
127 .grey{
128 background-color: #55565A;
129 top:396px;
130 }
131 .green{
132 background-color: #77BC1F;
133 top:434px;
134 }
135 .blue{
136 background-color: #009BDE;
137 top:472px;
138 }
139 .orange{
140 background-color: #F7A800;
141 top:510px;
142 }
143 #txt1, #txt2{
144 position: absolute;
145 left:69px;
146 top:396px;
147 opacity: 0;
148 }
149 #logoImg{
150 position: absolute;
151 left:297px;
152 top:395px;
153 opacity: 0;
154 }
155 </style>
156 </head>
157
158 <body>
159 <div id="border">
160 <!--<div id="img"><img id="" src="assets/img@1x.gif" width="600" height="566" style="border-style:none"></div>-->
161 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
162 <video id="video" width="272" height="152">
163 <source src="assets/vid.mp4" type="video/mp4">
164 Your browser doesn't support HTML5 video.
165 </video>
166 <div id="video-controls">
167 <button type="button" id="play-pause" class="play"></button>
168 </div>
169
170 <div id="bar1" class="bar grey"></div>
171 <div id="bar2" class="bar green"></div>
172 <div id="bar3" class="bar blue"></div>
173 <div id="bar4" class="bar orange"></div>
174
175 <img id="txt1" src="assets/txt1.svg" style="border-style:none">
176 <img id="txt2" src="assets/txt2.svg" style="border-style:none">
177 <img id="logoImg" src="assets/logo.svg" style="border-style:none">
178
179 </div>
180
181 <!-- jQuery-->
182 <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
183
184 <!-- GREENSOCK-->
185 <!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
186 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
187 <script>
188
189 function stage1(){
190 var tl = new TimelineMax({repeat:0, repeatDelay:2});
191
192 var barDelay = -0.05;
193 var barDuration = .25;
194 tl.to("#bar1", barDuration, {left:0, ease:Power1.easeInOut, delay:0 });
195 tl.to("#bar2", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
196 tl.to("#bar3", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
197 tl.to("#bar4", barDuration, {left:0, ease:Power1.easeInOut, delay:barDelay });
198
199 var fadeDuration = .5;
200 tl.to("#txt1", fadeDuration, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
201 tl.to("#txt1", fadeDuration, {opacity:0, ease:Power1.easeInOut, delay:1.5 });
202 tl.to("#txt2", fadeDuration, {opacity:1, ease:Power1.easeInOut, delay:-.5});
203 tl.to("#txt2", fadeDuration, {opacity:0, ease:Power1.easeInOut, delay:2});
204
205 tl.to("#logoImg", 1, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
206
207 console.log( "time: " + tl.totalDuration() );
208 }
209
210 //---------------------
211 $(document).ready(function(){
212 stage1();
213 });
214
215
216
217 </script>
218
219 </body>
220
221 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Spring_trades/index.html"></iframe> 18 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Spring_trades/index.html"></iframe>
19 19
20 <iframe id='' class="b300x600 stacked" scrolling="no" src="en_300x600_cwl_2016Spring_makeawave/index.html"></iframe> 20 <iframe id='' class="b300x600 stacked" scrolling="no" src="en_300x600_cwl_2016Spring_makeawave/index.html"></iframe>
21 <iframe id='' class="b600x566 stacked" scrolling="no" src="en_600x566_cwl_2016Spring_makeawave/index.html"></iframe>
21 22
22 </body> 23 </body>
23 </html> 24 </html>
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 13
14 <h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3> 14 <h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3>
15 15
16 <img class="stacked" src="en_728x90_cwl_2016Spring_trades.gif" alt="en_728x90_cwl_2016Spring_trades" width="728" height="90"> 16 <img class="stacked" src="en_640x100_cwl_2016Spring_business.gif" alt="en_640x100_cwl_2016Spring_business" width="640" height="100">
17 <img class="stacked" src="en_300x50_cwl_2016Spring_business.gif" alt="en_300x50_cwl_2016Spring_business" width="300" height="50"> 17 <img class="stacked" src="en_320x50_cwl_2016Spring_business.gif" alt="en_320x50_cwl_2016Spring_business" width="320" height="50">
18 </body> 18 </body>
19 </html> 19 </html>
......
...@@ -47,4 +47,7 @@ iframe, img { ...@@ -47,4 +47,7 @@ iframe, img {
47 width: 300px; 47 width: 300px;
48 height: 600px; 48 height: 600px;
49 } 49 }
50 50 .b600x566 {
51 width: 600px;
52 height: 566px;
53 }
......