Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
4b89a244 by Jeremy Groot
Options

wpv updates

1 parent 13492ca1
Expand all
Inline Side-by-side
Showing 64 changed files with 229 additions and 150 deletions
......@@ -3,7 +3,7 @@
<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
......@@ -162,9 +162,9 @@
</div>
<div id="img">
<img class='img1' src="./assets/img_1@2x.png" alt="img" width="300" >
<img class='img2' src="./assets/img_2@2x.png" alt="img" width="300" >
<img class='img3' src="./assets/img_3@2x.png" alt="img" width="300" >
<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">
......@@ -194,23 +194,23 @@
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
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}, "-=0.5");
tl.to(".img2",2.5,{opacity:1}, "-=0.5");
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",0.5,{opacity:0}, "-=1.5");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=1");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
......
......@@ -180,20 +180,20 @@
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
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}, "-=0.5");
tl.to(".img2",2.5,{opacity:1}, "-=0.5");
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",0.5,{opacity:0}, "-=1.5");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=1");
tl.to(".txt3",1,{opacity:1}, "-=1.5");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
......
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=970,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: 970px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: 0;
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: absolute;
width: 970px;
height: 250px;
background-color: white;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
.img1 {
opacity: 0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
}
.img5 {
position: absolute;
bottom: 40px;
left: 80px;
}
.txt1 {
opacity: 0;
}
.txt2 {
opacity: 0;
}
.txt3 {
opacity: 0;
}
.txt4 {
opacity: 0;
position: absolute;
top: 30px;
left: 80px;
}
#img img {
position: absolute;
top:0;
left:0;
width:100%;
}
#copy img {
position: absolute;
top:50px;
left:80px;
}
#logo img {
opacity: 0;
position: absolute;
right:50px;
bottom:40px;
}
#last-frame {
opacity: 0;
}
.circles {
position: absolute;
right:0;
bottom:0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<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>
<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: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(".circles",2,{opacity:0}, "-=2");
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("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
tl.to(".txt4",1,{opacity:1}, "-=2.5");
}
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=970,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: 970px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: 0;
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: absolute;
width: 970px;
height: 250px;
border: 1px solid black;
background-color: black;/* #0077a0 */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
#img{
position: absolute;
}
.txt{
position: absolute;
left:65px;
top:58px;
}
#txt1 {
opacity: 0;
}
#txt2 {
left:975px;/* 314px */
top:96px;
}
#txt3 {
top:255px;/* 59px */
}
#txt4 {
top:275px;/* 100px */
}
#logo{
position: absolute;
right: 68px;/* 68px */
top:125px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="img" class="img"><img src="assets/img.jpg" alt="img" width="970"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="488">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="488">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="517">
<img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="517">
<img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="270">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2, repeatDelay:0});
var d=10;
tl.to("#img", d, {top:-52 , ease:Linear.easeNone});// , ease:Linear.easeNone
d=d*-1;
tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
tl.to("#txt2", .5, {left:314, ease:Power1.easeOut, delay:d+=1});
tl.to("#txt1", .5, {top:-100, ease:Power1.easeIn, delay:d+=2.4});
tl.to("#txt2", .5, {top:-80, ease:Power1.easeIn, delay:d});
tl.to("#txt3", .5, {top:59, ease:Power1.easeOut, delay:d+=.3});
tl.to("#txt4", .5, {top:100, ease:Power1.easeOut, delay:d+=.2});
console.log( "time: " + tl.totalDuration() );
</script>
</body>
</html>
\ No newline at end of file
......@@ -12,14 +12,26 @@
<body>
<h3><a href="index.html">WPV Spring Digital Media Ads</a></h3>
<!-- DEPLOY! -->
<iframe id='' class="b300x250 " scrolling="no" src="300x250/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
<h1>Balanced</h1>
<iframe id='' class="b728x90 " scrolling="no" src="728x90/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-balanced/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="970x250/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-balanced/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-balanced/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-balanced/index.html"></iframe>
<h1>Positive</h1>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-positive/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-positive/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-positive/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-positive/index.html"></iframe>
</body>
......