Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
a2d83c7e by Jeremy Groot
Options

CWL Spring Digital Production 2019

1 parent 372a8eeb
Inline Side-by-side
Showing 80 changed files with 3180 additions and 0 deletions
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:75px;
background:white;
z-index: 10;
}
#copy img {
height:55px;
width:auto;
position: absolute;
left:15px;
top:10px;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:40px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:120px;
}
.blue{
background-color: #008bd8;
top:136px;
}
.orange{
background-color: #fa9500;
top:152px;
}
.grey{
background-color: #434448;
top:102px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div class='top-bar'></div>
<div id="img"><img src="" alt="img" width="300" ></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
</div>
</a>
<!-- jQuery-->
<!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500',start:"-40px",end:"-135px"},
2:{color:'#008bd8',start:"-35px",end:"-115px"},
3:{color:'#75b00a',start:"-20px",end:"-105px"},
4:{color:'#434448',start:"-50px",end:"-150px"}
};
var rand = 1;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:0, repeatDelay:3});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to(".img1",0,{opacity:0},"-=6.5");
tl.to(".img2",0.5,{opacity:1},"-=6.5");
tl.to(".img2",0.5,{opacity:0},"-=2.5");
tl.to(".img3",0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:75px;
background:white;
z-index: 10;
}
#copy img {
height:55px;
width:auto;
position: absolute;
left:15px;
top:10px;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:40px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:120px;
}
.blue{
background-color: #008bd8;
top:136px;
}
.orange{
background-color: #fa9500;
top:152px;
}
.grey{
background-color: #434448;
top:102px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div class='top-bar'></div>
<div id="img"><img src="" alt="img" width="300" ></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
</div>
</a>
<!-- jQuery-->
<!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500',start:"-40px",end:"-135px"},
2:{color:'#008bd8',start:"-35px",end:"-115px"},
3:{color:'#75b00a',start:"-20px",end:"-105px"},
4:{color:'#434448',start:"-50px",end:"-150px"}
};
var rand = 2;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:0, repeatDelay:3});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to(".img1",0,{opacity:0},"-=6.5");
tl.to(".img2",0.5,{opacity:1},"-=6.5");
tl.to(".img2",0.5,{opacity:0},"-=2.5");
tl.to(".img3",0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:75px;
background:white;
z-index: 10;
}
#copy img {
height:55px;
width:auto;
position: absolute;
left:15px;
top:10px;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:40px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:120px;
}
.blue{
background-color: #008bd8;
top:136px;
}
.orange{
background-color: #fa9500;
top:152px;
}
.grey{
background-color: #434448;
top:102px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div class='top-bar'></div>
<div id="img"><img src="" alt="img" width="300" ></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
</div>
</a>
<!-- jQuery-->
<!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500',start:"-40px",end:"-135px"},
2:{color:'#008bd8',start:"-35px",end:"-115px"},
3:{color:'#75b00a',start:"-20px",end:"-105px"},
4:{color:'#434448',start:"-50px",end:"-150px"}
};
var rand = 3;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:0, repeatDelay:3});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to(".img1",0,{opacity:0},"-=6.5");
tl.to(".img2",0.5,{opacity:1},"-=6.5");
tl.to(".img2",0.5,{opacity:0},"-=2.5");
tl.to(".img3",0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:75px;
background:white;
z-index: 10;
}
#copy img {
height:55px;
width:auto;
position: absolute;
left:15px;
top:10px;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:40px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:120px;
}
.blue{
background-color: #008bd8;
top:136px;
}
.orange{
background-color: #fa9500;
top:152px;
}
.grey{
background-color: #434448;
top:102px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div class='top-bar'></div>
<div id="img"><img src="" alt="img" width="300" ></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
</div>
</a>
<!-- jQuery-->
<!-- http://youmightnotneedjquery.com/ <script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> -->
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500',start:"-40px",end:"-135px"},
2:{color:'#008bd8',start:"-35px",end:"-115px"},
3:{color:'#75b00a',start:"-20px",end:"-105px"},
4:{color:'#434448',start:"-50px",end:"-150px"}
};
var rand = 4;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img img').setAttribute('src', "assets/"+rand+".jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:0});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to(".img1",0,{opacity:0},"-=6.5");
tl.to(".img2",0.5,{opacity:1},"-=6.5");
tl.to(".img2",0.5,{opacity:0},"-=2.5");
tl.to(".img3",0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!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();
}
</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;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#img img {
position: absolute;
}
.faceimg2 {
opacity: 0;
}
.faceimg3 {
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:250px;
background:white;
z-index: 10;
}
#copy img {
width:250px;
position: absolute;
left:5px;
top:10px;
padding:15px;
}
.img2 {
opacity: 0;
}
#copy img.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:62px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:296px;
}
.blue{
background-color: #008bd8;
top:313px;
}
.orange{
background-color: #fa9500;
top:330px;
}
.grey{
background-color: #434448;
top:279px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<div id="border">
<div class='top-bar'></div>
<div id="img">
<img class='faceimg1' src="" alt="img" width="300" >
<img class='faceimg2' src="" alt="img" width="300" >
<img class='faceimg3' src="" alt="img" width="300" >
</div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500'},
2:{color:'#008bd8'},
3:{color:'#75b00a'},
4:{color:'#434448'}
};
var rand = 1;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:1, repeatDelay:5});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!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();
}
</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;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#img img {
position: absolute;
}
.faceimg2 {
opacity: 0;
}
.faceimg3 {
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:250px;
background:white;
z-index: 10;
}
#copy img {
width:250px;
position: absolute;
left:5px;
top:10px;
padding:15px;
}
.img2 {
opacity: 0;
}
#copy img.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:62px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:296px;
}
.blue{
background-color: #008bd8;
top:313px;
}
.orange{
background-color: #fa9500;
top:330px;
}
.grey{
background-color: #434448;
top:279px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<div id="border">
<div class='top-bar'></div>
<div id="img">
<img class='faceimg1' src="" alt="img" width="300" >
<img class='faceimg2' src="" alt="img" width="300" >
<img class='faceimg3' src="" alt="img" width="300" >
</div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500'},
2:{color:'#008bd8'},
3:{color:'#75b00a'},
4:{color:'#434448'}
};
var rand = 2;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:1, repeatDelay:5});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!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();
}
</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;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#img img {
position: absolute;
}
.faceimg2 {
opacity: 0;
}
.faceimg3 {
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:250px;
background:white;
z-index: 10;
}
#copy img {
width:250px;
position: absolute;
left:5px;
top:10px;
padding:15px;
}
#copy img.img2 {
opacity: 0;
}
#copy img.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:62px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:296px;
}
.blue{
background-color: #008bd8;
top:313px;
}
.orange{
background-color: #fa9500;
top:330px;
}
.grey{
background-color: #434448;
top:279px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<div id="border">
<div class='top-bar'></div>
<div id="img">
<img class='faceimg1' src="" alt="img" width="300" >
<img class='faceimg2' src="" alt="img" width="300" >
<img class='faceimg3' src="" alt="img" width="300" >
</div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500'},
2:{color:'#008bd8'},
3:{color:'#75b00a'},
4:{color:'#434448'}
};
var rand = 3;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:1, repeatDelay:5});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!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();
}
</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;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#img {
position: absolute;
opacity: 0;
}
#img img {
position: absolute;
}
.faceimg2 {
opacity: 0;
}
.faceimg3 {
opacity: 0;
}
#copy {
position: absolute;
bottom:0;
width:100%;
height:250px;
background:white;
z-index: 10;
}
#copy img {
width:250px;
position: absolute;
left:5px;
top:10px;
padding:15px;
}
.img2 {
opacity: 0;
}
#copy img.img3 {
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
bottom:10px;
right:10px;
}
#logo img{
width:auto;
height:62px;
}
.bar {
position: absolute;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:296px;
}
.blue{
background-color: #008bd8;
top:313px;
}
.orange{
background-color: #fa9500;
top:330px;
}
.grey{
background-color: #434448;
top:279px;
}
.top-bar {
height:14px;
width: 100%;
position:absolute;
top:0;
z-index: 12;
}
</style>
</head>
<body>
<div id="border">
<div class='top-bar'></div>
<div id="img">
<img class='faceimg1' src="" alt="img" width="300" >
<img class='faceimg2' src="" alt="img" width="300" >
<img class='faceimg3' src="" alt="img" width="300" >
</div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo">
<img src="assets/logo@2x.png" alt="The Commonwell Logo">
</div>
<div id="copy">
<img class='img1' src="" alt="" >
<img class='img2' src="" alt="" >
<img class='img3' src="" alt="" >
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var flavour = {
1:{color:'#fa9500'},
2:{color:'#008bd8'},
3:{color:'#75b00a'},
4:{color:'#434448'}
};
var rand = 4;
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img .faceimg1').setAttribute('src', "assets/"+rand+"-1.jpg");
document.querySelector('#img .faceimg2').setAttribute('src', "assets/"+rand+"-2.jpg");
document.querySelector('#img .faceimg3').setAttribute('src', "assets/"+rand+"-3.jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "assets/"+rand+"-1.png");
document.querySelector('#copy .img2').setAttribute('src', "assets/"+rand+"-2.png");
document.querySelector('#copy .img3').setAttribute('src', "assets/"+rand+"-3.png");
var tl = new TimelineMax({repeat:1, repeatDelay:5});
tl.to("#img",10.0,{top:flavour[rand].end});
tl.to([".img1",".faceimg1"],0,{opacity:0},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:1},"-=6.5");
tl.to([".img2",".faceimg2"],0.5,{opacity:0},"-=2.5");
tl.to([".img3",".faceimg3"],0.5,{opacity:1},"-=2.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #929497;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 22px;
left: 40px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#copy1 {
top:35px;
z-index: 1;
}
#copy2 {
left:70px;
}
#copy3 {
top:35px;
z-index: 5;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
z-index: 3;
height:100%;
background:white;
}
#logo img{
width: 145px;
height: auto;
margin-top: 20px;
margin-left: 25px;
}
.bar {
position: absolute;
height: 19px;
width: 37px;
left: 490px;
overflow:hidden;
z-index: 2;
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
#bar0.bar {
width:485px;
background-color: #F7A800;
height:100%;
z-index: 1;
left:0;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="bar0" class="bar">
<div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
</div>
<div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 0;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
tl.to("#bar0", 1, {width:0, delay:-1 });
tl.to("#copy1", 0, {opacity:0, delay:0 });
tl.to("#copy2", 0, {opacity:1, delay:0 });
leftPos = 490;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
tl.to("#bar0", 1, {width:485, delay:-1 });
tl.to("#copy2", 0, {opacity:0, delay:0 });
tl.to("#copy3", 0, {opacity:1, delay:0 });
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #929497;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 22px;
left: 40px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#copy1 {
z-index: 1;
}
#copy2 {
left:70px;
}
#copy3 {
top:35px;
z-index: 5;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
z-index: 3;
height:100%;
background:white;
}
#logo img{
width: 145px;
height: auto;
margin-top: 20px;
margin-left: 25px;
}
.bar {
position: absolute;
height: 19px;
width: 37px;
left: 490px;
overflow:hidden;
z-index: 2;
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
#bar0.bar {
width:485px;
background-color: #009BDE;
height:100%;
z-index: 1;
left:0;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="bar0" class="bar">
<div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
</div>
<div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 0;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
tl.to("#bar0", 1, {width:0, delay:-1 });
tl.to("#copy1", 0, {opacity:0, delay:0 });
tl.to("#copy2", 0, {opacity:1, delay:0 });
leftPos = 490;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
tl.to("#bar0", 1, {width:485, delay:-1 });
tl.to("#copy2", 0, {opacity:0, delay:0 });
tl.to("#copy3", 0, {opacity:1, delay:0 });
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #929497;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 22px;
left: 40px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#copy1 {
z-index: 1;
}
#copy2 {
left:70px;
}
#copy3 {
top:35px;
z-index: 5;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
z-index: 3;
height:100%;
background:white;
}
#logo img{
width: 145px;
height: auto;
margin-top: 20px;
margin-left: 25px;
}
.bar {
position: absolute;
height: 19px;
width: 37px;
left: 490px;
overflow:hidden;
z-index: 2;
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
#bar0.bar {
width:485px;
background-color: #77BC1F;
height:100%;
z-index: 1;
left:0;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="bar0" class="bar">
<div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
</div>
<div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 0;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
tl.to("#bar0", 1, {width:0, delay:-1 });
tl.to("#copy1", 0, {opacity:0, delay:0 });
tl.to("#copy2", 0, {opacity:1, delay:0 });
leftPos = 490;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
tl.to("#bar0", 1, {width:485, delay:-1 });
tl.to("#copy2", 0, {opacity:0, delay:0 });
tl.to("#copy3", 0, {opacity:1, delay:0 });
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<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();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
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;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #929497;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 22px;
left: 40px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#copy1 {
z-index: 1;
}
#copy2 {
left:70px;
}
#copy3 {
top:35px;
z-index: 5;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
z-index: 3;
height:100%;
background:white;
}
#logo img{
width: 145px;
height: auto;
margin-top: 20px;
margin-left: 25px;
}
.bar {
position: absolute;
height: 19px;
width: 37px;
left: 490px;
overflow:hidden;
z-index: 2;
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
#bar0.bar {
width:485px;
background-color: #55565A;
height:100%;
z-index: 1;
left:0;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="bar0" class="bar">
<div id="copy1"><img src="assets/1.png" alt="copy1@2x" width="378"></div>
</div>
<div id="copy2"><img src="assets/2.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/3.png" alt="copy3@2x" width="378"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 0;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:5 });
tl.to("#bar0", 1, {width:0, delay:-1 });
tl.to("#copy1", 0, {opacity:0, delay:0 });
tl.to("#copy2", 0, {opacity:1, delay:0 });
leftPos = 490;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
tl.to("#bar0", 1, {width:485, delay:-1 });
tl.to("#copy2", 0, {opacity:0, delay:0 });
tl.to("#copy3", 0, {opacity:1, delay:0 });
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5 Online Ads</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3> -->
<iframe id='' class="b300x250 " scrolling="no" src="300x250-1/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-2/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-3/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-4/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-1/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-2/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-3/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-4/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-1/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-2/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-3/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-4/index.html"></iframe>
</body>
</html>
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; */
border: 0px fuchsia 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;
}