Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
20d7f937 by Jeremy Groot
Options

ritz

1 parent f5a1b039
Expand all
Inline Side-by-side
Showing 209 changed files with 1304 additions and 85 deletions
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://westperthvillage.ca";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: 250px;
/* border: 1px solid #55565A; */
background-color: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
position: absolute;
top:25px;
left:30px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:40px;
left:30px;
}
#copy .txt1 {
position: absolute;
top:25px;
left:30px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top: 15px;
width: 100%;
text-align: center;
}
#logo img {
opacity: 0;
}
#img img {
position: absolute;
top:0;
}
.circles {
position: absolute;
bottom:0;
right:20px;
}
#last-frame {
opacity:0;
position: absolute;
top:70px;
text-align: center;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img4 {
position: relative;
top:10px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<img class='txt4' src="./assets/txt4.png" alt="" >
<img class='img4' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".circles",2,{opacity:0}, "-=2");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to("#border",2,{"background-color":"white"}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://westperthvillage.ca";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: 250px;
/* border: 1px solid #55565A; */
background-color: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
.img4 {
opacity: 0;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
position: absolute;
top:25px;
left:50px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:15px;
left:60px;
}
#copy .txt4 {
opacity: 0;
position: absolute;
top:40px;
left:30px;
}
#copy .txt1 {
position: absolute;
top:55px;
left:60px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top: 15px;
width: 100%;
text-align: center;
}
#logo img {
opacity: 0;
}
#img img {
position: absolute;
top:0;
}
.circles {
position: absolute;
bottom:0;
right:20px;
}
#last-frame {
opacity:0;
position: absolute;
top:70px;
text-align: center;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img5 {
position: relative;
top:10px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<img class='txt5' src="./assets/txt5.png" alt="" >
<img class='img5' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
<img class='img4' src="./assets/img4.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
<img class='txt4' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1,{opacity:1}, "-=2.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",2,{opacity:0}, "-=2");
tl.to(".img2",2.5,{opacity:1});
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",2,{opacity:0}, "-=2.5");
// tl.to(".img4",2,{opacity:1}, "-=0.5");
tl.to(".txt4",1,{opacity:1}, "-=2");
tl.to(".circles",2,{opacity:0}, "-=2");
tl.to(".txt4",0.5,{opacity:0}, "-=2");
// tl.to(".img4",0.5,{opacity:0}, "-=2.5");
tl.to("#border",2,{"background-color":"white"}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://westperthvillage.ca";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: 250px;
/* border: 1px solid #55565A; */
background-color: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
position: absolute;
top:10px;
left:50px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:30px;
left:40px;
}
#copy .txt4 {
opacity: 0;
position: absolute;
top:40px;
left:30px;
}
#copy .txt1 {
position: absolute;
top:25px;
left:20px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top: 15px;
width: 100%;
text-align: center;
}
#logo img {
opacity: 0;
}
#img img {
position: absolute;
top:0;
}
.circles {
position: absolute;
bottom:0;
right:20px;
}
#last-frame {
opacity:0;
position: absolute;
top:70px;
text-align: center;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img5 {
position: relative;
top:10px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<img class='txt4' src="./assets/txt4.png" alt="" >
<img class='img5' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1,{opacity:1}, "-=2.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",2,{opacity:0}, "-=2");
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2.5");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",2,{opacity:0}, "-=2.5");
// tl.to(".img4",2,{opacity:1}, "-=0.5");
tl.to(".circles",2,{opacity:0}, "-=2");
// tl.to(".txt4",0.5,{opacity:0}, "-=2");
// tl.to(".img4",0.5,{opacity:0}, "-=2.5");
tl.to("#border",2,{"background-color":"white"}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<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);
}
<meta charset="utf-8">
<title>HTML5 Ad</title>
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=300,height=250">
<script type="text/javascript">
......@@ -22,21 +68,22 @@
clickTag = getParameterByName('clickTag');
</script>
<style>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
width: 250px;
height: 300px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
......@@ -48,114 +95,127 @@
}
#border{
position: absolute;
position: relative;
width: 300px;
height: 250px;
background:#F2F2F2;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
}
a{
text-decoration: none;
color: inherit;
#img {
position: absolute;
opacity: 0;
}
#gray-panel{
#copy {
position: absolute;
bottom:0;
width:100%;
height:100%;
max-height: 100%;
text-align: center;
height:75px;
background:white;
z-index: 10;
}
#blue-panel {
width:100%;
height:250px;
max-height: 100%;
text-align: center;
#copy img {
height:55px;
width:auto;
position: absolute;
background:#0B4D85;
top:-240px;
left:15px;
top:10px;
}
#gold-panel {
width:100%;
height:165px;
max-height: 100%;
text-align: center;
position: absolute;
background:#EDC130;
bottom:-155px;
.img2 {
opacity: 0;
}
.txt1 {
position: absolute;
top:80px;
left:30px;
.img3 {
opacity: 0;
}
.txt2 {
#logo{
position: absolute;
bottom:0;
bottom: 15px;
left: 50px;
z-index: 11;
bottom:10px;
right:10px;
}
.txt3 {
opacity: 0;
#logo img{
width:auto;
height:40px;
}
.bar {
position: absolute;
left: 50px;
top: 5px;
width: 26px;
height: 14px;
z-index: 2;
}
.green{
background-color: #75b00a;
top:120px;
}
.img1 {
position: absolute;
left: 70px;
top: 11px;
height: 160px;
.blue{
background-color: #008bd8;
top:136px;
}
.img2 {
opacity: 0;
position: absolute;
left: 55px;
top: 20px;
height: 45px;
.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>
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<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='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
<div id="logo">
<img src="./assets/logo.png" alt="The Commonwell Logo">
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
<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> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
......@@ -167,28 +227,30 @@
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{top:-160}, "+=4");
tl.to("#gold-panel",2,{bottom:-5}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to("#blue-panel",2,{top:0});
tl.to("#gold-panel",2,{bottom:-80}, "-=2");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img2",1,{opacity:1}, "-=1");
var flavour = {
2:{color:'#008bd8',start:"-35px",end:"-115px"},
};
document.querySelector('.top-bar').style.background = flavour[rand].color;
document.querySelector('#img img').setAttribute('src', "./assets/head.jpg");
document.querySelector('#img').style.top = flavour[rand].start;
document.querySelector('#img').style.opacity = 1;
document.querySelector('#copy .img1').setAttribute('src', "./assets/one.png");
document.querySelector('#copy .img2').setAttribute('src', "./assets/two.png");
document.querySelector('#copy .img3').setAttribute('src', "./assets/three.png");
var tl = new TimelineMax({repeat:0, repeatDelay:3});
tl.to("#img",15.0,{top:flavour[rand].end});
tl.to(".img1",0,{opacity:0},"-=9.5");
tl.to(".img2",0.5,{opacity:1},"-=9.5");
tl.to(".img2",0.5,{opacity:0},"-=3.5");
tl.to(".img3",0.5,{opacity:1},"-=3.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
......
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=600">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://westperthvillage.ca";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
position: absolute;
top:45px;
left:40px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:125px;
left:40px;
}
#copy .txt1 {
position: absolute;
top:45px;
left:40px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top:45px;
left:45px;
}
#logo img {
opacity: 0;
}
#img img {
position: absolute;
top:0;
}
.circles {
position: absolute;
bottom:0;
right:20px;
}
#last-frame {
opacity:0;
position: absolute;
top:145px;
left:15px;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img4 {
position: relative;
left:20px;
top:50px;
}
.txt4 {
padding:30px 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<hr />
<img class='txt4' src="./assets/txt4.png" alt="" >
<hr />
<img class='img4' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to("#border",2,{"background-color":"white"}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=600">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://westperthvillage.ca";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
position: absolute;
top:65px;
left:50px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:125px;
left:40px;
}
#copy .txt1 {
position: absolute;
top:45px;
left:50px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top:45px;
left:45px;
}
#logo img {
opacity: 0;
}
#img img {
position: absolute;
top:0;
}
.circles {
position: absolute;
bottom:0;
right:20px;
}
#last-frame {
opacity:0;
position: absolute;
top:145px;
left:15px;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img4 {
position: relative;
left:20px;
top:50px;
}
.txt4 {
padding:30px 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<hr />
<img class='txt4' src="./assets/txt4.png" alt="" >
<hr />
<img class='img4' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2,{opacity:0}, "+=1");
tl.to(".txt1",2,{opacity:0}, "-=2");
tl.to(".img2",2,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to("#border",2,{"background-color":"white"}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.