Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
619814a4 by Jeff Balicki
Options

second 18-121-117c HHF Summer Ads 2

1 parent b4ef9252
Inline Side-by-side
Showing 76 changed files with 1323 additions and 0 deletions
This diff could not be displayed because it is too large.
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 <script type="text/javascript">
9
10 /*
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
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
25 </script>
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: 250px;
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: absolute;
56 width: 300px;
57 height: 250px;
58 border: 1px solid #3191b2;
59 background-color: #0077a0;/* #0077a0 */
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */
66 }
67 img{
68 position: absolute;
69 }
70 .img{
71 opacity: 0;
72 }
73 .txt{
74 position: absolute;
75 opacity: 0;
76 }
77 .txtb{
78 position: absolute;
79 }
80
81 #img1{
82 opacity: 1;
83 }
84 #txtb1{
85 left:-300px;
86 top:109px;
87 }
88 #txtb2{
89 left:-300px;
90 top:131px;
91 }
92 #txtb3{
93 left:-300px;
94 top:153px;
95 }
96
97 #cta{
98 width: 148px;
99 height: auto;
100 left: 18px;
101 bottom:40px;
102 opacity: 0;
103 }
104
105 #logo{
106 width: 156px;
107 height: auto;
108 left: 22px;
109 top:23px;
110 opacity: 0;
111 }
112
113
114 </style>
115 </head>
116
117 <body>
118 <a href="javascript:eyeBuild.doClick(0)" class="cta">
119 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
120 <div id="border">
121
122 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="444" height="250">
123 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
124
125 <img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="444" height="250">
126 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
127
128 <img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="444" height="250">
129 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
130
131 <img id="img4" class="img" src="assets/img4@60.jpg" alt="img4@60" width="444" height="250">
132 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="txt4@2x" width="300">
133
134
135 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
136 <img id="cta" src="assets/donate@2x.png" alt="Donate Now">
137
138 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
139 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253">
140 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
141
142
143 </div>
144 </a>
145
146 <!-- GREENSOCK-->
147 <script src="assets/tweenMax.min.js"></script>
148
149 <script>
150
151 var tl = new TimelineMax({repeat:1, repeatDelay:4});
152
153 function stage1(){
154
155 imgtxt("#img1", "#txt1");
156 imgtxt("#img2", "#txt2");
157 imgtxt("#img3", "#txt3");
158 imgtxt("#img4", "#txt4");
159
160 // phase 2
161
162 tl.to("#logo", .5, {opacity:1, delay:-.5 });
163 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
164 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
165 tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3});
166 tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
167
168 console.log( "time: " + tl.totalDuration() );
169 }
170
171 function imgtxt(imgId, txtId){
172 tl.to(imgId, .5, {opacity:1, delay:-1 });
173 tl.to(imgId, 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
174 tl.to(txtId, .7, {opacity:1, delay:-1.5 });
175
176 tl.to(imgId, .5, {opacity:0, delay:.5 });
177 tl.to(txtId, .5, {opacity:0, delay:-.5 });
178
179 }
180
181
182 //---------------------
183 stage1();
184
185
186
187 </script>
188
189 </body>
190
191 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
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 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 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
117
118
119 <style>
120
121 body{
122 margin: 0;
123 padding: 0;
124 width: 300px;
125 height: 250px;
126 line-height: 1.2;
127 font-size: 27px;
128 letter-spacing: .4;
129 color: #CD040B;
130 font-family: "Neue Haas Grotesk", Arial, sans-serif;
131 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
132 font-style: normal;
133 }
134
135 a{
136 text-decoration: none;
137 color: inherit;
138 }
139 #click-tag{
140 display: block;
141 position: absolute;
142 width: 100%;
143 height: 420px;
144 top:190px;
145 }
146
147 #border{
148 position: relative;
149 width: 300px;
150 height: 250px;
151 /* border: 1px solid #55565A; */
152 background-color: #0077a0;
153 overflow: hidden;
154 cursor: pointer;
155 box-sizing: border-box;
156 }
157
158 #border:hover #cta{
159 /* background-color: #666666; */
160 }
161
162 #border:active #cta{
163 /* background-color: #000000; */
164 }
165
166 #video, #video-controls{
167 position: absolute;
168 width: 298px;
169 height: 168px;
170 left:1px;
171 top:22px;
172 }
173 #video-controls.start{
174 /* background: url(assets/video-poster.jpg) no-repeat center center; */
175 opacity:1;
176 }
177 #video-controls.playing {
178 opacity:0;
179 }
180
181 #video-controls:hover {
182 opacity:1;
183 }
184
185 #video-controls button{
186 border: none;
187 cursor: pointer;
188 width: 100%;
189 height: 100%;
190 }
191
192 button#play-pause{
193 background: url(assets/play.svg) no-repeat center center;
194 background-size: 83px 83px;
195 }
196 button#play-pause.playing{
197 background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
198 background-size: 20px 20px;
199 }
200 button#play-pause:hover{
201 background-size: 85px 85px;
202 }
203 button#play-pause.playing:hover{
204 background-position: 29px 141px;
205 background-size: 21px 21px;
206 }
207
208
209 button#mute{
210 background: url(assets/mute-un.svg) no-repeat center center;
211 background-size: 20px 20px;
212 position: absolute;
213 width: 22px;
214 height: 22px;
215 left:5px;
216 bottom: 5px;
217 }
218 button#mute.muted{
219 background: url(assets/mute.svg) no-repeat center center;
220 background-size: 20px 20px;
221 }
222
223 button#mute:hover{
224 background-size: 22px 22px;
225 }
226
227
228 /* */
229
230 .hidden{
231 opacity: 0;
232 position:absolute;
233 }
234 #txt1{
235 left:19px;
236 bottom:16px;
237 }
238 #txt2{
239 left:21px;
240 bottom:21px;
241 }
242 #logo{
243 right:18px;
244 bottom:14px;
245 }
246 #icon-play2{
247 right:18px;
248 bottom:16px;
249 }
250
251 </style>
252
253 </head>
254
255 <body>
256 <div id="border">
257
258 <video id="video" width="272" height="152">
259 <source src="https://player.vimeo.com/external/276039544.m3u8?s=5210010f71a624ab6eb606d974a50f246f8fe923" type="video/mp4" class="A">
260 Your browser doesn't support HTML5 video.
261 </video>
262 <div id="video-controls" class="start">
263 <button type="button" id="play-pause" class=""></button>
264 <button type="button" id="mute" class=""></button>
265 </div>
266
267 <img id="txt1" class="hidden" src="assets/txt1@2x.png" alt="txt1@2x" width="133">
268 <img id="logo" class="hidden" src="assets/logo@2x.png" alt="logo@2x" width="117">
269
270 <img id="txt2" class="hidden" src="assets/txt2@2x.png" alt="txt2@2x" width="222">
271 <img id="icon-play2" class="hidden" src="assets/icon-play@2x.png" alt="icon-play@2x" width="30">
272
273 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
274 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
275 </div>
276 <!-- GREENSOCK-->
277 <script src="assets/tweenMax.min.js"></script>
278
279 <script>
280
281 var tl = new TimelineMax({repeat:3, repeatDelay:3.5});
282
283 function stage1(){
284 tl.to("#txt2", .5, {opacity:1, delay:.3 });
285 tl.to("#icon-play2", .5, {opacity:1, delay:-.4 });
286
287 tl.to("#txt2", .5, {opacity:0, delay:3 });
288 tl.to("#icon-play2", .5, {opacity:0, delay:-.4 });
289
290 tl.to("#logo", .5, {opacity:1, delay:-.5 });
291 tl.to("#txt1", .5, {opacity:1, delay: -.3});
292
293 console.log( "time: " + tl.totalDuration() );
294 }
295
296 stage1();
297
298
299
300 </script>
301
302 </body>
303
304 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
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 <script type="text/javascript">
9
10 /*
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
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
25 </script>
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: absolute;
56 width: 300px;
57 height: 600px;
58 border: 1px solid #3191b2;
59 background-color: #0077a0;/* #0077a0 */
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */
66 }
67 img{
68 position: absolute;
69 }
70 .img{
71 position: absolute;
72 opacity: 0;
73 width: 300px;
74 height: 600px;
75 }
76 .txt{
77 position: absolute;
78 left:0;
79 top:0;
80 opacity: 0;
81 }
82 .txtb{
83 position: absolute;
84 left:-300px;
85 }
86
87 #img1{
88 opacity: .5;
89 }
90 #txtb1{
91 top:47px;
92 }
93 #txtb2{
94 top:79px;
95 }
96 #txtb3{
97 top:111px;
98 }
99 #txtb4{
100 top:143px;
101 }
102 #txtb5{
103 top:175px;
104 }
105 #txtb6{
106 top:207px;
107 }
108 #txtb7{
109 top:239px;
110 }
111
112 #cta{
113 position: absolute;
114 width: 175px;
115 height: auto;
116 left: 28px;
117 top:272px;
118 opacity: 0;
119 }
120
121 #logo{
122 position: absolute;
123 width: 200px;
124 height: auto;
125 left: 35px;
126 bottom:40px;
127 opacity: 0;
128 }
129
130
131 </style>
132 </head>
133
134 <body>
135 <a href="javascript:eyeBuild.doClick(0)" class="cta">
136 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
137 <div id="border">
138
139 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="300">
140 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
141
142 <img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="300">
143 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
144
145
146 <img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="300">
147 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
148
149 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
150 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
151
152 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="78">
153 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="82">
154 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="147">
155 <img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="152">
156 <img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="63">
157 <img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="193">
158 <img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="223">
159
160 </div>
161 </a>
162
163 <!-- GREENSOCK-->
164 <script src="assets/tweenMax.min.js"></script>
165
166 <script>
167
168 var tl = new TimelineMax({repeat:2, repeatDelay:3.5});
169
170 function stage1(){
171 imgtxt("#img1", "#txt1");
172 imgtxt("#img2", "#txt2");
173 imgtxt("#img3", "#txt3");
174
175 // phase 2
176
177 tl.to("#logo", .5, {opacity:1, delay:-.5 });
178 tl.to("#txtb1", .5, {left:35, ease:Power1.easeOut, delay:-.3});
179 tl.to("#txtb2", .5, {left:35, ease:Power1.easeOut, delay:-.3});
180 tl.to("#txtb3", .5, {left:35, ease:Power1.easeOut, delay:-.3});
181 tl.to("#txtb4", .5, {left:35, ease:Power1.easeOut, delay:-.3});
182 tl.to("#txtb5", .5, {left:35, ease:Power1.easeOut, delay:-.3});
183 tl.to("#txtb6", .5, {left:35, ease:Power1.easeOut, delay:-.3});
184 tl.to("#txtb7", .5, {left:35, ease:Power1.easeOut, delay:-.3});
185 tl.to("#cta", .5, {opacity:1, top:282, ease:Power1.easeOut, delay:.2 });
186
187
188
189
190 console.log( "time: " + tl.totalDuration() );
191 }
192
193 function imgtxt(imgId, txtId){
194 console.log( "img: " + imgId );
195
196 tl.to(imgId, .5, {opacity:1, delay:-.5 });
197 tl.to(txtId, .7, {opacity:1, delay:0 });
198
199
200 tl.to(imgId, .5, {opacity:0, delay:.9 });
201 tl.to(txtId, .5, {opacity:0, delay:-.5 });
202
203 }
204
205
206 //---------------------
207 stage1();
208
209
210
211 </script>
212
213 </body>
214
215 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
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 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 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
117
118
119 <style>
120
121 body{
122 margin: 0;
123 padding: 0;
124 width: 300px;
125 height: 600px;
126 line-height: 1.2;
127 font-size: 27px;
128 letter-spacing: .4;
129 color: #CD040B;
130 font-family: "Neue Haas Grotesk", Arial, sans-serif;
131 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
132 font-style: normal;
133 }
134
135 a{
136 text-decoration: none;
137 color: inherit;
138 }
139 #click-tag{
140 display: block;
141 position: absolute;
142 width: 100%;
143 height: 420px;
144 top:200px;
145 }
146
147 #border{
148 position: relative;
149 width: 300px;
150 height: 600px;
151 /* border: 1px solid #55565A; */
152 background-color: #0077a0;
153 overflow: hidden;
154 cursor: pointer;
155 box-sizing: border-box;
156 }
157
158 #border:hover #cta{
159 /* background-color: #666666; */
160 }
161
162 #border:active #cta{
163 /* background-color: #000000; */
164 }
165
166 #video, #video-controls{
167 position: absolute;
168 width: 298px;
169 height: 168px;
170 left:1px;
171 top:30px;
172 }
173 #video-controls.start{
174 /* background: url(assets/video-poster.jpg) no-repeat center center; */
175 opacity:1;
176 }
177 #video-controls.playing {
178 opacity:0;
179 }
180
181 #video-controls:hover {
182 opacity:1;
183 }
184
185 #video-controls button{
186 border: none;
187 cursor: pointer;
188 width: 100%;
189 height: 100%;
190 }
191
192 button#play-pause{
193 background: url(assets/play.svg) no-repeat center center;
194 background-size: 83px 83px;
195 }
196 button#play-pause.playing{
197 background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
198 background-size: 20px 20px;
199 }
200 button#play-pause:hover{
201 background-size: 85px 85px;
202 }
203 button#play-pause.playing:hover{
204 background-position: 29px 141px;
205 background-size: 21px 21px;
206 }
207
208
209 button#mute{
210 background: url(assets/mute-un.svg) no-repeat center center;
211 background-size: 20px 20px;
212 position: absolute;
213 width: 22px;
214 height: 22px;
215 left:5px;
216 bottom: 5px;
217 }
218 button#mute.muted{
219 background: url(assets/mute.svg) no-repeat center center;
220 background-size: 20px 20px;
221 }
222
223 button#mute:hover{
224 background-size: 22px 22px;
225 }
226
227
228 /* */
229
230 .txt{
231 position: absolute;
232 left:0;
233 top:0;
234 opacity: 0;
235 }
236 .txtb{
237 position: absolute;
238 left:-300px;
239 }
240 #txtb1{
241 top:218px;
242 }
243 #txtb2{
244 top:246px;
245 }
246 #txtb3{
247 top:273px;
248 }
249 #txtb4{
250 top:300px;
251 }
252 #txtb5{
253 top:327px;
254 }
255 #txtb6{
256 top:353px;
257 }
258 #txtb7{
259 top:380px;
260 }
261
262 #cta{
263 position: absolute;
264 left: 24px;
265 top:380px;
266 opacity: 0;
267 }
268
269 #logo{
270 position: absolute;
271 width: 180px;
272 height: auto;
273 left: 33px;
274 bottom:33px;
275 opacity: 0;
276 }
277
278 </style>
279
280 </head>
281
282 <body>
283 <div id="border">
284 <video id="video" width="272" height="152">
285 <source src="https://player.vimeo.com/external/276039544.m3u8?s=5210010f71a624ab6eb606d974a50f246f8fe923" type="video/mp4" class="A">
286 Your browser doesn't support HTML5 video.
287 </video>
288 <div id="video-controls" class="start">
289 <button type="button" id="play-pause" class=""></button>
290 <button type="button" id="mute" class=""></button>
291 </div>
292
293 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
294 <img id="cta" src="assets/cta@2x.png" alt="Get the full story here" width="263">
295
296 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="66">
297 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="69">
298 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="124">
299 <img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="128">
300 <img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="53">
301 <img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="163">
302 <img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="188">
303
304 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
305 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
306 </div>
307 <!-- GREENSOCK-->
308 <script src="assets/tweenMax.min.js"></script>
309
310 <script>
311
312 var tl = new TimelineMax({repeat:1, repeatDelay:3.5});
313
314 function stage1(){
315 var l = 31;
316 tl.to("#logo", .5, {opacity:1, delay:-.5 });
317 tl.to("#txtb1", .5, {left:l, ease:Power1.easeOut, delay:-.3});
318 tl.to("#txtb2", .5, {left:l, ease:Power1.easeOut, delay:-.3});
319 tl.to("#txtb3", .5, {left:l, ease:Power1.easeOut, delay:-.3});
320 tl.to("#txtb4", .5, {left:l, ease:Power1.easeOut, delay:-.3});
321 tl.to("#txtb5", .5, {left:l, ease:Power1.easeOut, delay:-.3});
322 tl.to("#txtb6", .5, {left:l, ease:Power1.easeOut, delay:-.3});
323 tl.to("#txtb7", .5, {left:l, ease:Power1.easeOut, delay:-.3});
324 tl.to("#cta", .5, {opacity:1, top:414, ease:Power1.easeOut, delay:.2 });
325
326 console.log( "time: " + tl.totalDuration() );
327 }
328
329
330 //---------------------
331 stage1();
332
333
334
335 </script>
336
337 </body>
338
339 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
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 <script type="text/javascript">
9
10 /*
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
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
25 </script>
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: 728px;
40 height: 90px;
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: absolute;
56 width: 728px;
57 height: 90px;
58 border: 1px solid #3191b2;
59 background-color: #0077a0;/* #0077a0 */
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */
66 }
67 img{
68 position: absolute;
69 }
70 .img{
71 position: absolute;
72 opacity: 0;
73 width: 728px;
74 height: 90px;
75 }
76 .txt{
77 position: absolute;
78 left:0;
79 top:0;
80 opacity: 0;
81 }
82 .txtb{
83 position: absolute;
84 }
85
86 #img1{
87 opacity: 1;
88 background-color: #395252;
89 }
90 #img2{
91 background-color: #3e403c;
92 }
93 #img3{
94 background-color: #1e2226;
95 }
96 #txtb1{
97 left:-400px;
98 top:32px;
99 }
100
101 #cta{
102 position: absolute;
103 width: 157px;
104 height: auto;
105 left: 238px;
106 top:20px;
107 opacity: 0;
108 }
109
110 #logo{
111 position: absolute;
112 width: 150px;
113 height: auto;
114 right: 35px;
115 top:23px;
116 opacity: 0;
117 }
118
119
120 </style>
121 </head>
122
123 <body>
124 <a href="javascript:eyeBuild.doClick(0)" class="cta">
125 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
126 <div id="border">
127
128 <div id="img1" class="img"><img src="assets/img1@60.jpg" alt="img1@60" width="415"></div>
129 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="728">
130
131 <div id="img2" class="img"><img src="assets/img2@60.jpg" alt="img2@60" width="415"></div>
132 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="728">
133
134
135 <div id="img3" class="img"><img src="assets/img3@60.jpg" alt="img3@60" width="415"></div>
136 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="728">
137
138 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
139 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
140 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
141
142
143
144 </div>
145 </a>
146
147 <!-- GREENSOCK-->
148 <script src="assets/tweenMax.min.js"></script>
149
150 <script>
151
152 var tl = new TimelineMax({repeat:2, repeatDelay:3.5});
153
154 function stage1(){
155 imgtxt("#img1", "#txt1");
156 imgtxt("#img2", "#txt2");
157 imgtxt("#img3", "#txt3");
158
159 // phase 2
160
161 tl.to("#logo", .5, {opacity:1, delay:-.5 });
162 tl.to("#txtb1", .5, {left:38, ease:Power1.easeOut, delay:-.5});
163 tl.to("#cta", .5, {opacity:1, left:268, ease:Power1.easeOut, delay:.2 });
164
165 console.log( "time: " + tl.totalDuration() );
166 }
167
168 function imgtxt(imgId, txtId){
169 console.log( "img: " + imgId );
170
171 tl.to(imgId, .5, {opacity:1, delay:-.5 });
172 tl.to(txtId, .7, {opacity:1, delay:0 });
173
174
175 tl.to(imgId, .5, {opacity:0, delay:.9 });
176 tl.to(txtId, .5, {opacity:0, delay:-.5 });
177
178 }
179
180
181 //---------------------
182 stage1();
183
184
185
186 </script>
187
188 </body>
189
190 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13 <!-- <h3><a href="index.html">Summer 2017 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_may.html">May 2016 Ads</a></h3> -->
14
15 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
16 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
17 <iframe id='' class="b300x250 " scrolling="no" src="300x250vid/index.html"></iframe>
18 <iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
19 <iframe id='' class="b300x600 " scrolling="no" src="300x600vid/index.html"></iframe>
20
21 </body>
22 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 border: 1px #d4d4d4 solid;
28 overflow: hidden;
29 iframe::-webkit-scrollbar {
30 display: none;
31 };
32 }
33
34 .stacked {
35 display: flex;
36
37 }
38 .b300x250 {
39 width: 300px;
40 height: 250px;
41 }
42 .b728x90 {
43 width: 728px;
44 height: 90px;
45 }
46 .b300x600 {
47 width: 300px;
48 height: 600px;
49 }
50 .b600x566 {
51 width: 600px;
52 height: 566px;
53 }
1 //js file
...\ No newline at end of file ...\ No newline at end of file