Skip to content

Tenzing / banners-with-skip

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

updates

1 parent aa7cea9b
Expand all
Inline Side-by-side
Showing 162 changed files with 1878 additions and 0 deletions
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="127.04" height="167.89" viewBox="0 0 127.04 167.89"><defs><clipPath id="bc1617a8-0cdb-4e8d-aa72-35bd6be767a8"><path d="M3.59-40.54l16.73,192a8.2,8.2,0,0,0,8,7.33h70.4a8.21,8.21,0,0,0,8-7.33l16.73-192Z" style="fill:none"/></clipPath><filter id="b4af7d36-cb78-4178-9c1c-4d97d74885e7" x="-13.55" y="-8294.02" width="154.12" height="32766" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-color="#fff" result="bg"/><feBlend in="SourceGraphic" in2="bg"/></filter><mask id="a44489fe-a00b-40b3-b3ba-d1fad00590ce" x="-13.55" y="-8294.02" width="154.12" height="32766" maskUnits="userSpaceOnUse"><g style="filter:url(#b4af7d36-cb78-4178-9c1c-4d97d74885e7)"/></mask><linearGradient id="ed7fa192-aeca-44ca-b305-310dd2e2c84d" x1="-86.48" y1="228.01" x2="-85.48" y2="228.01" gradientTransform="matrix(0, 138.77, 138.77, 0, -31578.29, 11999.16)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#c7c8ca"/><stop offset="1" stop-color="#636466"/><stop offset="1" stop-color="#636466"/></linearGradient><filter id="e08a3495-166e-4446-ba50-f9dd2e9d55d1" x="-13.55" y="-50.84" width="154.12" height="219.9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-color="#fff" result="bg"/><feBlend in="SourceGraphic" in2="bg"/></filter><mask id="e5771459-b933-480c-ac58-fa855745f4e4" x="-13.55" y="-50.84" width="154.12" height="219.9" maskUnits="userSpaceOnUse"><g style="isolation:isolate;filter:url(#e08a3495-166e-4446-ba50-f9dd2e9d55d1)"><g style="clip-path:url(#bc1617a8-0cdb-4e8d-aa72-35bd6be767a8)"><g style="mask:url(#a44489fe-a00b-40b3-b3ba-d1fad00590ce)"><rect x="-40.94" y="-9.19" width="208.89" height="136.6" transform="translate(-0.86 117.28) rotate(-85.05)" style="mix-blend-mode:multiply;fill:url(#ed7fa192-aeca-44ca-b305-310dd2e2c84d)"/></g></g></g></mask><clipPath id="bfef0784-13f2-4ab3-a85c-e4ca106d74e3"><rect x="10.41" y="37.61" width="106.21" height="121.14" style="fill:none"/></clipPath><clipPath id="ac484011-e79b-4c5c-b589-3bfb325fa494"><path d="M10.41,37.79l9.91,113.64a8.2,8.2,0,0,0,8,7.33h70.4a8.21,8.21,0,0,0,8-7.33l9.91-113.82Z" style="fill:none"/></clipPath><linearGradient id="bf8bcd5d-9a8d-45ba-88e7-5c0c51ea8601" x1="-86.48" y1="228.01" x2="-85.48" y2="228.01" gradientTransform="matrix(0, 122.96, 122.96, 0, -27973.58, 10680.32)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#fff"/><stop offset="1" stop-color="#fff"/><stop offset="1" stop-color="#fff"/></linearGradient><clipPath id="ee74116e-dade-4802-8599-1efb1840ce1d"><rect x="14.99" y="48.14" width="97.19" height="92.16" style="fill:none"/></clipPath><clipPath id="a0d93bf6-eb53-44a5-85ff-fbaae662ff3f"><rect x="20.77" y="73.03" width="33.74" height="33.74" style="fill:none"/></clipPath><clipPath id="ada7c0dd-64b8-4b20-b872-1431867acccf"><rect x="33.21" y="100.57" width="38.22" height="38.22" style="fill:none"/></clipPath><clipPath id="b1ff4a62-a336-4cde-b653-8e54b25c85f9"><rect x="72.04" y="107.76" width="29.5" height="29.5" style="fill:none"/></clipPath></defs><title>img-2_1</title><g id="f5ecc5a2-5c63-4a7c-aa0f-6528025dbac3" data-name="Layer 2"><g id="e3562e95-2355-4d80-bff9-8bd61c3e8330" data-name="Layer 1"><g style="mask:url(#e5771459-b933-480c-ac58-fa855745f4e4)"><g style="opacity:0.9499970078468323"><g style="clip-path:url(#bfef0784-13f2-4ab3-a85c-e4ca106d74e3)"><g style="clip-path:url(#ac484011-e79b-4c5c-b589-3bfb325fa494)"><rect x="-1.41" y="40.05" width="129.86" height="116.27" transform="translate(-39.78 152.99) rotate(-85.05)" style="fill:url(#bf8bcd5d-9a8d-45ba-88e7-5c0c51ea8601)"/></g></g></g></g><g style="opacity:0.8000029921531677"><g style="clip-path:url(#ee74116e-dade-4802-8599-1efb1840ce1d)"><path d="M99.07,140.3H27.67a4.87,4.87,0,0,1-4.85-4.45L15,48.14h97.19l-8.25,87.73a4.87,4.87,0,0,1-4.86,4.43" style="fill:red"/></g></g><path d="M45.12,136.12a1.46,1.46,0,0,0,1.76,1.1l4.3-1a1.48,1.48,0,0,0,1.11-1.76L21.91,1.14A1.46,1.46,0,0,0,20.15,0l-4.3,1a1.48,1.48,0,0,0-1.11,1.76Z" style="fill:#343f3d"/><g style="opacity:0.35000601410865784"><g style="clip-path:url(#a0d93bf6-eb53-44a5-85ff-fbaae662ff3f)"><rect x="22.92" y="75.19" width="29.43" height="29.43" rx="2.94" transform="translate(-17.54 9.57) rotate(-11.77)" style="fill:#fff"/></g></g><g style="opacity:0.5"><g style="clip-path:url(#ada7c0dd-64b8-4b20-b872-1431867acccf)"><path d="M33.64,117.24a2.94,2.94,0,0,1,1-4L54.76,101a3,3,0,0,1,4,1L71,122.11a3,3,0,0,1-1,4l-20.13,12.2a3,3,0,0,1-4-1Z" style="fill:#fff"/></g></g><g style="opacity:0.35000601410865784"><g style="clip-path:url(#b1ff4a62-a336-4cde-b653-8e54b25c85f9)"><path d="M101.55,134.24a3,3,0,0,1-2.94,2.95l-23.54.07a3,3,0,0,1-3-2.93L72,110.78a3,3,0,0,1,2.94-3l23.54-.07a3,3,0,0,1,3,2.94Z" style="fill:#fff"/></g></g></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="164.46" height="23.99" viewBox="0 0 164.46 23.99"><title>txt-2</title><g id="b3b81476-5b5d-4782-ad8d-bbea2fe86fac" data-name="Layer 2"><g id="aa8c082e-145f-426c-87ee-ffe4c47cdbfc" data-name="Layer 1"><path d="M8.53,0c4.18,0,6.18.58,7.89,2.23a11,11,0,0,1,3,7.43,11,11,0,0,1-3,7.45c-1.71,1.66-3.71,2.24-7.89,2.24H0v-2.7H2.32V2.7H0V0Zm.14,16.65c2.76,0,4.21-.49,5.37-1.89a7.39,7.39,0,0,0,1.57-5.07A7.46,7.46,0,0,0,14,4.58C12.88,3.19,11.43,2.7,8.67,2.7H5.8v14Z" style="fill:#a2d300"/><path d="M25.78,17h2.29v2.32H21V17H23v-7H21V7.75h4.55v2.61c1-2,2.12-2.9,3.54-2.9a2.08,2.08,0,0,1,.93.2l-.38,2.7a1.59,1.59,0,0,0-.35,0c-1.16,0-2.43.87-3.54,2.46Z" style="fill:#a2d300"/><path d="M33.87,14.39c.29,1.71,1.8,2.81,3.83,2.81a3.87,3.87,0,0,0,3.51-1.74l2.24,1.07a7.07,7.07,0,0,1-6.12,3.11c-3.86,0-6.47-2.44-6.47-6A6.23,6.23,0,0,1,42.72,11a8.42,8.42,0,0,1,.67,3.37Zm6.44-2a3.24,3.24,0,0,0-3.22-2.56,3.28,3.28,0,0,0-3.22,2.56Z" style="fill:#a2d300"/><path d="M54.78,11.37H52.67v-.55a4.33,4.33,0,0,0-3-1.22c-1.13,0-1.8.44-1.8,1.13a.88.88,0,0,0,.58.84,6,6,0,0,0,1.51.41l1.25.26c2.87.61,4.12,1.71,4.12,3.71,0,2.21-1.83,3.69-4.56,3.69a5.25,5.25,0,0,1-3.6-1.25v1H45v-4h2.11V16a4.59,4.59,0,0,0,3.46,1.45c1.3,0,2-.43,2-1.25s-.52-1.07-1.86-1.33l-1.45-.32C46.37,14,45.15,13,45.15,11.14c0-2.15,1.77-3.68,4.24-3.68a5,5,0,0,1,3.28,1.13V7.75h2.11Z" style="fill:#a2d300"/><path d="M66.85,11.37H64.73v-.55a4.33,4.33,0,0,0-3-1.22c-1.13,0-1.8.44-1.8,1.13a.9.9,0,0,0,.58.84A6,6,0,0,0,62,12l1.25.26c2.87.61,4.12,1.71,4.12,3.71,0,2.21-1.83,3.69-4.56,3.69a5.21,5.21,0,0,1-3.59-1.25v1H57.1v-4h2.12V16a4.56,4.56,0,0,0,3.45,1.45c1.31,0,2-.43,2-1.25s-.52-1.07-1.86-1.33l-1.45-.32C58.43,14,57.22,13,57.22,11.14,57.22,9,59,7.46,61.45,7.46a5,5,0,0,1,3.28,1.13V7.75h2.12Z" style="fill:#a2d300"/><path d="M80.68,7.75h3.07v2.32H80.68v5.57c0,1.24.29,1.59,1.33,1.59a3.46,3.46,0,0,0,1.74-.52v2.35a4.56,4.56,0,0,1-2.35.58,3.55,3.55,0,0,1-2.84-1.1,4.15,4.15,0,0,1-.7-2.9V10.07H75.92V7.75h1.94V3.89l2.82-1.37Z" style="fill:#a2d300"/><path d="M89.73,0V9a8.8,8.8,0,0,1,4.81-1.56,3.7,3.7,0,0,1,2.76,1c.61.61.78,1.25.78,2.81V17H100v2.32H95.27V11.86c0-1.47-.38-2-1.43-2a7.92,7.92,0,0,0-4.11,1.42V17h1.91v2.32H85V17h1.94V2.32H85V0Z" style="fill:#a2d300"/><path d="M105.82,17h1.92v2.32h-6.68V17h2v-7h-2V7.75h4.76Zm0-12.36h-3.07v-3h3.07Z" style="fill:#a2d300"/><path d="M119,11.37h-2.12v-.55a4.33,4.33,0,0,0-3-1.22c-1.13,0-1.8.44-1.8,1.13a.9.9,0,0,0,.58.84,6,6,0,0,0,1.51.41l1.25.26c2.87.61,4.12,1.71,4.12,3.71,0,2.21-1.83,3.69-4.55,3.69a5.24,5.24,0,0,1-3.6-1.25v1h-2.12v-4h2.12V16a4.56,4.56,0,0,0,3.45,1.45c1.31,0,2-.43,2-1.25s-.52-1.07-1.85-1.33l-1.45-.32c-2.93-.61-4.15-1.59-4.15-3.45,0-2.15,1.77-3.68,4.23-3.68a5,5,0,0,1,3.28,1.13V7.75H119Z" style="fill:#a2d300"/><path d="M138.24,18.07a8.89,8.89,0,0,1-4.81,1.57,3.71,3.71,0,0,1-2.76-1c-.61-.61-.78-1.24-.78-2.81V10.07H128V7.75h4.75v7.48c0,1.48.35,2,1.42,2a7.92,7.92,0,0,0,4.12-1.42V10.07H136.3V7.75h4.76V17H143v2.32h-4.73Z" style="fill:#a2d300"/><path d="M148.89,9.17a5.25,5.25,0,0,1,4-1.71,5.7,5.7,0,0,1,5.83,5.94c0,3.63-2.41,6.24-5.77,6.24A5.23,5.23,0,0,1,149.09,18v3.66H151V24h-6.67V21.67h1.95V10.07h-1.95V7.75h4.56Zm.2,4.35c0,2.26,1.3,3.71,3.33,3.71a3.33,3.33,0,0,0,3.34-3.65,3.35,3.35,0,1,0-6.67-.06" style="fill:#a2d300"/><rect x="161.35" y="16.07" width="3.1" height="3.28" style="fill:#a2d300"/></g></g></svg>
\ 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=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://www.manningcanning.com/";
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: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 250px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 250px;
bottom:-250px;
background:#A2D300;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 250px;
bottom:-138px;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:25px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:8px;
}
.txt-3 {
z-index:3;
position: absolute;
top:200px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
top:108px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:12px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.svg' />
<img class='txt-2' src='assets/txt-2.svg' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
<img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:40});
tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
tl.to(".txt-1-2",0,{opacity:0}, "+=2.25");
tl.to(".txt-1",0,{opacity:0});
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:200}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:70});
tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
}
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=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://www.manningcanning.com/";
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: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 250px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 250px;
bottom:-250px;
background:#FF4C46;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 250px;
bottom:-138px;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:50px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:8px;
}
.txt-3 {
z-index:3;
position: absolute;
top:200px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
top:0px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:7px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
<img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:40});
tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
tl.to(".txt-1-2",0,{opacity:0}, "+=3");
tl.to(".txt-1",0,{opacity:0});
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:200}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:70});
tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
}
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=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://www.manningcanning.com/";
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: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 250px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 250px;
bottom:-250px;
background:#FBDF4F;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 250px;
bottom:-138px;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.txt-1-3 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:8px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:8px;
}
.txt-3 {
z-index:3;
position: absolute;
top:200px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
top:108px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:7px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<img class='txt-1-3' src='assets/txt-1-3.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
<img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:40});
tl.to(".txt-1-2",0.5,{top:115}, "-=0.25");
tl.to(".txt-1-3",0.5,{top:155}, "-=0.25");
tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=5");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:200}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:70});
tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
}
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=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://www.manningcanning.com/";
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: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 250px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 250px;
bottom:-250px;
background:#FF4C46;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 250px;
bottom:-138px;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:-30px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:-30px;
}
.txt-3 {
z-index:3;
position: absolute;
top:200px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
top:108px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:7px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
<img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:40});
tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
tl.to([".txt-1",".txt-1-2"],0,{opacity:0}, "+=3.5");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:200}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:70});
tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
}
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://www.manningcanning.com/";
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: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 600px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 600px;
bottom:-600px;
background:#A2D300;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 224px;
bottom:0;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.txt-1-3 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:150px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:115px;
}
.txt-3 {
z-index:3;
position: absolute;
top:475px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
bottom:180px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:12px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<img class='txt-1-3' src='assets/txt-1-3.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:150});
tl.to(".txt-1-2",0.5,{top:255}, "-=0.25");
tl.to(".txt-1-3",0.5,{top:305}, "-=0.25");
tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=2.25");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:475}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:100});
}
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://www.manningcanning.com/";
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: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 600px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 600px;
bottom:-600px;
background:#FF4C46;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 224px;
bottom:0;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.txt-1-3 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:150px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:115px;
}
.txt-3 {
z-index:3;
position: absolute;
top:455px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
bottom:180px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:12px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<img class='txt-1-3' src='assets/txt-1-3.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:125});
tl.to(".txt-1-2",0.5,{top:235}, "-=0.25");
tl.to(".txt-1-3",0.5,{top:355}, "-=0.25");
tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=3.5");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:455}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:125});
}
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://www.manningcanning.com/";
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: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 600px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 600px;
bottom:-600px;
background:#FDE14F;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 224px;
bottom:0;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.txt-1-3 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:80px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:90px;
}
.txt-3 {
z-index:3;
position: absolute;
top:500px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
bottom:180px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:12px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<img class='txt-1-3' src='assets/txt-1-3.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:80});
tl.to(".txt-1-2",0.5,{top:250}, "-=0.25");
tl.to(".txt-1-3",0.5,{top:370}, "-=0.25");
tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=5");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:500}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:105});
}
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://www.manningcanning.com/";
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: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 600px;
background:#231F20;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.cover {
position: absolute;
width: 300px;
height: 600px;
bottom:-600px;
background:#FF4C46;
z-index: 1;
}
.cover-2 {
position: absolute;
width: 300px;
height: 224px;
bottom:0;
background:#231F20;
z-index: 1;
}
.txt-1 {
position: absolute;
bottom:-100px;
}
.txt-1-2 {
position: absolute;
bottom:-100px;
}
.txt-1-3 {
position: absolute;
bottom:-100px;
}
.img-2 {
position: absolute;
top:80px;
z-index: 2;
}
.txt-2 {
position: absolute;
bottom:-100px;
z-index: 2;
}
.img-3 {
z-index:3;
position: absolute;
top:90px;
}
.txt-3 {
z-index:3;
position: absolute;
top:500px;
}
.img-4-bg {
position: absolute;
top:0;
}
.img-4 {
position: absolute;
bottom:180px;
z-index: 1;
}
.img-4-2 {
position: absolute;
bottom:12px;
z-index: 1;
}
.txt-4 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
.txt-4-2 {
opacity: 0;
position: absolute;
bottom:-100px;
z-index: 1;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<img class='txt-1' src='assets/txt-1.png' />
<img class='txt-1-2' src='assets/txt-1-2.png' />
<div class='cover'></div>
<img class='img-2' style='opacity:0' src='assets/img-2.png' />
<img class='txt-2' src='assets/txt-2.png' />
<img class='img-3' style='opacity:0' src='assets/img-3.png' />
<img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
<img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
<div class='cover-2' style='opacity:0'></div>
<img class='img-4' style='opacity: 0' src='assets/img-4.png' />
<img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
<img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
</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);
}
}
function stage1(){
var tl = new TimelineMax({repeat:3, repeatDelay:7});
tl.to(".txt-1",0.5,{top:150});
tl.to(".txt-1-2",0.5,{top:330}, "-=0.25");
tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=3.5");
tl.to(".img-2",0,{opacity:1,scale:0.75});
tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
tl.to(".txt-2",1,{top:500}, "-=1");
tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
tl.to(".txt-3",0,{opacity:1}, "-=0.1");
tl.to(".img-2",0,{opacity:0});
tl.to(".img-3",0,{opacity:1});
tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
tl.to("#border",0,{background:"rgb(241,242,243)"});
tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
tl.to(".txt-4",0.5,{bottom:105});
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file