Skip to content

Tenzing / banners-with-skip

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

HHF Summer Remarketing ads for approval

1 parent 0a24fe30
Inline Side-by-side
Showing 97 changed files with 56 additions and 900 deletions
......@@ -83,30 +83,26 @@
}
#txtb1{
left:-300px;
top:109px;
top:36px;
}
#txtb2{
left:-300px;
top:131px;
}
#txtb3{
left:-300px;
top:153px;
top:57px;
}
#cta{
width: 148px;
height: auto;
left: 18px;
bottom:40px;
bottom:150px;
opacity: 0;
}
#logo{
width: 156px;
height: auto;
left: 22px;
top:23px;
left: 26px;
top:164px;
opacity: 0;
}
......@@ -122,62 +118,42 @@
<img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="444" height="250">
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
<img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="444" height="250">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
<img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="444" height="250">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
<img id="img4" class="img" src="assets/img4@60.jpg" alt="img4@60" width="444" height="250">
<img id="txt4" class="txt" src="assets/txt4@2x.png" alt="txt4@2x" width="300">
<img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="cta" src="assets/donate@2x.png" alt="Donate Now">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253">
<img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="257">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="257">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script src="assets/tweenMax.min.js"></script>
<script>
var tl;
var tl = new TimelineMax({repeat:2, repeatDelay:5});
function stage1(){
tl = new TimelineMax({repeat:1, repeatDelay:4});
imgtxt("#img1", "#txt1");
imgtxt("#img2", "#txt2");
imgtxt("#img3", "#txt3");
imgtxt("#img4", "#txt4");
tl.to("#txt1", .5, {opacity:1, delay:-1 });
tl.to("#img1", 3.5, {x:-100, ease:Power1.easeOut, delay:-1 });
tl.to("#img1", .5, {opacity:0, delay:.5 });
tl.to("#txt1", .5, {opacity:0, delay:-.5 });
// phase 2
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3});
tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
tl.to("#cta", .7, {opacity:1, bottom:107, ease:Power1.easeOut, delay:.2 });
console.log( "time: " + tl.totalDuration() );
}
function imgtxt(imgId, txtId){
tl.to(imgId, .5, {opacity:1, delay:-1 });
tl.to(imgId, 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
tl.to(txtId, .7, {opacity:1, delay:-1.5 });
tl.to(imgId, .5, {opacity:0, delay:.5 });
tl.to(txtId, .5, {opacity:0, delay:-.5 });
}
//---------------------
......
......@@ -70,8 +70,6 @@
.img{
position: absolute;
opacity: 0;
width: 300px;
height: 600px;
}
.txt{
position: absolute;
......@@ -88,25 +86,10 @@
opacity: .5;
}
#txtb1{
top:47px;
top:252px;
}
#txtb2{
top:79px;
}
#txtb3{
top:111px;
}
#txtb4{
top:143px;
}
#txtb5{
top:175px;
}
#txtb6{
top:207px;
}
#txtb7{
top:239px;
top:284px;
}
#cta{
......@@ -114,7 +97,7 @@
width: 175px;
height: auto;
left: 28px;
top:272px;
top:295px;
opacity: 0;
}
......@@ -136,73 +119,46 @@
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="300">
<img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="807">
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
<img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="300">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
<img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="300">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
<img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="78">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="82">
<img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="147">
<img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="152">
<img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="63">
<img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="193">
<img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="223">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="242">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="242">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script src="assets/tweenMax.min.js"></script>
<script>
var tl;
var tl = new TimelineMax({repeat:2, repeatDelay:5});
function stage1(){
tl = new TimelineMax({repeat:2, repeatDelay:3});
imgtxt("#img1", "#txt1");
imgtxt("#img2", "#txt2");
imgtxt("#img3", "#txt3");
tl.to("#txt1", .5, {opacity:1, delay:-1 });
tl.to("#img1", 3.5, {x:-450, ease:Power1.easeInOut, delay:-1 });
tl.to("#img1", .5, {scaleX:.385, scaleY:.385, x:0, transformOrigin:"left top", ease:Power1.easeInOut, delay:.5 });
tl.to("#txt1", .5, {opacity:0, delay:-.5 });
// phase 2
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#logo", .5, {opacity:1, delay:0 });
tl.to("#txtb1", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb2", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb3", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb4", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb5", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb6", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb7", .5, {left:35, ease:Power1.easeOut, delay:-.3});
tl.to("#cta", .5, {opacity:1, top:282, ease:Power1.easeOut, delay:.2 });
tl.to("#cta", .5, {opacity:1, top:347, ease:Power1.easeOut, delay:.2 });
console.log( "time: " + tl.totalDuration() );
}
function imgtxt(imgId, txtId){
console.log( "img: " + imgId );
tl.to(imgId, .5, {opacity:1, delay:-.5 });
tl.to(txtId, .7, {opacity:1, delay:0 });
tl.to(imgId, .5, {opacity:0, delay:.6 });
tl.to(txtId, .5, {opacity:0, delay:-.5 });
}
//---------------------
......
......@@ -85,24 +85,22 @@
#img1{
opacity: 1;
background-color: #395252;
}
#img2{
background-color: #3e403c;
}
#img3{
background-color: #1e2226;
background-color: #998d77;
}
#txtb1{
left:-400px;
top:32px;
top:19px;
}
#txtb2{
left:-400px;
top:46px;
}
#cta{
position: absolute;
width: 157px;
height: auto;
left: 238px;
left: 288px;
top:20px;
opacity: 0;
}
......@@ -125,60 +123,43 @@
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<div id="img1" class="img"><img src="assets/img1@60.jpg" alt="img1@60" width="415"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="728">
<div id="img2" class="img"><img src="assets/img2@60.jpg" alt="img2@60" width="415"></div>
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="728">
<div id="img1" class="img"><img src="assets/img1@60.jpg" alt="img1@60" width="219"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="728">
<div id="img3" class="img"><img src="assets/img3@60.jpg" alt="img3@60" width="415"></div>
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="728">
<img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="378">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="378">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script src="assets/tweenMax.min.js"></script>
<script>
var tl;
var tl = new TimelineMax({repeat:2, repeatDelay:4});
function stage1(){
tl = new TimelineMax({repeat:2, repeatDelay:3.5});
tl.to("#txt1", .5, {opacity:1, delay:-1 });
imgtxt("#img1", "#txt1");
imgtxt("#img2", "#txt2");
imgtxt("#img3", "#txt3");
tl.to("#img1", .5, {opacity:0, delay:3.5 });
tl.to("#txt1", .5, {opacity:0, delay:-.5 });
// phase 2
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#txtb1", .5, {left:38, ease:Power1.easeOut, delay:-.5});
tl.to("#cta", .5, {opacity:1, left:268, ease:Power1.easeOut, delay:.2 });
tl.to("#txtb2", .5, {left:38, ease:Power1.easeOut, delay:-.3});
tl.to("#cta", .5, {opacity:1, left:368, ease:Power1.easeOut, delay:.2 });
console.log( "time: " + tl.totalDuration() );
}
function imgtxt(imgId, txtId){
console.log( "img: " + imgId );
tl.to(imgId, .5, {opacity:1, delay:-.5 });
tl.to(txtId, .7, {opacity:1, delay:0 });
tl.to(imgId, .5, {opacity:0, delay:.9 });
tl.to(txtId, .5, {opacity:0, delay:-.5 });
}
//---------------------
stage1();
......
......@@ -10,13 +10,11 @@
<script src="main.js"></script>
</head>
<body>
<!-- <h3><a href="index.html">Summer 2017 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_may.html">May 2016 Ads</a></h3> -->
<h3><a href="index.html">Summer 2018 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index-re.html">Summer 2018 Remarketing Ads</a></h3>
<iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
<iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="300x250vid/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600vid/index.html"></iframe>
<iframe id='' class="b728x90" scrolling="no" src="728x90re/index.html"></iframe>
<iframe id='' class="b300x250" scrolling="no" src="300x250re/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600re/index.html"></iframe>
</body>
</html>
......
......@@ -10,7 +10,7 @@
<script src="main.js"></script>
</head>
<body>
<!-- <h3><a href="index.html">Summer 2017 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_may.html">May 2016 Ads</a></h3> -->
<h3><a href="index.html">Summer 2018 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index-re.html">Summer 2018 Remarketing Ads</a></h3>
<iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
<iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
......
<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
<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
<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
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.75;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<title>play</title>
<g class="st0">
<circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
<polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
</g>
</svg>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.className = "start"
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
muteButton.addEventListener("click", function(e) {
if (video.muted == true) {
eyeBuild.doIAT(4);
} else {
eyeBuild.doIAT(3);
}
video.muted = !video.muted;
toggleClass(muteButton, "muted");
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var mute = function(){
video.muted=true;
toggleClass(muteButton, "muted");
}
mute();
play();
}
function toggleClass(element, toggleClass){
var currentClass = element.className;
if(currentClass.indexOf(toggleClass) > -1){ //has class
newClass = currentClass.replace(toggleClass,"")
}else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass;
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 420px;
top:190px;
}
#border{
position: relative;
width: 300px;
height: 250px;
/* border: 1px solid #55565A; */
background-color: #0077a0;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#border:hover #cta{
/* background-color: #666666; */
}
#border:active #cta{
/* background-color: #000000; */
}
#video, #video-controls{
position: absolute;
width: 298px;
height: 168px;
left:1px;
top:22px;
}
#video-controls.start{
background: url(assets/poster.jpg) no-repeat center center;
opacity:1;
}
#video-controls.playing {
opacity:0;
}
#video-controls:hover {
opacity:1;
}
#video-controls button{
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 141px;
background-size: 21px 21px;
}
button#mute{
background: url(assets/mute-un.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
width: 22px;
height: 22px;
left:5px;
bottom: 5px;
}
button#mute.muted{
background: url(assets/mute.svg) no-repeat center center;
background-size: 20px 20px;
}
button#mute:hover{
background-size: 22px 22px;
}
/* */
.hidden{
opacity: 0;
position:absolute;
}
#txt1{
left:19px;
bottom:16px;
}
#txt2{
left:21px;
bottom:21px;
}
#logo{
right:18px;
bottom:14px;
}
#icon-play2{
right:18px;
bottom:16px;
}
</style>
</head>
<body>
<div id="border">
<video id="video" width="272" height="152">
<source src="https://player.vimeo.com/external/276039544.sd.mp4?s=0f72735b5319d23b7b024045ab34ef8b65b39b13&profile_id=164" type="video/mp4" class="A">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class=""></button>
<button type="button" id="mute" class=""></button>
</div>
<img id="txt1" class="hidden" src="assets/txt1@2x.png" alt="txt1@2x" width="133">
<img id="logo" class="hidden" src="assets/logo@2x.png" alt="logo@2x" width="117">
<img id="txt2" class="hidden" src="assets/txt2@2x.png" alt="txt2@2x" width="222">
<img id="icon-play2" class="hidden" src="assets/icon-play@2x.png" alt="icon-play@2x" width="30">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl;
function stage1(){
tl = new TimelineMax({repeat:3, repeatDelay:3.5});
tl.to("#txt2", .5, {opacity:1, delay:.3 });
tl.to("#icon-play2", .5, {opacity:1, delay:-.4 });
tl.to("#txt2", .5, {opacity:0, delay:3 });
tl.to("#icon-play2", .5, {opacity:0, delay:-.4 });
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#txt1", .5, {opacity:1, delay: -.3});
console.log( "time: " + tl.totalDuration() );
}
stage1();
</script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.
<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
<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
<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
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.75;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
</style>
<title>play</title>
<g class="st0">
<circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
<polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
</g>
</svg>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.className = "start"
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
muteButton.addEventListener("click", function(e) {
if (video.muted == true) {
eyeBuild.doIAT(4);
} else {
eyeBuild.doIAT(3);
}
video.muted = !video.muted;
toggleClass(muteButton, "muted");
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var mute = function(){
video.muted=true;
toggleClass(muteButton, "muted");
}
mute();
play();
}
function toggleClass(element, toggleClass){
var currentClass = element.className;
if(currentClass.indexOf(toggleClass) > -1){ //has class
newClass = currentClass.replace(toggleClass,"")
}else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass;
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 420px;
top:200px;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #0077a0;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#border:hover #cta{
/* background-color: #666666; */
}
#border:active #cta{
/* background-color: #000000; */
}
#video, #video-controls{
position: absolute;
width: 298px;
height: 168px;
left:1px;
top:30px;
}
#video-controls.start{
background: url(assets/poster.jpg) no-repeat center center;
opacity:1;
}
#video-controls.playing {
opacity:0;
}
#video-controls:hover {
opacity:1;
}
#video-controls button{
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 141px;
background-size: 21px 21px;
}
button#mute{
background: url(assets/mute-un.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
width: 22px;
height: 22px;
left:5px;
bottom: 5px;
}
button#mute.muted{
background: url(assets/mute.svg) no-repeat center center;
background-size: 20px 20px;
}
button#mute:hover{
background-size: 22px 22px;
}
/* */
.txt{
position: absolute;
left:0;
top:0;
opacity: 0;
}
.txtb{
position: absolute;
left:-300px;
}
#txtb1{
top:218px;
}
#txtb2{
top:246px;
}
#txtb3{
top:273px;
}
#txtb4{
top:300px;
}
#txtb5{
top:327px;
}
#txtb6{
top:353px;
}
#txtb7{
top:380px;
}
#cta{
position: absolute;
left: 24px;
top:380px;
opacity: 0;
}
#logo{
position: absolute;
width: 180px;
height: auto;
left: 33px;
bottom:33px;
opacity: 0;
}
</style>
</head>
<body>
<div id="border">
<video id="video" width="272" height="152">
<source src="https://player.vimeo.com/external/276039544.sd.mp4?s=0f72735b5319d23b7b024045ab34ef8b65b39b13&profile_id=164" type="video/mp4" class="A">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class=""></button>
<button type="button" id="mute" class=""></button>
</div>
<img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
<img id="cta" src="assets/cta@2x.png" alt="Get the full story here" width="263">
<img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="66">
<img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="69">
<img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="124">
<img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="128">
<img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="53">
<img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="163">
<img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="188">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl;
function stage1(){
tl = new TimelineMax({repeat:1, repeatDelay:3.5});
var l = 31;
tl.to("#logo", .5, {opacity:1, delay:-.5 });
tl.to("#txtb1", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb2", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb3", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb4", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb5", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb6", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#txtb7", .5, {left:l, ease:Power1.easeOut, delay:-.3});
tl.to("#cta", .5, {opacity:1, top:414, ease:Power1.easeOut, delay:.2 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
stage1();
</script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.
html {
background-color: #d4d4d4;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #8e8e8e;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3em;
margin-left: 10px;
}
a {
color: #8e8e8e;
}
a:hover {
color: #FFFFFF;
}
iframe, img {
margin: 10px;
border: 1px #d4d4d4 solid;
overflow: hidden;
iframe::-webkit-scrollbar {
display: none;
};
}
.stacked {
display: flex;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}
//js file
\ No newline at end of file