Skip to content

Tenzing / banners-with-skip

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

HHF ads

1 parent b9a629df
Inline Side-by-side
Showing 57 changed files with 2639 additions and 0 deletions
<!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 = "https://huntsvillehospitalfoundation.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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 24px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 20px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When a Lake Vernon double flip lands you in the hospital.<br /><strong>Count On Us.</strong>
</p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://huntsvillehospitalfoundation.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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When a Lake Vernon double flip lands you in the hospital. <strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
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 = "https://huntsvillehospitalfoundation.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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 22px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 20px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>If you catch a Northern pike in Mary Lake
and then the pike catches you.<strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
<!-- <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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://huntsvillehospitalfoundation.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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>If you catch a Northern pike in Mary Lake
and then the pike catches you.<strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
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 = "https://huntsvillehospitalfoundation.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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 24px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 20px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When you learn every axe on Fairy Lake
cuts both ways.<br><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
<!-- <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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When you learn every axe on Fairy Lake
cuts both ways.<strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 24px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 10px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When you're hiking north of Novar and
you have a Burk’s Fall.<br /><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
<!-- <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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When you're hiking north of Novar and
you have a Burk’s Fall.<br /><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 24px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 20px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When tripping in Algonquin and you
tumble into poison ivy.<br><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
<!-- <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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>When tripping in Algonquin and you
tumble into poison ivy.<strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.7;
font-size: 24px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 300px;
height: 600px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 10px;
width: 280px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
text-align: center;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
margin-top: 20px;
font-size: 32px;
display: block;
}
#circles-panel {
position: absolute;
top: 220px;
left: 134px;
}
#circles-panel svg {
height: 153px;
width: 37px;
}
#selfie-panel {
position: absolute;
top: 288px;
left: 84px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 440px;
left: 40px;
opacity: 0;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>If Amalguin's early morning mist hides
that last curve before home.<br><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
<path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
transform="translate(0 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
<circle id="inner" cx="14.33" cy="14.33" r="3.49"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
<line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
<!-- <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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
.st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
</style>
<g id="outer_1_">
<path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
C10.7,15.2,15.2,10.7,20.8,10.7z"/>
</g>
<g id="middle_1_">
<path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
</g>
<g id="inner_1_">
<circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
</g>
<g id="line_1_">
<line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
</g>
</svg>
<!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 = "https://ontarioplanners.ca/planonit";
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>
<link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.7;
font-size: 29px;
letter-spacing: 0;
font-family: 'Libre Caslon Text', serif;
font-style: normal;
background: #F2F2F2;
}
a {
text-decoration: none;
color: inherit;
}
#border {
position: absolute;
width: 970px;
height: 250px;
background: #F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#txt-panel {
position: absolute;
top: 0px;
left: 44px;
width: 530px;
}
#txt-panel p {
opacity: 0;
color: #fff;
font-weight: 200;
}
#txt-panel p strong {
opacity: 0;
font-weight: 700;
}
#circles-panel {
position: absolute;
top: 140px;
left: 344px;
}
#circles-panel svg {
height: 39px;
width: 267px;
}
#selfie-panel {
position: absolute;
top: 90px;
left: 570px;
opacity: 0;
}
#button-panel {
position: absolute;
top: 70px;
left: 720px;
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="txt-panel">
<p>If Amalguin's early morning mist hides
that last curve before home.<br><strong> Count On Us.</strong></p>
</div>
<div id="circles-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
<path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
<circle id="inner" cx="20.79" cy="20.76" r="5.05"
style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
<line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
</svg>
</div>
<div id="selfie-panel">
<img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
</div>
<div id="button-panel">
<img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
</div>
<img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
</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);
}
}
var
pulse2 = document.getElementById("outer"),
pulse1 = document.getElementById("mid"),
tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
tl.fromTo(pulse1, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
)
.fromTo(pulse2, 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
{ transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
)
;
function stage1() {
var line = document.getElementById("line");
var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
tl2.fromTo(line, 3,
{ transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
{ transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
)
tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
tl2.fromTo("#button-panel", 1,
{ transformOrigin: "center center", autoAlpha: 1, scale: 0 },
{ transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
)
}
ready(stage1());
</script>
</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">HHF 2020 Ads</a></h3>
<h1>Group 1</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_1/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_1/970x250/index.html"></iframe>
<h1>Group 2</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_2/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_2/970x250/index.html"></iframe>
<h1>Group 3</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_3/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_3/970x250/index.html"></iframe>
<h1>Group 4</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_4/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_4/970x250/index.html"></iframe>
<h1>Group 5</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_5/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_5/970x250/index.html"></iframe>
<h1>Group 6</h1>
<iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_6/300x600/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_6/970x250/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;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}