Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
75ca5bfa by Dan Rempel
Options

Bruce Port Elgin for review

1 parent df27472d
Inline Side-by-side
Showing 20 changed files with 351 additions and 0 deletions
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://businesstobruce.com/portelgin";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
/* Custom per ad */
body{
width: 300px;
height: 250px;
}
#txt1{
top:90px;
left: 20px;
}
#txt2{
top:145px;
left: 305px;
}
#dark{
opacity:.6;
}
</style>
</head>
<body>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var img1 = new Image();
img1.onload = function() {
// the image is ready
// calculate img1 size and move it from bottom left to top right
var img1 = document.getElementById("img1");
var startX = 0;
var startY = - img1.height+250;
var endX = - img1.width+300;
var endY = 0;
var tl = new TimelineMax({repeat:2});
tl.set(img1, { css: { top: startY,} });
tl.to("#check", 0.6, {left:-305, ease:Power1.easeInOut, delay:.5 });
tl.to("#txt1", 0.6, {left:-305, ease:Power1.easeInOut, delay:3.3 });
tl.to(img1, 0.6, {left:endX, top:endY, ease:Power1.easeInOut, delay:-.6 });
tl.to("#txt2", 0.6, {left:20, ease:Power1.easeInOut, delay:-.6 });
tl.to("#txt2", 0.6, {left:-305, ease:Power1.easeInOut, delay:3.3 });
tl.to(img1, 0.6, {left:-305, opacity:0, ease:Power1.easeInOut, delay:-.6 });
tl.to(dark, 0.6, {left:-305, opacity:0, ease:Power1.easeInOut, delay:-.6 });
tl.to("#triangle", 0.6, {left:-305, ease:Power1.easeInOut, delay:-.6 });
tl.to("#triangle", 0.6, {left:-305, ease:Power1.easeInOut, delay:4 });
/* console.log("time:" + tl.duration()); */
};
img1.onerror = function() {
// the image has failed
};
img1.src = "assets/img1.jpg";
</script>
<div id="border">
<img src="assets/img2@2x.png" alt="img2@2x" width="300">
<img id="img1" src="assets/img1.jpg" alt="img1" width="649" height="253">
<img id="dark" src="assets/darken.png">
<img id="txt1" src="assets/txt1@2x.png" alt="txt1@2x" width="180">
<img id="txt2" src="assets/txt2@2x.png" alt="txt2@2x" width="182">
<img id="triangle" src="assets/triangle@2x.png" alt="triangle@2x" width="90">
<img id="check" src="assets/check@2x.png" alt="check@2x" width="300">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
</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 = "https://businesstobruce.com/portelgin";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
/* Custom per ad */
body{
width: 728px;
height: 90px;
}
.txt{
top:20px;
left: 140px;
}
#txt2{
top:20px;
left: 730px;
}
</style>
</head>
<body>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var img1 = new Image();
img1.onload = function() {
// the image is ready
// calculate img1 size and move it from bottom left to top right
var img1 = document.getElementById("img1");
var startX = 0;
var startY = - img1.height+90;
var endX = - img1.width+728;
var endY = 0;
var tl = new TimelineMax({repeat:2});
tl.set(img1, { css: { top: startY,} });
tl.to("#check", 0.6, {left:-730, ease:Power1.easeInOut, delay:.5 });
tl.to("#txt1", 0.6, {left:-730, ease:Power1.easeInOut, delay:3.3 });
tl.to(img1, 0.6, {left:endX, top:endY, ease:Power1.easeInOut, delay:-.6 });
tl.to("#txt2", 0.6, {left:140, ease:Power1.easeInOut, delay:-.6 });
tl.to("#txt2", 0.6, {left:-730, ease:Power1.easeInOut, delay:3.3 });
tl.to(img1, 0.6, {left:-730, opacity:0, ease:Power1.easeInOut, delay:-.6 });
tl.to("#triangle", 0.6, {left:-730, ease:Power1.easeInOut, delay:-.6 });
tl.to("#triangle", 0.6, {left:-730, ease:Power1.easeInOut, delay:4 });
/* console.log("time:" + tl.duration()); */
};
img1.onerror = function() {
// the image has failed
};
img1.src = "assets/img1.jpg";
</script>
<div id="border">
<img src="assets/img2@2x.png" alt="img2@2x" width="728">
<img id="img1" src="assets/img1.jpg">
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="386">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="315">
<img id="triangle" src="assets/triangle.png" alt="triangle" height="90">
<img id="check" src="assets/check@2x.png" alt="check@2x" width="728">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
</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">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3> -->
<h3>Port Elgin</h3>
<iframe id='' class="b728x90 float" scrolling="no" src="728x90_PortElgin/index.html"></iframe>
<div style="width:700px">
<iframe id='' class="b300x250 float" scrolling="no" src="300x250_PortElgin/index.html"></iframe>
</div>
<!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Wiarton/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;
}
.float {
display: inline-flex;
vertical-align: top;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}
js file
\ No newline at end of file