Skip to content

Tenzing / banners-with-skip

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

missed ads

1 parent 5e11a664
Inline Side-by-side
Showing 19 changed files with 419 additions and 0 deletions
<!DOCTYPE html>
<head>
<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://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: 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;
background-color: rgba(234,243,140);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
position: absolute;
top:0;
opacity:0;
width:100%;
}
.img2 {
position: absolute;
top:0;
opacity: 0;
width:100%;
}
.img3 {
position: absolute;
top:0;
opacity: 0;
width:100%;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
}
#copy .txt2 {
position: absolute;
top:20px;
left:60px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
#copy .txt4 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
#copy .txt5 {
opacity: 0;
position: absolute;
top:25px;
left:60px;
}
#copy .txt1 {
position: absolute;
top:20px;
left:60px;
opacity: 0;
}
#logo img {
opacity: 0;
position: absolute;
right:40px;
top:20px;
}
.circles {
position: absolute;
bottom:0;
right: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="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="" >
<img class='txt5' src="./assets/donate_btn.png" alt="" >
</div>
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<img class='circles' src="./assets/circles.png" alt="" >
</div>
</a>
<!-- GREENSOCK-->
<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:-1, repeatDelay:7});
tl.to(".img1",1.0,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1");
tl.to(".img1",1,{opacity:0}, "+=2");
tl.to(".txt1",1,{opacity:0}, "-=1");
tl.to(".img2",1,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=1");
tl.to(".img2",1,{opacity:0}, "+=2");
tl.to(".txt2",1,{opacity:0}, "-=1");
tl.to(".circles",1,{opacity:0}, "-=1");
tl.to("#border",1,{"background-color":"rgb(255,255,255)"}, "-=1");
tl.to(".txt3",1,{opacity:1});
tl.to("#logo img",1,{opacity:1}, "-=1");
tl.to(".txt3",1,{opacity:0}, "+=2");
tl.to(".txt5",1,{opacity:1}, "-=1");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<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://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: 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;
background-color: rgba(209,219,47, .4);
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
position: absolute;
top:0;
opacity:0;
width:100%;
}
.img2 {
position: absolute;
top:0;
opacity: 0;
width:100%;
}
.img3 {
position: absolute;
top:0;
opacity: 0;
width:100%;
}
#copy {
position: absolute;
width:100%;
top:0;
text-align: center;
}
#copy .txt2 {
position: absolute;
top:20px;
left:60px;
opacity: 0;
}
#copy .txt3 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
#copy .txt4 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
#copy .txt5 {
opacity: 0;
position: absolute;
top:25px;
left:60px;
}
#copy .txt1 {
position: absolute;
top:20px;
left:60px;
opacity: 0;
}
#logo img {
opacity: 0;
position: absolute;
right:40px;
top:20px;
}
.circles {
position: absolute;
bottom:0;
right: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="img">
<img class='img1' src="./assets/img1.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="" >
<img class='txt5' src="./assets/donate_btn.png" alt="" >
</div>
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<img class='circles' src="./assets/circles.png" alt="" >
</div>
</a>
<!-- GREENSOCK-->
<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:-1, repeatDelay:7});
tl.to(".img1",1.0,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1");
tl.to(".txt1",1,{opacity:0}, "+=2");
tl.to(".img2",1,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=1");
tl.to(".img1",1,{opacity:0}, "+=2");
tl.to(".txt2",1,{opacity:0}, "-=1");
tl.to(".circles",1,{opacity:0}, "-=1");
tl.to("#border",1,{"background-color":"rgb(255,255,255)"}, "-=1");
tl.to(".txt3",1,{opacity:1});
tl.to("#logo img",1,{opacity:1}, "-=1");
tl.to(".txt3",1,{opacity:0}, "+=2");
tl.to(".txt5",1,{opacity:1}, "-=1");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file