Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
d5eef4d3 by Dan Rempel
Options

Bosco For approval - 1st set

1 parent 892f7b0c
Expand all
Inline Side-by-side
Showing 32 changed files with 285 additions and 63 deletions
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
8 .st1{fill:#E1C19C;} 8 .st1{fill:#E1C19C;}
9 .st2{fill:#FFFFFF;} 9 .st2{fill:#FFFFFF;}
10 .st3{fill:#353F4A;} 10 .st3{fill:#353F4A;}
11 .st4{clip-path:url(#eye-right-mask);} 11 .st4{clip-path:url(#clipPathId);}
12 .st5{fill:#F27658;} 12 .st5{fill:#F27658;}
13 #eye-right-lash, #e-large, #e-small{
14 opacity: 0;
15 }
16
13 </style> 17 </style>
14 <g id="face"> 18 <g id="face">
15 <g> 19 <g>
...@@ -33,8 +37,8 @@ ...@@ -33,8 +37,8 @@
33 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5 37 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5
34 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/> 38 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/>
35 <g id="face_x5F_crumbs"> 39 <g id="face_x5F_crumbs">
36 <circle id="e-large" class="st0" cx="59.5" cy="12.8" r="2"/> 40 <circle id="f-large" class="st0" cx="59.5" cy="12.8" r="2"/>
37 <circle id="e_x5F_small" class="st0" cx="61.2" cy="17.3" r="1.3"/> 41 <circle id="f-small" class="st0" cx="61.2" cy="17.3" r="1.3"/>
38 </g> 42 </g>
39 </g> 43 </g>
40 <g id="eyes"> 44 <g id="eyes">
...@@ -47,23 +51,25 @@ ...@@ -47,23 +51,25 @@
47 <defs> 51 <defs>
48 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 52 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
49 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 53 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
50 </defs> 54 <clipPath id="clipPathId">
51 <clipPath id="eye-right-lid"> 55 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
52 <use xlink:href="#eye-right-white" style="overflow:visible;"/>
53 </clipPath> 56 </clipPath>
57 </defs>
54 <g id="eye-right" class="st4"> 58 <g id="eye-right" class="st4">
59 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
60
55 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 61 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
56 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 62 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
57 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 63 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
58 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 64 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
59 C53.3,42.8,52.9,42.1,52.3,41.6z"/> 65 C53.3,42.8,52.9,42.1,52.3,41.6z"/>
60 </g> 66 </g>
61 </g> 67 <circle id="e-large" class="st3" cx="54" cy="42" r="0.6"/>
62 <circle id="e-large" class="st3" cx="54.1" cy="42.7" r="0.6"/> 68 <circle id="e-small" class="st3" cx="54" cy="42" r="0.2"/>
63 <circle id="e-small" class="st3" cx="54.2" cy="42.8" r="0.2"/>
64 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2 69 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2
65 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3 70 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3
66 C48.6,43.5,48.4,43.6,48.1,43.6z"/> 71 C48.6,43.5,48.4,43.6,48.1,43.6z"/>
72 </g>
67 </g> 73 </g>
68 <g id="tongue"> 74 <g id="tongue">
69 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/> 75 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/>
...@@ -168,3 +174,5 @@ ...@@ -168,3 +174,5 @@
168 </g> 174 </g>
169 </g> 175 </g>
170 </svg> 176 </svg>
177
178
......
...@@ -4,9 +4,13 @@ ...@@ -4,9 +4,13 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 5
6 <title>HTML5 Ad</title> 6 <title>HTML5 Ad</title>
7
8 <!--
9
7 <script type="text/javascript"> 10 <script type="text/javascript">
8 11
9 // IAB source: modified to allow link testing 12 // IAB source: modified to allow link testing
13
10 var clickTag = "https://boscoandroxys.com"; 14 var clickTag = "https://boscoandroxys.com";
11 function getParameterByName(name) 15 function getParameterByName(name)
12 { 16 {
...@@ -19,6 +23,9 @@ ...@@ -19,6 +23,9 @@
19 } 23 }
20 clickTag = getParameterByName('clickTag'); 24 clickTag = getParameterByName('clickTag');
21 </script> 25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 29
23 30
24 31
...@@ -46,7 +53,6 @@ ...@@ -46,7 +53,6 @@
46 overflow: hidden; 53 overflow: hidden;
47 cursor: pointer; 54 cursor: pointer;
48 box-sizing: border-box; 55 box-sizing: border-box;
49 background-position: 0 -10px;
50 } 56 }
51 img { 57 img {
52 position: absolute; 58 position: absolute;
...@@ -62,6 +68,7 @@ ...@@ -62,6 +68,7 @@
62 68
63 #border{ 69 #border{
64 border-top: 10px solid #323e48; 70 border-top: 10px solid #323e48;
71 background-position: 0 -10px;
65 72
66 } 73 }
67 .box{ 74 .box{
...@@ -92,15 +99,10 @@ ...@@ -92,15 +99,10 @@
92 99
93 } 100 }
94 #subscribe{ 101 #subscribe{
95 left: 167px;
96 top: 190px;
97 102
98 } 103 right: 15px;
104 bottom: 25px;
99 105
100 #eye-right-lash, #e-large, #e-small{
101 opacity: 0;
102 }
103 #pant{
104 } 106 }
105 107
106 </style> 108 </style>
...@@ -121,13 +123,14 @@ ...@@ -121,13 +123,14 @@
121 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving"> 123 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving">
122 --> 124 -->
123 125
124 <img id="txt" src="assets/txt.png" alt="txt"> <!-- width="238" height="215" --> 126 <img id="txt" src="assets/txt.png" alt="txt">
125 127
126 128
127 <div id="logo"></div> 129 <div id="logo"></div>
128 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33"> 130 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33">
129 131
130 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 132 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
133 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
131 </div> 134 </div>
132 135
133 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 136 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...@@ -140,6 +143,8 @@ ...@@ -140,6 +143,8 @@
140 * embed external svg using ajax 143 * embed external svg using ajax
141 */ 144 */
142 145
146 eyeBuild.initialize();
147
143 var container = $("#logo"); 148 var container = $("#logo");
144 var svgUrl = "assets/logo.svg"; 149 var svgUrl = "assets/logo.svg";
145 150
...@@ -170,17 +175,33 @@ ...@@ -170,17 +175,33 @@
170 for (var i = 0 in box_arr) { 175 for (var i = 0 in box_arr) {
171 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 }); 176 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
172 } 177 }
173 console.log("boxes: " + tl.totalDuration()); 178 /* console.log("boxes: " + tl.totalDuration()); */
174 179
175 180
176 // animate the logo 181 // animate the logo
177 182
178 var eye_tl = new TimelineMax({repeat:12}); 183 var eye_tl = new TimelineMax({repeat:3});
179 eye_tl.to("#eye-right-lid", 2, {scaleY:.1, transformOrigin:"0% 0%", delay:0 }); 184
185 var winkTime = .3;
186 // close eye
187 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
188 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
189 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
190 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
180 191
192 var crumbTime = 1;
193 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
194 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
195 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
196 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
181 197
182 console.log("eye_right: " + eye_tl.totalDuration()); 198 // open eye
199 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
200 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
201 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
202 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
183 203
204 /* console.log("eye_right: " + eye_tl.totalDuration()); */
184 205
185 206
186 var tongue_tl = new TimelineMax(); 207 var tongue_tl = new TimelineMax();
...@@ -192,7 +213,7 @@ ...@@ -192,7 +213,7 @@
192 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 }); 213 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
193 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 }); 214 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
194 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 }); 215 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
195 console.log("tongue: " + tongue_tl.totalDuration()); 216 /* console.log("tongue: " + tongue_tl.totalDuration()); */
196 }; 217 };
197 }); 218 });
198 219
......
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
8 .st1{fill:#E1C19C;} 8 .st1{fill:#E1C19C;}
9 .st2{fill:#FFFFFF;} 9 .st2{fill:#FFFFFF;}
10 .st3{fill:#353F4A;} 10 .st3{fill:#353F4A;}
11 .st4{clip-path:url(#eyewhite-right_1_);} 11 .st4{clip-path:url(#clipPathId);}
12 .st5{fill:#F27658;} 12 .st5{fill:#F27658;}
13 #eye-right-lash, #e-large, #e-small{
14 opacity: 0;
15 }
16
13 </style> 17 </style>
14 <g id="face"> 18 <g id="face">
15 <g> 19 <g>
...@@ -33,37 +37,39 @@ ...@@ -33,37 +37,39 @@
33 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5 37 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5
34 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/> 38 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/>
35 <g id="face_x5F_crumbs"> 39 <g id="face_x5F_crumbs">
36 <circle id="e-large" class="st0" cx="59.5" cy="12.8" r="2"/> 40 <circle id="f-large" class="st0" cx="59.5" cy="12.8" r="2"/>
37 <circle id="e_x5F_small" class="st0" cx="61.2" cy="17.3" r="1.3"/> 41 <circle id="f-small" class="st0" cx="61.2" cy="17.3" r="1.3"/>
38 </g> 42 </g>
39 </g> 43 </g>
40 <g id="eyes"> 44 <g id="eyes">
41 <path id="eyewhite-left" class="st2" d="M31.9,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 45 <path id="eye-left-white" class="st2" d="M31.9,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
42 C30.3,39.1,31.9,40.7,31.9,42.7z"/> 46 C30.3,39.1,31.9,40.7,31.9,42.7z"/>
43 <path id="eye-left-pupil" class="st3" d="M30.4,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 47 <path id="eye-left-pupil" class="st3" d="M30.4,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
44 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 48 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
45 C31.4,42.8,31,42.1,30.4,41.6z"/> 49 C31.4,42.8,31,42.1,30.4,41.6z"/>
46 <g id="eye-right_x5F_lid"> 50 <g id="eye-right-group">
47 <defs> 51 <defs>
48 <path id="eyewhite-right" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 52 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
49 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 53 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
50 </defs> 54 <clipPath id="clipPathId">
51 <clipPath id="eyewhite-right_1_"> 55 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
52 <use xlink:href="#eyewhite_x002D_right" style="overflow:visible;"/>
53 </clipPath> 56 </clipPath>
54 <g id="eye-right-pupil" class="st4"> 57 </defs>
55 <path id="eyewhite_x5F_right" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 58 <g id="eye-right" class="st4">
59 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
60
61 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
56 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 62 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
57 <path id="eye_x5F_right" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 63 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
58 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 64 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
59 C53.3,42.8,52.9,42.1,52.3,41.6z"/> 65 C53.3,42.8,52.9,42.1,52.3,41.6z"/>
60 </g> 66 </g>
61 </g> 67 <circle id="e-large" class="st3" cx="54" cy="42" r="0.6"/>
62 <circle id="e-large_1_" class="st3" cx="54.1" cy="42.7" r="0.6"/> 68 <circle id="e-small" class="st3" cx="54" cy="42" r="0.2"/>
63 <circle id="e-small" class="st3" cx="54.2" cy="42.8" r="0.2"/>
64 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2 69 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2
65 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3 70 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3
66 C48.6,43.5,48.4,43.6,48.1,43.6z"/> 71 C48.6,43.5,48.4,43.6,48.1,43.6z"/>
72 </g>
67 </g> 73 </g>
68 <g id="tongue"> 74 <g id="tongue">
69 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/> 75 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/>
...@@ -168,3 +174,5 @@ ...@@ -168,3 +174,5 @@
168 </g> 174 </g>
169 </g> 175 </g>
170 </svg> 176 </svg>
177
178
......
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, 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 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <path class="st0" d="M41.7,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6s37.6-16.8,37.6-37.6S62.3,4.1,41.7,4.1z M46.8,46.3
10 c1.5-2.3,1.5-5.2,0-7.4v-6.7c5.7,3.1,7.9,10.2,4.8,16c-1.1,2-2.8,3.7-4.8,4.8V46.3z M41.8,62.8L29.2,50.2H19.1V35.1h10.1l12.6-12.5
11 V62.8z M63.7,48.2C61.5,56.5,55,63,46.8,65.1v-5.4c9.5-3.1,14.6-13.2,11.6-22.7c-1.8-5.5-6.1-9.8-11.6-11.6v-5.2
12 C59.2,23.3,66.7,35.8,63.7,48.2z"/>
13 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, 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 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>mute</title>
10 <path class="st0" d="M41.6,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6c20.8,0,37.6-16.8,37.6-37.6S62.4,4.1,41.6,4.1z
11 M46.8,32.6c3.9,1.8,6.4,5.8,6.3,10.1v1.8l-6.3-6.3V32.6z M41.8,22.5v10.6l-5.3-5.3L41.8,22.5z M61.1,65.5l-5-5
12 c-2.7,2.2-5.9,3.8-9.3,4.5v-5.3c2.1-0.7,4-1.7,5.8-3L41.8,46v16.8L29.2,50.2H19.1V35.1h11.8L19.1,23.3l3.3-3.3l19.4,19.7l22.6,22.6
13 L61.1,65.5z M61.9,53l-3.8-3.8c0.8-2.1,1.2-4.3,1.3-6.5c-0.1-7.8-5.1-14.7-12.6-17.1v-5.3c10.3,2.4,17.6,11.6,17.6,22.1
14 C64.5,46.1,63.6,49.8,61.9,53z"/>
15 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, 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 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>pause</title>
10 <path class="st0" d="M41.6,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6s37.6-16.8,37.6-37.6S62.4,4.1,41.6,4.1z M36.6,59.9
11 H26.3V23.5h10.3V59.9z M57.2,59.9H46.9V23.5h10.3V59.9z"/>
12 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, 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 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>play</title>
10 <path class="st0" d="M42.3,21c-12,0-21.7,9.7-21.7,21.7s9.7,21.7,21.7,21.7c12,0,21.7-9.7,21.7-21.7S54.3,21,42.3,21z M37.3,52.6
11 V34.5l14.8,9L37.3,52.6z"/>
12 </svg>
...@@ -4,10 +4,14 @@ ...@@ -4,10 +4,14 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 5
6 <title>HTML5 Ad</title> 6 <title>HTML5 Ad</title>
7
8 <!--
9
7 <script type="text/javascript"> 10 <script type="text/javascript">
8 11
9 // IAB source: modified to allow link testing 12 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton"; 13
14 var clickTag = "https://boscoandroxys.com";
11 function getParameterByName(name) 15 function getParameterByName(name)
12 { 16 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); 17 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
...@@ -19,6 +23,9 @@ ...@@ -19,6 +23,9 @@
19 } 23 }
20 clickTag = getParameterByName('clickTag'); 24 clickTag = getParameterByName('clickTag');
21 </script> 25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 29
23 30
24 31
...@@ -41,7 +48,7 @@ ...@@ -41,7 +48,7 @@
41 position: relative; 48 position: relative;
42 width: 100%; 49 width: 100%;
43 height: 100%; 50 height: 100%;
44 border: 1px solid #939598; 51 border: 1px solid #323e48;
45 background-color: #FFFFFF; 52 background-color: #FFFFFF;
46 overflow: hidden; 53 overflow: hidden;
47 cursor: pointer; 54 cursor: pointer;
...@@ -50,22 +57,56 @@ ...@@ -50,22 +57,56 @@
50 img { 57 img {
51 position: absolute; 58 position: absolute;
52 } 59 }
53 #logos {
54 right: 0px;
55 top: 185px;
56 opacity: 0;
57 }
58 60
59 61
60 /* Custom per ad */ 62 /* Custom per ad */
61 63
62 body{ 64 body{
63 width: 300px; 65 width: 728px;
64 height: 250px; 66 height: 90px;
67 }
68
69 #border{
70 border-top: 10px solid #323e48;
71 background-position: 0 -10px;
72
73 }
74 .box{
75 left:20px;
76 top:1px;
77 opacity: 0;
78 }
79 #box-spoileddog{
80 opacity: 1;
65 } 81 }
82 #txt, #txt2{
83 left: 105px;
84 top: 27px;
85
86 -ms-transform: scale(.5); /* IE 9 */
87 -ms-transform-origin: 0% 0%; /* IE 9 */
88 -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
89 -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
90 transform: scale(.5);
91 transform-origin: 0% 0%;
92 }
93 #txt2{
94 left: 22px;
95 opacity: 0;
96 }
97 #logo{
98 position: absolute;
99 left: 548px;
100 top: -5px;
101 width:182px;
102 height:auto;
66 103
67 #blue { 104 }
68 left: -402px; 105 #subscribe{
106
107 right: 186px;
108 bottom: 22px;
109 opacity: 0;
69 } 110 }
70 111
71 </style> 112 </style>
...@@ -74,25 +115,117 @@ ...@@ -74,25 +115,117 @@
74 115
75 <body> 116 <body>
76 <div id="border"> 117 <div id="border">
77 <img id="img" src="assets/img.jpg">
78 <img id="blue" src="assets/blue.gif">
79 <img id="logos" src="assets/logos.gif">
80 <img id="triangle" src="assets/triangle.png">
81 <img id="check" src="assets/check.gif">
82 118
83 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 119
120 <img class="box" id="box-spoileddog" src="assets/box-spoileddog.jpg" alt="box-spoileddog">
121 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving" style="left:110px">
122 <img class="box" id="box-xmas" src="assets/box-xmas.jpg" alt="box-xmas" style="left:200px">
123 <img class="box" id="box-winter" src="assets/box-winter.jpg" alt="box-winter" style="left:290px">
124 <img class="box" id="box-birthday" src="assets/box-birthday.jpg" alt="box-box-birthday" style="left:380px">
125 <img class="box" id="box-valentines" src="assets/box-valentines.jpg" alt="box-valentines" style="left:470px">
126
127 <img id="txt" src="assets/txt.png" alt="txt">
128 <img id="txt2" src="assets/txt2.png" alt="txt">
129
130
131 <div id="logo"></div>
132 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33">
133
134
135 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
136 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
84 </div> 137 </div>
85 138
86 <!-- GREENSOCK--> 139 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
87 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 140 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
88 <script> 141 <script>
89 var tl = new TimelineMax({repeat:2});
90 142
91 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 }); 143 $( document ).ready(function() {
92 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 }); 144
93 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 }); 145 /*
94 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 }); 146 * embed external svg using ajax
95 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 }); 147 */
148
149 eyeBuild.initialize();
150
151 var container = $("#logo");
152 var svgUrl = "assets/logo.svg";
153
154 $.get(svgUrl)
155 .then(injectSvg);
156
157 function injectSvg(xmlDoc) {
158 var svg = $(xmlDoc).find("svg");
159 container.append(svg);
160 animate();
161 }
162
163 /*
164 * animate
165 */
166
167 function animate(){
168
169 // animate the boxes
170
171 var tl = new TimelineMax({repeat:1});
172
173 tl.to("#txt", .5, {opacity:0, delay:2 });
174
175 var d = .1;
176 var box_arr = ["#box-spoileddog", "#box-thanksgiving", "#box-xmas", "#box-winter", "#box-birthday", "#box-valentines"];
177 tl.staggerTo(box_arr, 5*d, { opacity: 1}, d);
178 tl.to("#box-spoileddog", .1, {opacity:1, delay:2 });
179
180 tl.staggerTo(box_arr, 5*d, { opacity: 0}, -d);
181
182 tl.to("#txt2", .5, {opacity:1, delay:0 });
183 tl.to("#subscribe", .5, {opacity:1, delay:0 });
184 tl.to("#txt2", .5, {opacity:1, delay:5 });
185
186 console.log("boxes: " + tl.totalDuration());
187
188
189 // animate the logo
190
191 var eye_tl = new TimelineMax({repeat:3});
192
193 var winkTime = .3;
194 // close eye
195 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
196 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
197 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
198 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
199
200 var crumbTime = 1;
201 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
202 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
203 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
204 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
205
206 // open eye
207 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
208 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
209 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
210 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
211
212 /* console.log("eye_right: " + eye_tl.totalDuration()); */
213
214
215 var tongue_tl = new TimelineMax();
216 var pantDuration = .3;
217 var pantTongueLength = .9;
218 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
219 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
220 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
221 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
222 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
223 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
224 /* console.log("tongue: " + tongue_tl.totalDuration()); */
225 };
226 });
227
228
96 </script> 229 </script>
97 230
98 231
......