Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
13492ca1 by Jeremy Groot
Options

WPV update

1 parent 4acba81f
Inline Side-by-side
Showing 20 changed files with 119 additions and 150 deletions
......@@ -182,9 +182,6 @@
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
......@@ -197,7 +194,7 @@
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
var tl = new TimelineMax({repeat:1, repeatDelay:5});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
......
<!DOCTYPE html>
<head><script type="text/javascript">
<head>
(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">
......@@ -97,83 +50,88 @@
position: relative;
width: 728px;
height: 90px;
border: 1px solid #929497;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
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 {
.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;
height: 19px;
width: 37px;
left: 490px;
overflow:hidden;
z-index: 2;
width:100%;
top:0;
text-align: center;
}
.grey{
background-color: #54565a;
top:0px;
#copy .txt2 {
position: absolute;
top:10px;
left:60px;
opacity: 0;
}
.green{
background-color: #76bc21;
top:23px;
#copy .txt3 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
.blue{
background-color: #009ade;
top:46px;
#copy .txt4 {
opacity: 0;
position: absolute;
top:10px;
left:60px;
}
.orange{
background-color: #f5a800;
top:69px;
#copy .txt5 {
opacity: 0;
position: absolute;
top:20px;
left:60px;
}
#bar0.bar {
width:485px;
background-color: #009ADE;
height:100%;
z-index: 1;
left:0;
#copy .txt1 {
position: absolute;
top:10px;
left:60px;
opacity: 0;
}
#logo img {
opacity: 0;
position: absolute;
right:20px;
top:20px;
}
.circles {
position: absolute;
bottom:0;
right:0;
}
</style>
</head>
......@@ -183,57 +141,71 @@
<!-- <a href="javascript:eyeBuild.doClick(0)"> -->
<div id="border">
<div id="bar0" class="bar">
<div id="copy1"><img src="./assets/one.png" alt="copy1@2x" width="378"></div>
</div>
<div id="copy2"><img src="./assets/two.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="./assets/three.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.png" alt="The Commonwell Logo"></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="" >
<img class='txt4' src="./assets/txt4.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>
<!-- jQuery-->
<script src="https://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="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: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 });
var tl = new TimelineMax({repeat:1, repeatDelay:5});
leftPos = 490;
tl.to(["#bar1","#bar2","#bar3","#bar4"], 1, {left:leftPos, delay:4 });
tl.to("#bar0", 1, {width:485, delay:-1 });
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#copy2", 0, {opacity:0, delay:0 });
tl.to("#copy3", 0, {opacity:1, delay:0 });
}
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(".txt2",1,{opacity:1}, "-=2.5");
//---------------------
$(document).ready(function(){
stage1();
});
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",0.5,{opacity:0}, "-=1.5");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=1");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
tl.to(".txt4",1,{opacity:1}, "-=1");
tl.to("#logo img",2,{opacity:1}, "-=1");
tl.to(".txt4",0.5,{opacity:0}, "+=3");
tl.to(".txt5",1,{opacity:1});
}
ready(stage1());
......