Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
11e0d263 by Dan Rempel
Options

removed .s in b.c. and released

1 parent 64d8e548
Expand all
Inline Side-by-side
Showing 110 changed files with 0 additions and 1765 deletions
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.6" y="10.3" width="30.27" height="30.27"/><polygon class="cls-4" points="22.85 33.56 22.85 17.31 30.97 25.44 22.85 33.56"/></g></g></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" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
7 <link href="assets/video-js.min.css" rel="stylesheet">
8 <script src="assets/video.min.js"></script>
9 <script src="assets/TweenMax.min.js"></script>
10 <script type="text/javascript">
11
12 /**
13 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
14 **/
15 window.onload = function() {
16 eyeBuild.initialize();
17 window.isVideoClick = false;
18
19 //var video = document.getElementsByTagName("video")[0];
20 var myVideoJsPlayer = videojs('video');
21 var video = document.querySelector("#video video");
22 var playButton = document.getElementById("play-pause");
23 var txt = document.getElementById("txt");
24
25 videojs(video, {}, function(){
26
27 var videoPlays = 0;
28 var v0 = false;
29 var v25 = false;
30 var v50 = false;
31 var v75 = false;
32
33 video.addEventListener("play", function(e) {
34 eyeBuild.doIAT(0);
35 videoPlays++;
36 playButton.setAttribute("class", "play");
37 txt.setAttribute("class", "play");
38 });
39 video.addEventListener("pause", function(e) {
40 eyeBuild.doIAT(1);
41 playButton.setAttribute("class", "pause");
42 txt.setAttribute("class", "pause");
43 });
44 video.addEventListener("ended", function(e) {
45 video.currentTime = 0;
46 playButton.setAttribute("class", "pause");
47 v0 = false;
48 v25 = false;
49 v50 = false;
50 v75 = false;
51 eyeBuild.doIAT(9);
52 });
53
54 // track video plays
55 video.addEventListener('timeupdate', function(e){
56 var pct = video.currentTime / video.duration *100;
57 if (pct > 75 && !v75){
58 v75 = true;
59 eyeBuild.doIAT(8);
60 }else if (pct > 50 && !v50){
61 v50 = true;
62 eyeBuild.doIAT(7);
63 }else if (pct > 25 && !v25){
64 v25 = true;
65 eyeBuild.doIAT(6);
66 }else if (pct > 0 && !v0){
67 v0 = true;
68 eyeBuild.doIAT(5);
69 if(videoPlays>1){
70 eyeBuild.doIAT(10);
71 }
72 }
73 }, false);
74
75 playButton.addEventListener('click', function(e){
76 myVideoJsPlayer.play();
77 }, false);
78
79 });
80
81
82 /*
83 var closeButton = document.getElementById("close");
84 closeButton.addEventListener("click", function(e) {
85 eyeBuild.doClose();
86 });
87 */
88
89
90 }
91 </script>
92
93
94 <style>
95
96 body{
97 margin: 0;
98 padding: 0;
99 width: 1024px;
100 height: 768px;
101 line-height: 1.2;
102 font-size: 27px;
103 letter-spacing: .4;
104 color: #CD040B;
105 /* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
106 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
107 font-style: normal;
108 }
109
110 a{
111 text-decoration: none;
112 color: inherit;
113 }
114 #click-tag{
115 display: block;
116 position: absolute;
117 width: 100%;
118 height: 100%;
119 }
120
121 #border{
122 position: relative;
123 width: 1024px;
124 height: 768px;
125 border: 1px solid #55565A;
126 overflow: hidden;
127 cursor: pointer;
128 box-sizing: border-box;
129 background-color: black;
130 /*
131 background: url(assets/back1.jpg) no-repeat #000;
132 background-size: 1000px 700px;
133 */
134 }
135
136 #video, #play-pause{
137 position: absolute;
138 width: 952px;
139 height: 536px;
140 left:36px;
141 top:61px;
142 border:none;
143 }
144 #play-pause{
145 cursor: pointer;
146 background: url(assets/play.svg) no-repeat center center;
147 }
148 #play-pause.pause:hover{
149 background-size: 60px 60px;
150 }
151 #play-pause.pause:active{
152 background-size: 50px 50px;
153 }
154 #play-pause.pause{
155 background-size: 55px 55px;
156 display: block;
157 }
158 #play-pause.play{
159 display: none;
160 }
161 .vjs-big-play-button{
162 display: none !important;
163 }
164
165 #txt {
166 position: absolute;
167 width: 322px;
168 height: 271px;
169 left: 58px;
170 bottom:416px;
171 z-index: 10;
172 opacity: 0;
173 transform-origin: bottom;
174 }
175 #txt.play {
176 display: none;
177 }
178 #txt.pause {
179 display: block;
180 }
181 #overlay {
182 position: absolute;
183 width: 964px;
184 height: 81px;
185 left: 36px;
186 bottom:34px;
187 }
188 </style>
189 </head>
190
191 <body>
192 <div id="border">
193 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
194 <img id="txt" style="pause" src="assets/slice.png" alt="txt">
195 <img id="overlay" src="assets/overlay.png" alt="txt">
196 </a>
197 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/poster3.jpg" data-setup='{"example_option":true}'>
198 <source src="assets/vidC.mp4" type="video/mp4" />
199 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
200 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
201 </video>
202 <button id="play-pause" class="pause"></button>
203 </div>
204
205 <script>
206
207 function stage1(){
208 var tl = new TimelineMax({repeat:0, repeatDelay:2});
209
210 tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
211
212 console.log( "time: " + tl.totalDuration() );
213 }
214
215 //---------------------
216 stage1();
217
218 </script>
219
220 </body>
221
222 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="260.59" height="74.1" viewBox="0 0 260.59 74.1"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ffd400;}</style></defs><title>app2-cta-hover</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><rect class="cls-1" width="223.9" height="74.1"/><rect class="cls-2" x="186.48" width="74.1" height="74.1"/><polygon class="cls-1" points="228.55 37.3 211.06 58.19 224.44 58.19 241.93 37.3 224.44 16.42 211.06 16.42 228.55 37.3"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="260.59" height="74.1" viewBox="0 0 260.59 74.1"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ffd400;}.cls-3{fill:#414042;}</style></defs><title>app2-cta</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><rect class="cls-1" width="223.9" height="74.1"/><rect class="cls-2" x="186.48" width="74.1" height="74.1"/><polygon class="cls-3" points="228.55 37.3 211.06 58.19 224.44 58.19 241.93 37.3 224.44 16.42 211.06 16.42 228.55 37.3"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5"><defs><style>.cls-1{fill:none;stroke:#ffd400;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close-h</title><rect class="cls-1" x="0.75" y="0.75" width="15" height="15"/><line class="cls-1" x1="5" y1="11.5" x2="11.5" y2="5"/><line class="cls-1" x1="11.5" y1="11.5" x2="5" y2="5"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5"><defs><style>.cls-1{fill:none;stroke:#6d6e71;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close</title><rect class="cls-1" x="0.75" y="0.75" width="15" height="15"/><line class="cls-1" x1="5" y1="11.5" x2="11.5" y2="5"/><line class="cls-1" x1="11.5" y1="11.5" x2="5" y2="5"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.83" height="40" viewBox="0 0 83.83 40"><defs><style>.cls-1{fill:#ffd400;}.cls-2{fill:#fff;}</style></defs><title>home-logo_ey</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><polygon class="cls-1" points="37.64 0 0 13.74 0 13.74 37.64 7.09 37.64 0"/><path class="cls-2" d="M36.77,30.42A1.19,1.19,0,0,0,36,29.29a1.14,1.14,0,0,0,.58-1C36.6,27.46,36,27,35,27H32.87V32H35a1.56,1.56,0,0,0,1.77-1.62M35,31.18h-1.2V29.74H35c.51,0,.77.24.77.72a.68.68,0,0,1-.77.72m0-2.26H33.81V27.83H35c.45,0,.67.18.67.54s-.11.54-.62.54m2.42,1.51V28.34h.91v2c0,.62.22.9.68.9s.69-.3.69-.9v-2h.91V32H39.7v-.3a1.14,1.14,0,0,1-.88.37c-1.21,0-1.4-1.06-1.4-1.69M51.35,32h-.91v-3.7h.91v.31a1.21,1.21,0,0,1,.93-.39c.89,0,1.35.58,1.35,1.69V32h-.91V30c0-.62-.21-.9-.67-.9s-.7.31-.7.9Zm-9-2.4V32h-.91v-3.7h.91Zm.81-2.38.91-.46V32h-.91ZM47,28.6a1.11,1.11,0,0,0-.82-.34c-.89,0-1.45.72-1.45,1.89s.53,2,1.43,2a1.15,1.15,0,0,0,.84-.36V32h.91V26.8l-.91.46Zm-.64,2.67c-.32,0-.7-.2-.7-1.15s.37-1,.68-1a.78.78,0,0,1,.65.36v1.45a.76.76,0,0,1-.64.36m20.56-3a1.24,1.24,0,0,0-.82.34V26.9l-.91.46V32h.91v-.28a1.14,1.14,0,0,0,.84.36c.91,0,1.43-.72,1.43-2s-.56-1.89-1.45-1.89m-.17.84c.33,0,.69.27.69,1s-.22,1.15-.67,1.15a.89.89,0,0,1-.67-.35V29.47a.77.77,0,0,1,.65-.38m-10.21-.5a1.15,1.15,0,0,0-.82-.34c-.89,0-1.45.72-1.45,1.89s.54,2,1.43,2a1.15,1.15,0,0,0,.84-.36v.09c0,.41,0,1-1.18,1h0l.32.72h0a1.62,1.62,0,0,0,1.79-1.85V28.34h-.91Zm0,.86v1.45a.77.77,0,0,1-.65.36c-.31,0-.69-.2-.69-1.14s.37-1,.68-1a.78.78,0,0,1,.65.36m3.75-.21a1.79,1.79,0,0,1,.95-.26c.43,0,.66.18.66.53v.25a1.85,1.85,0,0,0-.79-.17c-.68,0-1.47.32-1.47,1.21A1.26,1.26,0,0,0,61,32.12a1.23,1.23,0,0,0,.89-.38V32h.91V29.54c0-.8-.56-1.28-1.49-1.28a2.7,2.7,0,0,0-1.38.36Zm.26,1.56c0-.33.24-.53.63-.53a1.33,1.33,0,0,1,.72.18V31a.85.85,0,0,1-.72.39c-.39,0-.63-.21-.63-.55M71.28,31a1.05,1.05,0,0,1-.73.31.78.78,0,0,1-.82-.81H72c0-.08,0-.18,0-.28,0-1.17-.61-1.93-1.55-1.93a1.75,1.75,0,0,0-1.66,1.93,1.76,1.76,0,0,0,3.06,1.34ZM69.74,29.8a.72.72,0,0,1,.69-.76.71.71,0,0,1,.7.76ZM80.09,31a1.05,1.05,0,0,1-.73.31.78.78,0,0,1-.82-.81h2.27c0-.08,0-.18,0-.28,0-1.17-.61-1.93-1.55-1.93a1.75,1.75,0,0,0-1.66,1.93,1.76,1.76,0,0,0,3.06,1.34ZM78.55,29.8a.72.72,0,0,1,.69-.76.71.71,0,0,1,.7.76Zm-2.2,1c0,.33.12.5.39.5a1.21,1.21,0,0,0,.55-.17l-.11.86a1.67,1.67,0,0,1-.77.17,1,1,0,0,1-1-1.13V29.2h-.57v-.86h.57v-.95l.91-.46v1.4h.83v.86h-.83Zm-1.77,1.19a1.67,1.67,0,0,1-.77.17,1,1,0,0,1-1-1.13V29.2h-.57v-.86h.57v-.95l.91-.46v1.4h.78v.86h-.78v1.56c0,.33.12.5.39.5a1.21,1.21,0,0,0,.55-.17Zm9-2.57a1.08,1.08,0,0,0-.61-.2c-.45,0-.66.27-.66.86v2h-.91v-3.7h.91v.32a1,1,0,0,1,.82-.4,1.19,1.19,0,0,1,.69.22Zm-41.24-2v.46h-.91V26.9h.91Zm6.36,1h.91V32H48.7Zm.91-1v.46H48.7V26.9h.91Zm25.09,7.7a1.11,1.11,0,0,0-.82-.34c-.89,0-1.45.72-1.45,1.89s.53,2,1.43,2a1.15,1.15,0,0,0,.84-.36v.28h.91V33.26l-.91.46Zm-.64,2.67c-.32,0-.7-.2-.7-1.14s.37-1,.68-1a.78.78,0,0,1,.65.36v1.45a.76.76,0,0,1-.64.36m-30.38-1.9a1.08,1.08,0,0,0-.6-.2c-.45,0-.66.27-.66.86v2H41.5V34.8h.91v.32a1,1,0,0,1,.82-.4,1.18,1.18,0,0,1,.69.22Zm-7.19-1h.9l-1,3.7h-.78L35.15,37c-.07-.27-.15-.59-.2-.8,0,.15-.14.61-.21.83l-.41,1.5h-.79l-1-3.7h.94l.34,1.38c.05.22.14.63.19.91.05-.27.15-.67.22-.93l.39-1.36h.78l.39,1.36c.07.24.16.64.22.93,0-.24.12-.58.2-.93Zm2.76-.08a1.95,1.95,0,1,0,1.68,1.93,1.76,1.76,0,0,0-1.68-1.93m0,3c-.45,0-.75-.42-.75-1.07s.29-1.07.75-1.07S40,36,40,36.65s-.29,1.07-.75,1.07M70.2,35.83a1.08,1.08,0,0,0-.6-.2c-.45,0-.66.27-.66.86v2H68V34.8h.91v.32a1,1,0,0,1,.82-.4,1.18,1.18,0,0,1,.69.22ZM63,34.8h.9l-1,3.7h-.78L61.68,37c-.07-.27-.15-.59-.2-.8,0,.15-.14.61-.2.83l-.41,1.5h-.79v0L59,34.8H60l.34,1.38c.05.22.14.63.19.91.05-.27.15-.67.22-.93l.39-1.36h.78l.39,1.36c.07.24.17.64.22.93,0-.24.12-.58.2-.93Zm2.76-.08a1.95,1.95,0,1,0,1.68,1.93,1.76,1.76,0,0,0-1.68-1.93m0,3c-.46,0-.75-.42-.75-1.07s.29-1.07.75-1.07.75.42.75,1.07-.29,1.07-.75,1.07M46.4,36l1.13,2.48h-1l-.78-1.72-.48.61v1.11h-.91V33.72l.91-.46v2.94c.11-.16.25-.34.35-.46l.73-.95h1.06Zm4.34,2.48h-.91V34.8h.91v.31a1.2,1.2,0,0,1,.93-.39c.89,0,1.35.58,1.35,1.69V38.5H52.1v-2c0-.62-.21-.9-.67-.9s-.7.31-.7.9Zm5.16-3.44a1.15,1.15,0,0,0-.82-.34c-.89,0-1.45.72-1.45,1.89s.54,2,1.43,2a1.15,1.15,0,0,0,.84-.36v.09c0,.4,0,1-1.18,1h0L55,40h0a1.62,1.62,0,0,0,1.79-1.85V34.8H55.9Zm0,.86v1.45a.77.77,0,0,1-.65.36c-.32,0-.69-.2-.69-1.15s.37-1,.68-1a.78.78,0,0,1,.65.36M48.09,34.8H49v3.7h-.91Zm.91-1v.46h-.91v-.91H49Zm21.88-.09.91-.46v5.23h-.91ZM6,31h6.89V27H6V23.83h7.62l-2.53-4.38H.33v19H15.56V34.11H6ZM25.7,19.45l-3.23,6.21-3.23-6.21H12.92L19.57,31v7.52h5.69V31l6.66-11.52Z"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><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>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><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>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><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>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#fff;}</style></defs><title>play-ey-hover</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEbUlEQVRoQ+2aPWgUURSFn/8xGvEnKgQRgqiViBYSFSSdRQSDiq2djQRNZ6uNIBrS2FgGIqJVKrERgmnTBETBKkViCiEkRaL4E89nznMnw24ms9lVd1jh63bvOee9++6bzBqWlpZC0cj8QCOS+YEs9G9DPcjSrUmoMsIbU2yqEem6ucOuNUjS+GazxWytE7F+1EsGXjVgVqBkEAS2iRbRKnaYnSnaqiRdJ9ZvtSbaMWQMWDbYWgLFMK0W3y32inaxXxwQB2vMAddut9Zua+MhhqsYLCsQbbDdBfdYqEMcFp3iiDgqjpnj6yTWOerandbqsDYe8IInvJUNVilU3CG+vEvsc+FOi58Qp8UZ0SXOinPi/Do551pdrn3aWsetjQe84AlvcccyQ5GcvmWb21zkUFhevZMW7BYXxSXRK66Iq+LaOrnqWr2ufdFaaKKNB7zgCW94xOvGiqFCqfVYAfqX7e5wsVPigugR18UNcVPcEn3itrhj+nMSv3fbtW659g1r9VgbD3jBE97wiNcVLVip9eIu0cds+0kXvWwhhO+Ke+KBeCgeicdioEoeu8ZD17xnjT5roo0HvOAJb3G3VrRguVBsJyOUicOK0M9sf4+Ls7L3xaB4KobEM/FcvDAvcxK/99y1hlx70Fr91sYDXvCENzziFc+ZodhWRimTh4PaHZbboM8iT8SwGBGvxRsxKt6asZzE74261mvXHrbWfWvjoTsse8IbHvG6aqh4nrj0uCPYZiYQB5aVoh0GLfYqLBsaFxPinXgvPlTJe9eYcM0xawxbE2084AVPeMMjXn+fq7WEome5KxitTCIOLn1OW4xYFAMfxaSYEtPiU4KZDJKfnXaNSdecsMaINdHGA17whDc8Vg4VSpOPS43HFG51Jg09zIhlInGA6XfaY9ziGPksZsWcmc9J/N6sa0259ri1hqyNB7zgCW94xCue/0zA1ULxuMLtzmXI3UFPM5k4yPQ9KzlpExhbEIvii/m6RuLnF11j3jUnrfHGmmjjAS94whseM0PFR6NkKG55LkXuEEYuE4oDTf+zoqwuZjD4TXyvkm+useCaU9YYtSbaeMALntKh/oz1rFCMTh5fuO25HLlLGL1MKg4254C2YZUx9UP8rJIfrrHomtPWeGtNtPGAFzzhLVeotlA+1EAohWJifbIB2ofVjgaXchK/99215lz7QyiFQrtcKLxWHarfhbksx0Ip1HxYGSorwGrBYqj5UAo1Zk208fDXQnEWahXqa/jHoWZC/ULNhGaoZqhmqGaoFM1QoY6hCnlPNfwTRcM/+xXyKb1Qf08V8i/fYr2jcLBivU0qE6ow7/1oQd52FuoNbQzVEgr2Lp3RuC0U7FePeK6K8ftUYliwnXG3GvuXxFQLsgKF+c03tmB8ZGr8X+fLBGM12OZWF2TiMErbQ6P8P4oKwTaHRv8fL6lgMVwyYAwJW+tErB/1YpDfYUKFQJmhKgRMB00GrgXpuit0s3zmCpUjbE3I0q1rqP+RzA80Ir8AUq8xOmyLpR4AAAAASUVORK5CYII="/><rect class="cls-3" x="10.85" y="10.41" width="30.27" height="30.27"/><polygon class="cls-4" points="23.09 33.68 23.09 17.42 31.22 25.55 23.09 33.68"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play-ey</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.67" y="10.41" width="30.27" height="30.27"/><polygon class="cls-4" points="22.91 33.68 22.91 17.42 31.04 25.55 22.91 33.68"/></g></g></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="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 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 width="25px" height="25px" viewBox="-369.4 170.6 25 25" style="enable-background:new -369.4 170.6 25 25;" xml:space="preserve"
6 >
7 <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
8 <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c067 79.157747, 2015/03/30-23:40:42 ">
9 <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
10 <rdf:Description rdf:about=""/>
11 </rdf:RDF>
12 </x:xmpmeta>
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 <?xpacket end="w"?></metadata>
35 <style type="text/css">
36 .st0{fill:#FFFFFF;}
37 </style>
38 <g>
39 <path class="st0" d="M-347.8,177.2c-0.5-0.7-1.5-0.8-2.2-0.3c-0.7,0.5-0.8,1.5-0.3,2.2c1,1.4,1.6,3.1,1.6,4.8
40 c0,4.4-3.6,8.1-8.1,8.1c-4.4,0-8.1-3.6-8.1-8.1c0-4.3,3.3-7.8,7.6-8v1.8l4.4-3.3l-4.4-3.3v1.7c-5.9,0.3-10.7,5.2-10.7,11.2
41 c0,6.2,5,11.2,11.2,11.2c6.2,0,11.2-5,11.2-11.2C-345.6,181.5-346.4,179.2-347.8,177.2z"/>
42 <polygon class="st0" points="-359.3,179.8 -351.2,184.7 -359.3,189.5 "/>
43 </g>
44 </svg>
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
7 <link href="assets/video-js.min.css" rel="stylesheet">
8 <script src="assets/video.min.js"></script>
9 <script type="text/javascript">
10
11 /**
12 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
13 **/
14 window.onload = function() {
15 eyeBuild.initialize();
16 window.isVideoClick = false;
17
18 //var video = document.getElementsByTagName("video")[0];
19 var myVideoJsPlayer = videojs('video');
20 var video = document.querySelector("#video video");
21 var playButton = document.getElementById("play-pause");
22
23 videojs(video, {}, function(){
24
25 var videoPlays = 0;
26 var v0 = false;
27 var v25 = false;
28 var v50 = false;
29 var v75 = false;
30
31 video.addEventListener("play", function(e) {
32 eyeBuild.doIAT(0);
33 videoPlays++;
34 playButton.setAttribute("class", "play");
35 });
36 video.addEventListener("pause", function(e) {
37 eyeBuild.doIAT(1);
38 playButton.setAttribute("class", "pause");
39 });
40 video.addEventListener("ended", function(e) {
41 video.currentTime = 0;
42 playButton.setAttribute("class", "pause");
43 v0 = false;
44 v25 = false;
45 v50 = false;
46 v75 = false;
47 eyeBuild.doIAT(9);
48 });
49
50 // track video plays
51 video.addEventListener('timeupdate', function(e){
52 var pct = video.currentTime / video.duration *100;
53 if (pct > 75 && !v75){
54 v75 = true;
55 eyeBuild.doIAT(8);
56 }else if (pct > 50 && !v50){
57 v50 = true;
58 eyeBuild.doIAT(7);
59 }else if (pct > 25 && !v25){
60 v25 = true;
61 eyeBuild.doIAT(6);
62 }else if (pct > 0 && !v0){
63 v0 = true;
64 eyeBuild.doIAT(5);
65 if(videoPlays>1){
66 eyeBuild.doIAT(10);
67 }
68 }
69 }, false);
70
71 playButton.addEventListener('click', function(e){
72 myVideoJsPlayer.play();
73 }, false);
74
75 });
76
77
78 var closeButton = document.getElementById("close");
79 closeButton.addEventListener("click", function(e) {
80 eyeBuild.doClose();
81 });
82
83
84 video.play();
85 playButton.setAttribute("class", "play");
86
87 }
88 </script>
89
90
91 <style>
92
93 body{
94 margin: 0;
95 padding: 0;
96 width: 405px;
97 height: 303px;
98 line-height: 1.2;
99 font-size: 27px;
100 letter-spacing: .4;
101 color: #CD040B;
102 font-family: "Neue Haas Grotesk", Arial, sans-serif;
103 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
104 font-style: normal;
105 }
106
107 a{
108 text-decoration: none;
109 color: inherit;
110 }
111 #click-tag{
112 display: block;
113 position: absolute;
114 width: 100%;
115 height: 100%;
116 }
117
118 #border{
119 position: relative;
120 width: 405px;
121 height: 303px;
122 /* border: 1px solid #55565A; */
123 background-color: #000;
124 overflow: hidden;
125 cursor: pointer;
126 box-sizing: border-box;
127 }
128
129 #video, #play-pause{
130 position: absolute;
131 width: 375px;
132 height: 211px;
133 left:15px;
134 top:45px;
135 border:none;
136 }
137 #play-pause{
138 cursor: pointer;
139 background: url(assets/play-ey.svg) no-repeat center center;
140 }
141 #play-pause.pause:hover{
142 background-size: 60px 60px;
143 }
144 #play-pause.pause:active{
145 background-size: 50px 50px;
146 }
147 #play-pause.pause{
148 background-size: 55px 55px;
149 display: block;
150 }
151 #play-pause.play{
152 display: none;
153 }
154 .vjs-big-play-button{
155 display: none !important;
156 }
157
158 #txt{
159 position: absolute;
160 left:19px;
161 bottom: 19px;
162 width:569px;
163 height:auto;
164 opacity: 1;
165 }
166 #overlay{
167 position: absolute;
168 width: 136px;
169 height: auto;
170 bottom: 16px;
171 left:15px;
172 }
173 #logo{
174 position: absolute;
175 width: 60px;
176 height: auto;
177 bottom: 16px;
178 right:15px;
179 }
180 #close{
181 position: absolute;
182 left:8px;
183 top: 6px;
184 width: 30px;
185 height: 30px;
186 background: url(assets/close.svg) no-repeat center center;
187 background-size: 15px 15px;
188 border: none;
189 cursor: pointer;
190
191 }
192 #close:hover{
193 background: url(assets/close-h.svg) no-repeat center center;
194 }
195
196 </style>
197 </head>
198
199 <body>
200 <div id="border">
201 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
202 </a>
203 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/poster.jpg" data-setup='{"example_option":true}'>
204 <source src="assets/vid.mp4" type="video/mp4" />
205 </video>
206 <button type="button" id="play-pause" class="pause"></button>
207 <button type="button" id="close" class="close"></button>
208 </div>
209
210
211 </body>
212
213 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3 <head>
4 <title>EY 2015 PMM HTML5 Ads</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
7 <script type="text/javascript" src="assets/TweenMax.min.js"></script>
8
9
10 <style type="text/css">
11 body {
12 margin: 0 auto;
13 padding: 0;
14 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
15 font-size: 16px;
16 line-height: 1.5em;
17 color: #8e8e8e;
18 }
19
20
21 .ad300x1050{
22 width:300px;
23 height: 1050px;
24 padding-top: 1px;
25 background-color: black;
26 }
27 .ad270x40{
28 width:270px;
29 height: 40px;
30 margin: 14px 15px 0px 15px;
31 }
32 .ad270x40 a{
33 display: block;
34 width:270px;
35 height: 40px;
36 }
37 .ad270x460{
38 box-sizing: border-box;
39 width:270px;
40 height: 460px;
41 margin:15px;
42 padding: 13px;
43 background-image: url(assets/270x460.jpg);
44 }
45 .ad270x460 a{
46 display: block;
47 width:270px;
48 height: 460px;
49 }
50 .ad270x220{
51 width:270px;
52 height: 220px;
53 margin:15px;
54 }
55 .ad270x220 a{
56 display: block;
57 width:270px;
58 height: 220px;
59 }
60
61 #mask-1{
62 width:243px;
63 height: 164px;
64 overflow: hidden;
65 }
66 #app1 {
67 background-image: url(assets/app1-img.png);
68 }
69 #app1 a{
70 background-image: url(assets/play-ey.svg);
71 background-position: center center;
72 background-repeat: no-repeat;
73 }
74 #app1 a:hover{
75 /* background-image: url(assets/play-ey-hover.svg); */
76 background-size: 58px 58px;
77 }
78 #app2 {
79 background-image: url(assets/app2-img.svg);
80 }
81 #app2 a{
82 background-image: url(assets/app2-cta.svg);
83 background-position: left 45px;
84 background-repeat: no-repeat;
85 }
86 #app2 a:hover{
87 background-image: url(assets/app2-cta-hover.svg);
88 }
89 #app2 .txt{
90 margin-top: 45px;
91 }
92
93 </style>
94 </head>
95 <body>
96
97 <div class="ad300x1050">
98
99 <div id="logo" class="ad270x40">
100 <a class="click-tag" href="javascript:eyeBuild.doClick(0);">
101 <img src="assets/home-logo_ey.svg" alt="logo_ey" width="98" height="47" />
102 </a>
103 </div>
104 <div id="primary" class="ad270x460">
105 <a class="click-tag" href="javascript:eyeBuild.doClick(1);">
106 <div id="mask-1">
107 <img id="txt" src="assets/270x460_txt.svg" alt="Life, business, both? What kinds of questions trigger growth and opportunity for your private company? See the movie." width="243" height="164" />
108 </div>
109 </a>
110
111 </div>
112 <div id="app1" class="ad270x220">
113 <a class="click-tag" href="javascript:eyeBuild.doOpen();">
114 </a>
115 </div>
116 <div id="app2" class="ad270x220">
117 <a class="click-tag" href="javascript:eyeBuild.doClick(2);">
118 <img class="txt" src="assets/app2-cta-txt.svg" alt="EY works with private business owners across Canada. Learn more." width="186" />
119 </a>
120 </div>
121 </div>
122
123 <script>
124 eyeBuild.initialize();
125
126 function stage1(){
127 var tl = new TimelineMax({repeat:0, repeatDelay:2});
128
129 tl.fromTo("#txt", .3, {y:165, ease:Power1.easeIn, delay:.5 }, {y:0, ease:Power1.easeIn, delay:.5 });
130 console.log( "time: " + tl.totalDuration() );
131 }
132 stage1();
133
134 </script>
135
136
137 </body>
138 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.6" y="10.3" width="30.27" height="30.27"/><polygon class="cls-4" points="22.85 33.56 22.85 17.31 30.97 25.44 22.85 33.56"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8">
4 <title>HTML5 Ad</title>
5 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
6 <link href="assets/video-js.min.css" rel="stylesheet">
7 <script src="assets/video.min.js"></script>
8 <script type="text/javascript">
9
10 /**
11 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
12 **/
13 window.onload = function() {
14 eyeBuild.initialize();
15 window.isVideoClick = false;
16
17 //var video = document.getElementsByTagName("video")[0];
18 var myVideoJsPlayer = videojs('video');
19 var video = document.querySelector("#video video");
20 var playButton = document.getElementById("play-pause");
21
22 videojs(video, {}, function(){
23
24 var videoPlays = 0;
25 var v0 = false;
26 var v25 = false;
27 var v50 = false;
28 var v75 = false;
29
30 video.addEventListener("play", function(e) {
31 eyeBuild.doIAT(0);
32 videoPlays++;
33 playButton.setAttribute("class", "play");
34 });
35 video.addEventListener("pause", function(e) {
36 eyeBuild.doIAT(1);
37 playButton.setAttribute("class", "pause");
38 });
39 video.addEventListener("ended", function(e) {
40 video.currentTime = 0;
41 playButton.setAttribute("class", "pause");
42 v0 = false;
43 v25 = false;
44 v50 = false;
45 v75 = false;
46 eyeBuild.doIAT(9);
47 });
48
49 // track video plays
50 video.addEventListener('timeupdate', function(e){
51 var pct = video.currentTime / video.duration *100;
52 if (pct > 75 && !v75){
53 v75 = true;
54 eyeBuild.doIAT(8);
55 }else if (pct > 50 && !v50){
56 v50 = true;
57 eyeBuild.doIAT(7);
58 }else if (pct > 25 && !v25){
59 v25 = true;
60 eyeBuild.doIAT(6);
61 }else if (pct > 0 && !v0){
62 v0 = true;
63 eyeBuild.doIAT(5);
64 if(videoPlays>1){
65 eyeBuild.doIAT(10);
66 }
67 }
68 }, false);
69
70 playButton.addEventListener('click', function(e){
71 myVideoJsPlayer.play();
72 }, false);
73
74 });
75
76
77 /*
78 var closeButton = document.getElementById("close");
79 closeButton.addEventListener("click", function(e) {
80 eyeBuild.doClose();
81 });
82 */
83
84
85 }
86 </script>
87
88 <style>
89
90 body{
91 margin: 0;
92 padding: 0;
93 width: 300px;
94 height: 450px;
95 line-height: 1.2;
96 font-size: 27px;
97 letter-spacing: .4;
98 color: #CD040B;
99 /* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
100 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
101 font-style: normal;
102 }
103
104 a{
105 text-decoration: none;
106 color: inherit;
107 }
108 #click-tag{
109 display: block;
110 position: absolute;
111 width: 100%;
112 height: 100%;
113 }
114
115 #border{
116 position: relative;
117 width: 300px;
118 height: 450px;
119 border: 1px solid #55565A;
120 background-color: #000;
121 overflow: hidden;
122 cursor: pointer;
123 box-sizing: border-box;
124 background: url(assets/back2.jpg) no-repeat;
125 background-size: 300px 450px;
126 }
127
128 #video, #play-pause{
129 position: absolute;
130 width: 271px;
131 height: 153px;
132 left:14px;
133 top:178px;
134 border:none;
135 }
136 #play-pause{
137 cursor: pointer;
138 background: url(assets/play.svg) no-repeat center center;
139 }
140 #play-pause.pause:hover{
141 background-size: 60px 60px;
142 }
143 #play-pause.pause:active{
144 background-size: 50px 50px;
145 }
146 #play-pause.pause{
147 background-size: 55px 55px;
148 display: block;
149 }
150 #play-pause.play{
151 display: none;
152 }
153 .vjs-big-play-button{
154 display: none !important;
155 }
156 </style>
157 </head>
158
159 <body>
160 <div id="border">
161 <a id="click-tag" href="javascript:eyeBuild.doClick(0);">
162 </a>
163 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/poster2.jpg" data-setup='{"example_option":true}'>
164 <source src="assets/vidB.mp4" type="video/mp4" />
165 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
166 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
167 </video>
168 <button id="play-pause" class="pause"></button>
169 </div>
170 </body>
171
172 </html>
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 0.0.10
3 * DATE: 2016-02-11
4 * UPDATES AND DOCS AT: http://greensock.com
5 *
6 * @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
7 * DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
8 * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
9 * This work is subject to the software agreement that was issued with your membership.
10 *
11 * @author: Jack Doyle, jack@greensock.com
12 */
13 var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function a(a,b,c,d){return c=parseFloat(c)-parseFloat(a),d=parseFloat(d)-parseFloat(b),Math.sqrt(c*c+d*d)}function b(a){return"string"!=typeof a&&a.nodeType||(a=_gsScope.TweenLite.selector(a),a.length&&(a=a[0])),a}function c(a,b,c){var d,e,f=a.indexOf(" ");return-1===f?(d=void 0!==c?c+"":a,e=a):(d=a.substr(0,f),e=a.substr(f+1)),d=-1!==d.indexOf("%")?parseFloat(d)/100*b:parseFloat(d),e=-1!==e.indexOf("%")?parseFloat(e)/100*b:parseFloat(e),d>e?[e,d]:[d,e]}function d(c){if(!c)return 0;c=b(c);var d,e,f,g,i,j,k,l=c.tagName.toLowerCase();if("path"===l){g=c.style.strokeDasharray,c.style.strokeDasharray="none",d=c.getTotalLength()||0;try{e=c.getBBox()}catch(m){}c.style.strokeDasharray=g}else if("rect"===l)d=2*c.getAttribute("width")+2*c.getAttribute("height");else if("circle"===l)d=2*Math.PI*parseFloat(c.getAttribute("r"));else if("line"===l)d=a(c.getAttribute("x1"),c.getAttribute("y1"),c.getAttribute("x2"),c.getAttribute("y2"));else if("polyline"===l||"polygon"===l)for(f=c.getAttribute("points").match(h)||[],"polygon"===l&&f.push(f[0],f[1]),d=0,i=2;i<f.length;i+=2)d+=a(f[i-2],f[i-1],f[i],f[i+1])||0;else"ellipse"===l&&(j=parseFloat(c.getAttribute("rx")),k=parseFloat(c.getAttribute("ry")),d=Math.PI*(3*(j+k)-Math.sqrt((3*j+k)*(j+3*k))));return d||0}function e(a,c){if(!a)return[0,0];a=b(a),c=c||d(a)+1;var e=g(a),f=e.strokeDasharray||"",h=parseFloat(e.strokeDashoffset),i=f.indexOf(",");return 0>i&&(i=f.indexOf(" ")),f=0>i?c:parseFloat(f.substr(0,i))||1e-5,f>c&&(f=c),[Math.max(0,-h),Math.max(0,f-h)]}var f,g=document.defaultView?document.defaultView.getComputedStyle:function(){},h=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi;f=_gsScope._gsDefine.plugin({propName:"drawSVG",API:2,version:"0.0.10",global:!0,overwriteProps:["drawSVG"],init:function(a,b,f){if(!a.getBBox)return!1;var g,h,i,j=d(a)+1;return this._style=a.style,b===!0||"true"===b?b="0 100%":b?-1===(b+"").indexOf(" ")&&(b="0 "+b):b="0 0",g=e(a,j),h=c(b,j,g[0]),this._length=j+10,0===g[0]&&0===h[0]?(i=Math.max(1e-5,h[1]-j),this._dash=j+i,this._offset=j-g[1]+i,this._addTween(this,"_offset",this._offset,j-h[1]+i,"drawSVG")):(this._dash=g[1]-g[0]||1e-6,this._offset=-g[0],this._addTween(this,"_dash",this._dash,h[1]-h[0]||1e-5,"drawSVG"),this._addTween(this,"_offset",this._offset,-h[0],"drawSVG")),!0},set:function(a){this._firstPT&&(this._super.setRatio.call(this,a),this._style.strokeDashoffset=this._offset,1===a||0===a?this._style.strokeDasharray=this._offset<.001&&this._length-this._dash<=10?"none":this._offset===this._dash?"0px, 999999px":this._dash+"px,"+this._length+"px":this._style.strokeDasharray=this._dash+"px,"+this._length+"px")}}),f.getLength=d,f.getPosition=e}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.3
3 * DATE: 2016-05-04
4 *
5 * Requires:
6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
...\ 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="348.92" viewBox="0 0 300 348.92"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="150" y1="348.92" x2="150" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#231f20" stop-opacity="0"/><stop offset="1"/></linearGradient></defs><title>gradient</title><rect class="cls-1" width="300" height="348.92"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 </script>
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <!--
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://thecommonwell.ca/wave";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23
24 </script>
25 -->
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
32
33
34 <style>
35
36 body{
37 margin: 0;
38 padding: 0;
39 width: 300px;
40 height: 600px;
41 line-height: 1.2;
42 font-size: 27px;
43 letter-spacing: .4;
44 color: #CD040B;
45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
47 font-style: normal;
48 }
49
50 a{
51 text-decoration: none;
52 color: inherit;
53 }
54 #border{
55 position: relative;
56 width: 300px;
57 height: 600px;
58 border: 1px solid #55565A;
59 background-color: #282828;
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 background: url(assets/background.jpg);
64 /* background: url(guide1.png); */
65 }
66
67 #logo{
68 position: absolute;
69 width: 69px;
70 height: auto;
71 right: 21px;
72 bottom:28px;
73 opacity: 0;
74 }
75 #legal{
76 position: absolute;
77 width: 180px;
78 height: auto;
79 left: 9px;
80 bottom:6px;
81 }
82 #ey-frame{
83 position: absolute;
84 left: 21px;
85 top:23px;
86 z-index: 9;
87 }
88 #txt1a, #txt1b, #txt2 {
89 position: absolute;
90 width: 138px;
91 height: auto;
92 left: 51px;
93 top:94px;
94 z-index: 10;
95 opacity: 0;
96 }
97 #txt1b{
98 top:161px;
99 width: 113px;
100 }
101 #txt2{
102 left: 45px;
103 width: 214px;
104 }
105 #cannon{
106 position: absolute;
107 left: 150px;
108 top:270px;
109 }
110 #boy{
111 position: absolute;
112 left: 175px;
113 top:310px;
114 }
115 #box-1, #box-2{
116 position: absolute;
117 left: 209px;
118 top: 97px;
119 width:33px;
120 height: 33px;
121 border: white 4px solid;
122 opacity: 0;
123 z-index: 10;
124 }
125 #box-2{
126 top: 163px;
127 }
128 #gradient{
129 position: absolute;
130 opacity: .15;
131 }
132 #dot-1, #dot-2, #dot-3, #dot-txt{
133 position: absolute;
134 left: -12px;
135 top: 104px;
136 width:12px;
137 height: 12px;
138 background-color: #FFD400;
139 }
140 #dot-txt{
141 left:-12px;
142 top:131px;
143 opacity: 1;
144 }
145 #cta{
146 position: absolute;
147 left: 26px;
148 top:175px;
149 width:207px;
150 height: auto;
151 opacity: 0;
152 }
153 #tag1, #tag2, #tag3{
154 position: absolute;
155 left: 25px;
156 top:129px;
157 width:212px;
158 height: auto;
159 opacity: 0;
160 }
161 #tag2{
162 width:198px;
163 }
164 #tag3{
165 width:242px;
166 }
167 #tag-mask{
168 position: absolute;
169 width:0;
170 height:100%;
171 overflow: hidden;
172 }
173 #hash{
174 position: absolute;
175 left: 26px;
176 top:223px;
177 width:157px;
178 height: auto;
179 opacity: 0;
180 }
181
182
183
184 </style>
185 </head>
186
187 <body>
188 <a href="javascript:eyeBuild.doClick(0)" class="cta">
189 <div id="border">
190 <img id="boy" src="assets/boy.png" alt="boy">
191 <img id="cannon" src="assets/cannon.png" alt="cannon">
192 <img id="logo" src="assets/logo.png" alt="logo">
193 <img id="legal" src="assets/legal.png" alt="legal">
194 <img id="txt1a" src="assets/txt1a.png" alt="txt1">
195 <img id="txt1b" src="assets/txt1b.png" alt="txt1">
196 <div id="box-1"></div>
197 <div id="box-2"></div>
198 <img id="txt2" src="assets/txt2.png" alt="txt2">
199
200 <img id="gradient" src="assets/gradient.svg" alt="cta">
201 <div id="dot-1"></div>
202 <div id="dot-2"></div>
203 <div id="dot-3"></div>
204
205 <img id="cta" src="assets/cta.png" alt="cta">
206 <div id="tag-mask">
207 <img id="tag1" src="assets/tag1.png" alt="tag1">
208 <img id="tag2" src="assets/tag2.png" alt="tag2">
209 <img id="tag3" src="assets/tag3.png" alt="tag3">
210 </div>
211 <div id="dot-txt"></div>
212 <img id="hash" src="assets/hash.png" alt="hash">
213
214 <!--
215
216 -->
217
218 </div>
219 </a>
220
221 <!-- GREENSOCK-->
222 <script src="assets/TweenMax.min.js"></script>
223 <script src="assets/DrawSVGPlugin.min.js"></script>
224 <script src="assets/ey-frame-svg-1.0.3.min.js"></script>
225
226 <script>
227
228 function stage1(){
229 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
230
231 var d=.4;
232
233
234 tl.to("#boy", .8, {left:150, top:270, ease:Power1.easeOut, delay:0 });
235 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:-.5 });
236
237 var myeySvg = initEySvgFrame(12, 259, 218);
238 document.getElementById("border").appendChild(myeySvg);
239 animateEyFrame(1);
240 animateGradient(.2);
241
242 tl.to("#txt1a", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
243 tl.to("#box-1", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
244 tl.to("#txt1b", d, {opacity:1, ease:Power1.easeInOut, delay:.1 });
245 tl.to("#box-2", d, {opacity:1, ease:Power1.easeInOut, delay:-.2 });
246
247 tl.to("#txt1a", d, {opacity:0, ease:Power1.easeInOut, delay:1.5 });
248 tl.to("#box-1", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
249 tl.to("#txt1b", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
250 tl.to("#box-2", d, {opacity:0, ease:Power1.easeInOut, delay:-d });
251
252 //animateFill(3.3);
253 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
254 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:4 });
255
256 animateEyReverse(10);
257
258 // phase 2
259
260 tl.to("#gradient", d, {opacity:1, ease:Power1.easeInOut, delay:1 });
261
262 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:-.2 });
263 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
264 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
265 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:66, opacity:1, ease:Power3.easeOut, delay:0});
266 tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
267
268 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
269 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
270 tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
271 tl.fromTo("#dot-2", d, {left:-12}, {left:46, ease:Power3.easeOut, delay:0});
272 tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
273
274 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
275 tl.fromTo("#dot-txt", d, {left:-12}, {left:312, ease:Linear.easeNone, delay:-d});
276 tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
277 tl.fromTo("#dot-3", d, {left:-12}, {left:26, ease:Power3.easeOut, delay:0});
278
279 tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
280 tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
281
282
283
284 console.log( "time: " + tl.totalDuration() );
285 }
286
287 //---------------------
288 stage1();
289
290
291
292 </script>
293
294 </body>
295
296 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5"><defs><style>.cls-1{fill:none;stroke:#ffd400;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close-h</title><rect class="cls-1" x="0.75" y="0.75" width="15" height="15"/><line class="cls-1" x1="5" y1="11.5" x2="11.5" y2="5"/><line class="cls-1" x1="11.5" y1="11.5" x2="5" y2="5"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5"><defs><style>.cls-1{fill:none;stroke:#6d6e71;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close</title><rect class="cls-1" x="0.75" y="0.75" width="15" height="15"/><line class="cls-1" x1="5" y1="11.5" x2="11.5" y2="5"/><line class="cls-1" x1="11.5" y1="11.5" x2="5" y2="5"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.6" y="10.3" width="30.27" height="30.27"/><polygon class="cls-4" points="22.85 33.56 22.85 17.31 30.97 25.44 22.85 33.56"/></g></g></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" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
7 <link href="assets/video-js.min.css" rel="stylesheet">
8 <script src="assets/video.min.js"></script>
9 <script src="assets/TweenMax.min.js"></script>
10 <script type="text/javascript">
11
12 /**
13 * This section uses videojs with eyeBuild, tracking plays, clicks, etc.
14 **/
15 window.onload = function() {
16 eyeBuild.initialize();
17 window.isVideoClick = false;
18
19 //var video = document.getElementsByTagName("video")[0];
20 var myVideoJsPlayer = videojs('video');
21 var video = document.querySelector("#video video");
22 var playButton = document.getElementById("play-pause");
23
24 videojs(video, {}, function(){
25
26 var videoPlays = 0;
27 var v0 = false;
28 var v25 = false;
29 var v50 = false;
30 var v75 = false;
31
32 video.addEventListener("play", function(e) {
33 eyeBuild.doIAT(0);
34 videoPlays++;
35 playButton.setAttribute("class", "play");
36 });
37 video.addEventListener("pause", function(e) {
38 eyeBuild.doIAT(1);
39 playButton.setAttribute("class", "pause");
40 });
41 video.addEventListener("ended", function(e) {
42 video.currentTime = 0;
43 playButton.setAttribute("class", "pause");
44 v0 = false;
45 v25 = false;
46 v50 = false;
47 v75 = false;
48 eyeBuild.doIAT(9);
49 });
50
51 // track video plays
52 video.addEventListener('timeupdate', function(e){
53 var pct = video.currentTime / video.duration *100;
54 if (pct > 75 && !v75){
55 v75 = true;
56 eyeBuild.doIAT(8);
57 }else if (pct > 50 && !v50){
58 v50 = true;
59 eyeBuild.doIAT(7);
60 }else if (pct > 25 && !v25){
61 v25 = true;
62 eyeBuild.doIAT(6);
63 }else if (pct > 0 && !v0){
64 v0 = true;
65 eyeBuild.doIAT(5);
66 if(videoPlays>1){
67 eyeBuild.doIAT(10);
68 }
69 }
70 }, false);
71
72 playButton.addEventListener('click', function(e){
73 myVideoJsPlayer.play();
74 }, false);
75
76 });
77
78
79 var closeButton = document.getElementById("close");
80 closeButton.addEventListener("click", function(e) {
81 eyeBuild.doClose();
82 });
83
84 video.play();
85 playButton.setAttribute("class", "play");
86
87 }
88 </script>
89
90
91 <style>
92
93 body{
94 margin: 0;
95 padding: 0;
96 width: 600px;
97 height: 600px;
98 line-height: 1.2;
99 font-size: 27px;
100 letter-spacing: .4;
101 color: #CD040B;
102 font-family: "Neue Haas Grotesk", Arial, sans-serif;
103 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
104 font-style: normal;
105 }
106
107 a{
108 text-decoration: none;
109 color: inherit;
110 }
111 #click-tag{
112 display: block;
113 position: absolute;
114 width: 100%;
115 height: 100%;
116 }
117
118 #border{
119 position: relative;
120 width: 600px;
121 height: 600px;
122 border: 1px solid #55565A;
123 background-color: #000;
124 overflow: hidden;
125 cursor: pointer;
126 box-sizing: border-box;
127 }
128
129 #video, #play-pause{
130 position: absolute;
131 width: 570px;
132 height: 320px;
133 left:15px;
134 top:110px;
135 border:none;
136 }
137 #play-pause{
138 cursor: pointer;
139 background: url(assets/play.svg) no-repeat center center;
140 }
141 #play-pause.pause:hover{
142 background-size: 60px 60px;
143 }
144 #play-pause.pause:active{
145 background-size: 50px 50px;
146 }
147 #play-pause.pause{
148 background-size: 55px 55px;
149 display: block;
150 }
151 #play-pause.play{
152 display: none;
153 }
154 .vjs-big-play-button{
155 display: none !important;
156 }
157
158 #txt{
159 position: absolute;
160 left:19px;
161 bottom: 19px;
162 width:569px;
163 height:auto;
164 opacity: 1;
165 }
166 #overlay{
167 position: absolute;
168 width: 136px;
169 height: auto;
170 bottom: 16px;
171 left:15px;
172 }
173 #logo{
174 position: absolute;
175 width: 60px;
176 height: auto;
177 bottom: 16px;
178 right:15px;
179 }
180 #close{
181 position: absolute;
182 left:8px;
183 top: 6px;
184 width: 30px;
185 height: 30px;
186 background: url(assets/close.svg) no-repeat center center;
187 background-size: 15px 15px;
188 border: none;
189 cursor: pointer;
190
191 }
192 #close:hover{
193 background: url(assets/close-h.svg) no-repeat center center;
194 }
195
196 </style>
197 </head>
198
199 <body>
200 <div id="border">
201 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
202 <img id="overlay" src="assets/overlay.png">
203 <img id="logo" src="assets/logo.png">
204 </a>
205 <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="assets/poster1.jpg" data-setup='{"example_option":true}'>
206 <source src="assets/vidA.mp4" type="video/mp4" />
207 <!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> -->
208 <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> -->
209 </video>
210 <button type="button" id="play-pause" class="pause"></button>
211 <button type="button" id="close" class="close"></button>
212 </div>
213
214
215 </body>
216
217 </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 Ad</title>
6 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
7 <script type="text/javascript">
8 window.onload = function() {
9 eyeBuild.initialize();
10 var playButton = document.getElementById("play-pause");
11
12 playButton.addEventListener('click', function(e){
13 eyeBuild.doOpen();
14 }, false);
15 };
16 </script>
17
18 <style>
19
20 body{
21 margin: 0;
22 padding: 0;
23 width: 300px;
24 height: 600px;
25 line-height: 1.2;
26 font-size: 27px;
27 letter-spacing: .4;
28 color: #CD040B;
29 /* font-family: "Neue Haas Grotesk", Arial, sans-serif; */
30 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
31 font-style: normal;
32 }
33
34 a{
35 text-decoration: none;
36 color: inherit;
37 }
38 #border{
39 position: relative;
40 width: 300px;
41 height: 600px;
42 border: 1px solid #55565A;
43 background-color: #282828;
44 overflow: hidden;
45 cursor: pointer;
46 box-sizing: border-box;
47 background: url(assets/back1.jpg);
48 background-size:300px 600px;
49 /* background: url(guide.png); */
50 }
51 #txt {
52 position: absolute;
53 width: 156px;
54 height: 131px;
55 left: 16px;
56 bottom:451px;
57 z-index: 10;
58 opacity: 0;
59 transform-origin: bottom;
60 }
61 #click-tag{
62 position: absolute;
63 width: 100%;
64 height: 100%;
65 display: block;
66 }
67 #play-pause {
68 position: absolute;
69 top: 320px;
70 left: 15px;
71 height: 153px;
72 width: 271px;
73 cursor: pointer;
74 border: none;
75 background: none;
76 }
77
78 </style>
79 </head>
80
81 <body>
82 <div id="border">
83 <a id="click-tag" href="javascript:eyeBuild.doClick(0)">
84 <img id="txt" src="assets/slice.png">
85
86 </a>
87 <button type="button" id="play-pause" class="pause"></button>
88 </div>
89
90 <!-- GREENSOCK-->
91 <script src="assets/TweenMax.min.js"></script>
92 <script>
93
94 function stage1(){
95 var tl = new TimelineMax({repeat:0, repeatDelay:2});
96
97 tl.fromTo("#txt", .3, {opacity:0, scaleY:.01, ease:Power1.easeIn, delay:.5 }, {opacity:1, scaleY:1, ease:Power1.easeIn, delay:.5 });
98 console.log( "time: " + tl.totalDuration() );
99 }
100
101 //---------------------
102 stage1();
103
104 </script>
105
106 </body>
107
108 </html>
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 0.0.10
3 * DATE: 2016-02-11
4 * UPDATES AND DOCS AT: http://greensock.com
5 *
6 * @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
7 * DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
8 * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
9 * This work is subject to the software agreement that was issued with your membership.
10 *
11 * @author: Jack Doyle, jack@greensock.com
12 */
13 var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function a(a,b,c,d){return c=parseFloat(c)-parseFloat(a),d=parseFloat(d)-parseFloat(b),Math.sqrt(c*c+d*d)}function b(a){return"string"!=typeof a&&a.nodeType||(a=_gsScope.TweenLite.selector(a),a.length&&(a=a[0])),a}function c(a,b,c){var d,e,f=a.indexOf(" ");return-1===f?(d=void 0!==c?c+"":a,e=a):(d=a.substr(0,f),e=a.substr(f+1)),d=-1!==d.indexOf("%")?parseFloat(d)/100*b:parseFloat(d),e=-1!==e.indexOf("%")?parseFloat(e)/100*b:parseFloat(e),d>e?[e,d]:[d,e]}function d(c){if(!c)return 0;c=b(c);var d,e,f,g,i,j,k,l=c.tagName.toLowerCase();if("path"===l){g=c.style.strokeDasharray,c.style.strokeDasharray="none",d=c.getTotalLength()||0;try{e=c.getBBox()}catch(m){}c.style.strokeDasharray=g}else if("rect"===l)d=2*c.getAttribute("width")+2*c.getAttribute("height");else if("circle"===l)d=2*Math.PI*parseFloat(c.getAttribute("r"));else if("line"===l)d=a(c.getAttribute("x1"),c.getAttribute("y1"),c.getAttribute("x2"),c.getAttribute("y2"));else if("polyline"===l||"polygon"===l)for(f=c.getAttribute("points").match(h)||[],"polygon"===l&&f.push(f[0],f[1]),d=0,i=2;i<f.length;i+=2)d+=a(f[i-2],f[i-1],f[i],f[i+1])||0;else"ellipse"===l&&(j=parseFloat(c.getAttribute("rx")),k=parseFloat(c.getAttribute("ry")),d=Math.PI*(3*(j+k)-Math.sqrt((3*j+k)*(j+3*k))));return d||0}function e(a,c){if(!a)return[0,0];a=b(a),c=c||d(a)+1;var e=g(a),f=e.strokeDasharray||"",h=parseFloat(e.strokeDashoffset),i=f.indexOf(",");return 0>i&&(i=f.indexOf(" ")),f=0>i?c:parseFloat(f.substr(0,i))||1e-5,f>c&&(f=c),[Math.max(0,-h),Math.max(0,f-h)]}var f,g=document.defaultView?document.defaultView.getComputedStyle:function(){},h=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi;f=_gsScope._gsDefine.plugin({propName:"drawSVG",API:2,version:"0.0.10",global:!0,overwriteProps:["drawSVG"],init:function(a,b,f){if(!a.getBBox)return!1;var g,h,i,j=d(a)+1;return this._style=a.style,b===!0||"true"===b?b="0 100%":b?-1===(b+"").indexOf(" ")&&(b="0 "+b):b="0 0",g=e(a,j),h=c(b,j,g[0]),this._length=j+10,0===g[0]&&0===h[0]?(i=Math.max(1e-5,h[1]-j),this._dash=j+i,this._offset=j-g[1]+i,this._addTween(this,"_offset",this._offset,j-h[1]+i,"drawSVG")):(this._dash=g[1]-g[0]||1e-6,this._offset=-g[0],this._addTween(this,"_dash",this._dash,h[1]-h[0]||1e-5,"drawSVG"),this._addTween(this,"_offset",this._offset,-h[0],"drawSVG")),!0},set:function(a){this._firstPT&&(this._super.setRatio.call(this,a),this._style.strokeDashoffset=this._offset,1===a||0===a?this._style.strokeDasharray=this._offset<.001&&this._length-this._dash<=10?"none":this._offset===this._dash?"0px, 999999px":this._dash+"px,"+this._length+"px":this._style.strokeDasharray=this._dash+"px,"+this._length+"px")}}),f.getLength=d,f.getPosition=e}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
...\ No newline at end of file ...\ No newline at end of file
1 /*!
2 * VERSION: 1.0.3
3 * DATE: 2016-05-04
4 *
5 * Requires:
6 * GSAP TweenMax (import com.greensock.*;)
7 * GASP drawSVG Plugin ()
8 * This work is subject to the terms at http://greensock.com/standard-license or for
9 * Club GreenSock members, the software agreement that was issued with your membership.
10 *
11 * @license Copyright (c) 2016, Tenzing Communications Inc. All rights reserved.
12 *
13 * @author: Dan Rempel, dan@gotenzing.com
14
15 * Usage Example:
16 * var myEySvg = initEySvgFrame(10, 196, 193); // frame line weight, width, height
17 * document.getElementById("body").appendChild(myEySvg);
18 * animateEyFrame(2); // delay in seconds
19 * animateGradient(2); // delay in seconds
20 * animateFill(2); // delay in seconds
21 *
22 **/
23
24 var eySvg;var eyStroke;var eyDot1;var eyDot2;var eyDot3;var eyGradient;var eyFill;var tl;var eyStrokeWeight;var eySvgHeight;var eySvgWidth;var eyAngleHeight;var eyDotSpacing;var eyDotDuration=0.2;var eyFrameDuration=1;var eyGradientDuration=1;var eyFillDuration=1;var eyColor='#FFD400';var svgNS='http://www.w3.org/2000/svg';var isForward=!0;var initEySvgFrame=function(b,d,f){tl=new TimelineMax({onStart:tlStart,onUpdate:tlUpdate,onComplete:tlComplete,onReverseComplete:tlReverseComplete}),eyDotSpacing=Math.floor(b*8.5/10),eyStrokeWeight=b,eySvgWidth=d,eySvgHeight=f;var h=10*Math.PI/180;eyAngleHeight=Math.tan(h)*(d-b);var a=document.createElementNS(svgNS,'svg');a.setAttribute('id','ey-frame'),a.setAttribute('width',d+'px'),a.setAttribute('height',f+'px'),a.setAttribute('viewBox','0 0 '+eySvgWidth+' '+eySvgHeight);var g=document.createElementNS(svgNS,'defs');a.appendChild(g);var c=document.createElementNS(svgNS,'linearGradient');c.setAttribute('id','linear-gradient'),c.setAttribute('x1','0%'),c.setAttribute('x2','0%'),c.setAttribute('y1','0%'),c.setAttribute('y2','100%'),g.appendChild(c);var e;return e=createStop({id:'stop-1',offset:'0%',color:'Black',opacity:'.7'}),c.appendChild(e),e=createStop({id:'stop-2',offset:'100%',color:'Black',opacity:'0'}),c.appendChild(e),eyGradient=createShape('ey-gradient','url(#linear-gradient)'),a.appendChild(eyGradient),eyDot1=createDot(1),a.appendChild(eyDot1),eyDot2=createDot(2),a.appendChild(eyDot2),eyDot3=createDot(3),a.appendChild(eyDot3),eyStroke=createPath('ey-stroke'),eyStroke.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*3+' '+(eySvgHeight-b/2)+' H '+(d-b/2)+' V '+b/1.5+' L '+b/2+' '+(eyAngleHeight+b/2)+' V '+(f-b-eyDotSpacing)),a.appendChild(eyStroke),a;};var animateEyFrame=function(b){isForward=!0,tl.timeScale(1);var a=0;tl.fromTo(eyDot1,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut,delay:b}),tl.fromTo(eyDot2,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.fromTo(eyDot3,eyDotDuration,{drawSVG:'0'},{drawSVG:'0 '+(a+=eyStrokeWeight+eyDotSpacing),ease:Power1.easeInOut}),tl.call(tlDotToLine,[]),tl.fromTo(eyStroke,eyFrameDuration,{drawSVG:'0'},{drawSVG:'0 100%',ease:Power1.easeIn});};var animateEyReverse=function(a){TweenMax.delayedCall(a,intAnimateEyReverse,[0]);};var animateGradient=function(a){tl.fromTo(eyGradient,0.5,{opacity:0},{opacity:1,delay:a});};var animateFill=function(a){(typeof eyFill==='undefined'||variable===null)&&(eyFill=createShape('ey-gradient',eyColor),eySvg.appendChild(eyFill)),tl.fromTo(eyFill,0.5,{y:eySvgHeight},{y:0,ease:Power2.easeIn,delay:a});};var createPath=function(b){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill','none'),a.setAttribute('stroke',eyColor),a.setAttribute('stroke-width',eyStrokeWeight),a.setAttribute('stroke-miterlimit','10'),a;};var createDot=function(b){var a=createPath('ey-dot'+b);return a.setAttribute('d',' M '+(eyStrokeWeight+eyDotSpacing)*(b-1)+' '+(eySvgHeight-eyStrokeWeight/2)+' h '+eyStrokeWeight),a;};var createShape=function(b,c){var a=document.createElementNS(svgNS,'path');return a.setAttribute('id',b),a.setAttribute('fill',c),a.setAttribute('d',' M 0 '+eySvgHeight+' H '+eySvgWidth+' V 2 '+' L 0 '+(eyAngleHeight+2)+' Z '),a;};var createStop=function(b){var a=document.createElementNS(svgNS,'stop');return a.setAttribute('id',b.id),a.setAttribute('offset',b.offset),a.setAttribute('stop-color',b.color),a.setAttribute('stop-opacity',b.opacity),a;};var intAnimateEyReverse=function(a){isForward=!1,tl.reverse(a),tl.timeScale;};var tlStart=function(){};var tlDotToLine=function(){isForward||tl.timeScale(4);};var tlUpdate=function(){};var tlComplete=function(){};var tlReverseComplete=function(){};
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 </script>
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=320,height=480">
8 <!--
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "http://thecommonwell.ca/wave";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23
24 </script>
25 -->
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
32
33
34 <style>
35
36 body{
37 margin: 0;
38 padding: 0;
39 width: 320px;
40 height: 480px;
41 line-height: 1.2;
42 font-size: 27px;
43 letter-spacing: .4;
44 color: #CD040B;
45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
47 font-style: normal;
48 }
49
50 a{
51 text-decoration: none;
52 color: inherit;
53 }
54 #border{
55 position: relative;
56 width: 320px;
57 height: 480px;
58 border: 1px solid #55565A;
59 background-color: #282828;
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 background: url(assets/background.jpg);
64 /* background: url(guide2.png); */
65 }
66 #logo{
67 position: absolute;
68 width: 69px;
69 height: auto;
70 right: 12px;
71 bottom:26px;
72 opacity: 0;
73 }
74 #legal{
75 position: absolute;
76 width: 180px;
77 height: auto;
78 left: 9px;
79 bottom:6px;
80 }
81 #ey-frame{
82 position: absolute;
83 left: 32px;
84 top:29px;
85 z-index: 9;
86 }
87 #txt1, #txt2 {
88 position: absolute;
89 width: 194px;
90 height: auto;
91 left: 63px;
92 top:110px;
93 z-index: 10;
94 opacity: 0;
95 }
96 #txt2{
97 left: 57px;
98 top:105px;
99 width: 211px;
100 }
101 #mask{
102 position: absolute;
103 left: 87px;
104 top:320px;
105 }
106 #arm{
107 position: absolute;
108 left: 0px;
109 top: 0px;
110 }
111 #dot-1, #dot-2, #dot-3, #dot-txt{
112 position: absolute;
113 left: -12px;
114 top: 81px; /* 104px */
115 width:12px;
116 height: 12px;
117 background-color: #FFD400;
118 }
119 #dot-txt{
120 left:-12px;
121 top:108px;
122 opacity: 1;
123 }
124 #cta{
125 position: absolute;
126 left: 38px;
127 top:153px;
128 width:207px;
129 height: auto;
130 opacity: 0;
131 }
132 #tag1, #tag2, #tag3{
133 position: absolute;
134 left: 38px;
135 top:106px;
136 width:212px;
137 height: auto;
138 opacity: 0;
139 }
140 #tag2{
141 width:198px;
142 }
143 #tag3{
144 width:242px;
145 }
146 #tag-mask{
147 position: absolute;
148 width:0;
149 height:100%;
150 overflow: hidden;
151 }
152 #hash{
153 position: absolute;
154 left: 36px;
155 top:201px;
156 width:167px;
157 height: auto;
158 opacity: 0;
159 }
160 </style>
161 </head>
162
163 <body>
164 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
165 <a href="javascript:eyeBuild.doClick(0)" class="cta">
166 <div id="border">
167 <img id="arm" src="assets/arm.png" alt="arm">
168 <img id="mask" src="assets/mask.png" alt="mask">
169 <img id="logo" src="assets/logo.png" alt="logo">
170 <img id="legal" src="assets/legal.png" alt="legal">
171 <img id="txt1" src="assets/txt1.png" alt="txt1">
172 <img id="txt2" src="assets/txt2.png" alt="txt2">
173
174
175 <div id="dot-1"></div>
176 <div id="dot-2"></div>
177 <div id="dot-3"></div>
178
179 <img id="cta" src="assets/cta.png" alt="cta">
180 <div id="tag-mask">
181 <img id="tag1" src="assets/tag1.png" alt="tag1">
182 <img id="tag2" src="assets/tag2.png" alt="tag2">
183 <img id="tag3" src="assets/tag3.png" alt="tag3">
184 </div>
185 <div id="dot-txt"></div>
186 <img id="hash" src="assets/hash.png" alt="hash">
187
188 <!--
189
190 -->
191
192 </div>
193 </a>
194
195 <!-- GREENSOCK-->
196 <script src="assets/TweenMax.min.js"></script>
197 <script src="assets/DrawSVGPlugin.min.js"></script>
198 <script src="assets/ey-frame-svg-1.0.3.min.js"></script>
199
200 <script>
201
202 function stage1(){
203 var tl = new TimelineMax(); /* {repeat:2, repeatDelay:2} */
204
205 var d=.4;
206
207
208 tl.to("#logo", .7, {opacity:1, ease:Power1.easeInOut, delay:0 });
209 tl.to("#arm", .8, {left:-20, top:9, ease:Power1.easeInOut, delay:.2 });
210
211 var myeySvg = initEySvgFrame(12, 259, 218);
212 document.getElementById("border").appendChild(myeySvg);
213 animateEyFrame(1);
214 animateGradient(.2);
215
216 tl.to("#txt1", d, {opacity:1, ease:Power1.easeInOut, delay:1.8 });
217 tl.to("#txt1", d, {opacity:0, ease:Power1.easeInOut, delay:2.5 });
218
219 //animateFill(3.3);
220
221 tl.to("#txt2", d, {opacity:1, ease:Power1.easeInOut, delay:0 });
222 tl.to("#txt2", d, {opacity:0, ease:Power1.easeInOut, delay:3 });
223
224 animateEyReverse(10);
225
226
227 // phase 2
228
229 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:1.25 });
230 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
231 tl.to("#tag1", d, {opacity:1, ease:Linear.easeNone, delay:-d });
232 tl.fromTo("#dot-1", d, {left:-12, opacity:1}, {left:77, opacity:1, ease:Power3.easeOut, delay:0});
233 tl.to("#tag1", d, {opacity:0, ease:Linear.easeNone, delay:2 });
234
235 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
236 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
237 tl.to("#tag2", d, {opacity:1, ease:Linear.easeNone, delay:-d });
238 tl.fromTo("#dot-2", d, {left:-12}, {left:57, ease:Power3.easeOut, delay:0});
239 tl.to("#tag2", d, {opacity:0, ease:Linear.easeNone, delay:2 });
240
241 tl.fromTo("#tag-mask", d, {width:0}, {width:320, ease:Linear.easeNone, delay:0 });
242 tl.fromTo("#dot-txt", d, {left:-12}, {left:321, ease:Linear.easeNone, delay:-d});
243 tl.to("#tag3", d, {opacity:1, ease:Linear.easeNone, delay:-d });
244 tl.fromTo("#dot-3", d, {left:-12}, {left:37, ease:Power3.easeOut, delay:0});
245
246 tl.to("#cta", d, {opacity:1, ease:Linear.easeNone, delay:0 });
247 tl.to("#hash", d, {opacity:1, ease:Linear.easeNone, delay:0 });
248
249
250
251 console.log( "time: " + tl.totalDuration() );
252 }
253
254 //---------------------
255 stage1();
256
257
258
259 </script>
260
261 </body>
262
263 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.5;mix-blend-mode:multiply;}.cls-3{fill:#ffd400;}.cls-4{fill:#231f20;}</style></defs><title>play</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><image class="cls-2" width="52" height="52" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVRoQ+2aPWgVWRiGjz9rNBpRN7oQRAiLa7WIFpJVkHQWWVBUbO22keCms42NEExIs82WgYholUpshGDaNAFR2CpFYooFMYVR/Mm+j3kPdzLee8/9SWRnuMLTzXzv+875zncmcw3r6+uhbCQvKCLJC1Lo346tJqWZInlBHfM7c+zaAvI1WwrbaJCs8d3mB7NnG4i1o1Y2cDJgKlA2CCJdYq/oFvvNgRw9LZCvEWt3W68rVELGgDWDNRIohum2gUPiiOgVR8Ux8dMWcsx1e61zyLrox3B1g6UC0Qr7XPSwxfrECdEvfhYnxS/mVBvEGiddt986fdZFHx/4wVfNYLVCxRWiwEHxo4v328Cv4qw4JwbEb+K8uNAG511nwHXPWueUddHHB37wFVesoVCkp3dZ6h4XOh42nuBpiw6KS+J3cUVcFdfE9Ta45jpXXPeSdQasiz4+8IMv/OFzZ91QodJ6PAV6mCXvc8Ez4qIYEjfETfGHuCWGxW3xpxlpgnjPbde55bo3rTNkXfTxgR984Q+f37RgrdaLq0Qvs/SnXfiyxRC/I0bFPTEm7otxMdEC475/zPVGXX/Yepetjw/84Cuu1jctWC0US8oYZerwVOhpWmDIAjzdu2JS/C2mxAPxUDwyj5sg3vPQdaZcd9I6I9ZFHx/4wRf+8InfhkKxtIxTpg+bdTBstMKwhf4S02JGPBXPxKx4buaaIN4z6zpPXXfaOneti/5g2PCDL/zhMxkq7icOPs4JlpopxKbladESkxZ8EjZMzYsF8UK8FK9a4KXvX3C9Odeftt4d6+MDP/jCHz6/7qtGQ9G3nBeMV6YRm5depzVmLIyJf8SiWBLL4nWGlTpkr1v2/Yuut+D6M9YbtT4+8IMv/NUPFSqTj4ONVxVOdqYNfcyYZSqxiel5WmTeBjDzr3gj3prVJoj3vHGdJdedt86UddHHB37whT984nfTBKwXilcWTngORM4P+prpxGam93maizaCuXdiTbw3HxogXrvm+1ddb9H1n1lvzPr4wA++8NdQqPhqlA3FSc/ByDnC2GVKsanZAzxVnjCGMPlRfGqBj77/nestuf6s9e5bHx/4yYfaNNZToRifvMJw4nNAcp4wfplWbG72Aq3Dk8bYZ/GlBT77/jXXW3b959Ybtz4+8IOvpkP1hOqhJkIlFFPrtU3QQjzxaHK9CeI9n1znreu+CpVQE6F6KHy2FWrExTkw50Il1GrYHCoVolawGGo1VELNWW/C+t81FPthK0J9CP+DUCthe0KthE6oTqhOqE6oHJ1QYZtDlfKcKvwbReHf/Ur5ll6qv6dK+Zdvub5ROFi5viZVCVWa7360IF88S/WFNobaG0r2LZ3x2BVK9qtH3Ffl+H0qMyxY0rhaxf4lMdeCPIXS/OYbWzC+MhX/1/kqwXgiLHW3izJ1GKe9oSj/j6JGsN2h6P/jJRcshssGjCFhzzYQa0etGORrmFAnUDJUjYD5oNnA7ZKvuUkz5bHpUE2EbZuUZorkBUUkeUER+Q/WUqTGGZMG2QAAAABJRU5ErkJggg=="/><rect class="cls-3" x="10.6" y="10.3" width="30.27" height="30.27"/><polygon class="cls-4" points="22.85 33.56 22.85 17.31 30.97 25.44 22.85 33.56"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file