Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
de3ba32f by Dan Rempel
Options

Wufers release 3 with $1 per day and cute party dog

1 parent e6a7779c
Expand all
Inline Side-by-side
Showing 14 changed files with 586 additions and 1 deletions
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 132.1 32.5" style="enable-background:new 0 0 132.1 32.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF7049;}
.st1{fill:#FFFFFF;}
</style>
<rect class="st0" width="132.2" height="32.5"/>
<title>subscribe</title>
<g>
<path class="st1" d="M24,16.2c0.2,0.3,0.4,0.7,0.4,1.2c0,0.7-0.2,1.2-0.7,1.6c-0.4,0.4-1.1,0.5-1.9,0.5h-2.8c-0.1,0-0.3,0-0.3-0.1
c-0.1-0.1-0.1-0.2-0.1-0.3v-6.9c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h2.7c0.8,0,1.4,0.2,1.9,0.5c0.4,0.4,0.7,0.9,0.7,1.5
c0,0.4-0.1,0.8-0.3,1.1c-0.2,0.3-0.5,0.5-0.9,0.7C23.5,15.7,23.8,15.9,24,16.2z M19.5,15.3h2.1c0.6,0,1-0.1,1.3-0.4s0.4-0.6,0.4-1
c0-0.9-0.6-1.3-1.8-1.3h-2.1V15.3z M23.1,18.5c0.3-0.2,0.4-0.6,0.4-1c0-1-0.6-1.4-1.8-1.4h-2.3v2.8h2.3
C22.4,18.8,22.8,18.7,23.1,18.5z"/>
<path class="st1" d="M32.4,19.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.4-0.2l-1.5-2.3
c-0.2-0.3-0.4-0.5-0.6-0.6c-0.2-0.1-0.5-0.2-0.8-0.2h-1.4v2.9c0,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1
c-0.1-0.1-0.1-0.2-0.1-0.3v-6.9c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h2.7c0.8,0,1.5,0.2,1.9,0.6c0.4,0.4,0.7,0.9,0.7,1.7
c0,0.6-0.2,1.1-0.5,1.5c-0.4,0.4-0.9,0.6-1.5,0.7c0.2,0.1,0.3,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.4,0.5l1.3,2
C32.4,19.1,32.4,19.2,32.4,19.3z M29.5,15.5c0.6,0,1.1-0.1,1.3-0.4c0.3-0.2,0.4-0.6,0.4-1.1c0-0.5-0.1-0.9-0.4-1.1
c-0.3-0.2-0.7-0.4-1.4-0.4h-2.2v3H29.5z"/>
<path class="st1" d="M35.6,19.2c-0.5-0.3-0.9-0.8-1.2-1.4c-0.3-0.6-0.4-1.3-0.4-2.1c0-0.8,0.1-1.5,0.4-2.1c0.3-0.6,0.7-1.1,1.2-1.4
c0.5-0.3,1.2-0.5,1.9-0.5s1.4,0.2,1.9,0.5c0.5,0.3,0.9,0.8,1.2,1.4s0.4,1.3,0.4,2.1s-0.1,1.5-0.4,2.1c-0.3,0.6-0.7,1.1-1.2,1.4
c-0.5,0.3-1.2,0.5-1.9,0.5C36.7,19.7,36.1,19.5,35.6,19.2z M39.4,18c0.5-0.6,0.7-1.3,0.7-2.4s-0.2-1.8-0.7-2.4s-1.1-0.8-1.9-0.8
c-0.8,0-1.5,0.3-1.9,0.8c-0.5,0.6-0.7,1.3-0.7,2.4s0.2,1.8,0.7,2.4c0.5,0.6,1.1,0.8,1.9,0.8C38.3,18.9,38.9,18.6,39.4,18z"/>
<path class="st1" d="M52.7,11.8c0.1,0,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.1,0,0.2l-2.5,7
c0,0.1-0.1,0.2-0.2,0.2c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.2-0.1-0.2-0.2l-2.2-6.1l-2.2,6.1
c0,0.1-0.1,0.2-0.2,0.2c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1s-0.2-0.1-0.2-0.2l-2.5-7c0-0.1,0-0.1,0-0.2
c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.2l2.2,6.2l2.2-6.2c0-0.1,0.1-0.2,0.2-0.2
c0.1-0.1,0.2-0.1,0.3-0.1s0.2,0,0.3,0.1s0.1,0.1,0.2,0.3l2.2,6.2l2.2-6.3C52.6,11.9,52.6,11.9,52.7,11.8z"/>
<path class="st1" d="M55.9,19.4c-0.5-0.2-0.9-0.4-1.2-0.7c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.3,0.1c0.7,0.5,1.5,0.8,2.3,0.8c0.6,0,1.1-0.1,1.5-0.4c0.3-0.2,0.5-0.6,0.5-1c0-0.3-0.1-0.5-0.2-0.6
c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.1-0.6-0.2-1.1-0.3c-0.6-0.1-1.1-0.3-1.5-0.4c-0.4-0.2-0.7-0.4-0.9-0.7c-0.2-0.3-0.4-0.7-0.4-1.1
c0-0.4,0.1-0.8,0.4-1.2s0.6-0.6,1-0.8c0.4-0.2,0.9-0.3,1.5-0.3c0.5,0,1,0.1,1.4,0.2c0.4,0.2,0.8,0.4,1.1,0.7
c0.1,0.1,0.2,0.2,0.2,0.4c0,0.1,0,0.2-0.1,0.3s-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.3-0.1c-0.4-0.3-0.7-0.5-1-0.6
c-0.3-0.1-0.7-0.2-1.1-0.2c-0.6,0-1.1,0.1-1.4,0.4s-0.5,0.6-0.5,1.1c0,0.4,0.1,0.7,0.4,0.9c0.3,0.2,0.8,0.4,1.4,0.5
c0.7,0.2,1.2,0.3,1.6,0.4s0.7,0.3,1,0.6c0.3,0.3,0.4,0.6,0.4,1.1c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.6-1,0.8c-0.4,0.2-0.9,0.3-1.5,0.3
C57,19.7,56.4,19.6,55.9,19.4z"/>
<path class="st1" d="M62.4,19.4c-0.1-0.1-0.1-0.2-0.1-0.3v-6.9c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1h4.1c0.1,0,0.2,0,0.3,0.1
c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1h-3.7v2.7h3.5c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3
c0,0.1,0,0.2-0.1,0.3C66.8,16,66.7,16,66.6,16h-3.5v2.8h3.7c0.1,0,0.2,0,0.3,0.1s0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3
c-0.1,0.1-0.2,0.1-0.3,0.1h-4.1C62.6,19.6,62.4,19.5,62.4,19.4z"/>
<path class="st1" d="M74,19.5c-0.1-0.1-0.1-0.2-0.1-0.3v-6.6h-2.4c-0.1,0-0.2,0-0.3-0.1s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0.1-0.3
c0.1-0.1,0.2-0.1,0.3-0.1h5.6c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3s-0.2,0.1-0.3,0.1h-2.4v6.6
c0,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1C74.2,19.6,74.1,19.6,74,19.5z"/>
<path class="st1" d="M85.1,19.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.4-0.2l-1.5-2.3
c-0.2-0.3-0.4-0.5-0.6-0.6c-0.2-0.1-0.5-0.2-0.8-0.2H80v2.9c0,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1
c-0.1-0.1-0.1-0.2-0.1-0.3v-6.9c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h2.7c0.8,0,1.5,0.2,1.9,0.6c0.4,0.4,0.7,0.9,0.7,1.7
c0,0.6-0.2,1.1-0.5,1.5c-0.4,0.4-0.9,0.6-1.5,0.7c0.2,0.1,0.3,0.2,0.5,0.3s0.3,0.3,0.4,0.5l1.3,2C85.1,19.1,85.1,19.2,85.1,19.3z
M82.2,15.5c0.6,0,1-0.1,1.3-0.4c0.3-0.2,0.4-0.6,0.4-1.1c0-0.5-0.1-0.9-0.4-1.1c-0.3-0.2-0.7-0.4-1.4-0.4H80v3H82.2z"/>
<path class="st1" d="M87.1,19.4C87,19.4,87,19.3,87,19.1v-6.9c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1h4.1
c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1h-3.7v2.7h3.5c0.1,0,0.2,0,0.3,0.1
c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3C91.6,16,91.5,16,91.3,16h-3.5v2.8h3.7c0.1,0,0.2,0,0.3,0.1s0.1,0.2,0.1,0.3
c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1h-4.1C87.3,19.6,87.2,19.5,87.1,19.4z"/>
<path class="st1" d="M100.7,19.2c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.2,0-0.3-0.1-0.4-0.3l-0.8-1.8H95l-0.8,1.8
c-0.1,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.2,0-0.3-0.1s-0.1-0.2-0.1-0.3c0-0.1,0-0.1,0-0.2l3.1-7c0-0.1,0.1-0.2,0.2-0.2
c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.1,0.2,0.2l3.1,7C100.7,19.1,100.7,19.2,100.7,19.2z M95.3,16.8h3.5
L97,12.9L95.3,16.8z"/>
<path class="st1" d="M103.4,19.5c-0.1-0.1-0.1-0.2-0.1-0.3v-6.6h-2.4c-0.1,0-0.2,0-0.3-0.1s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0.1-0.3
c0.1-0.1,0.2-0.1,0.3-0.1h5.6c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3s-0.2,0.1-0.3,0.1h-2.4v6.6
c0,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1C103.6,19.6,103.5,19.6,103.4,19.5z"/>
<path class="st1" d="M109.3,19.4c-0.5-0.2-0.9-0.4-1.2-0.7c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.3,0.1c0.7,0.5,1.5,0.8,2.3,0.8c0.6,0,1.1-0.1,1.5-0.4c0.3-0.2,0.5-0.6,0.5-1c0-0.3-0.1-0.5-0.2-0.6
c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.1-0.6-0.2-1.1-0.3c-0.6-0.1-1.1-0.3-1.5-0.4c-0.4-0.2-0.7-0.4-0.9-0.7c-0.2-0.3-0.4-0.7-0.4-1.1
c0-0.4,0.1-0.8,0.4-1.2s0.6-0.6,1-0.8s0.9-0.3,1.5-0.3c0.5,0,1,0.1,1.4,0.2c0.4,0.2,0.8,0.4,1.1,0.7c0.1,0.1,0.2,0.2,0.2,0.4
c0,0.1,0,0.2-0.1,0.3s-0.1,0.1-0.2,0.1s-0.2,0-0.3-0.1c-0.4-0.3-0.7-0.5-1-0.6c-0.3-0.1-0.7-0.2-1.1-0.2c-0.6,0-1.1,0.1-1.4,0.4
c-0.3,0.3-0.5,0.6-0.5,1.1c0,0.4,0.1,0.7,0.4,0.9s0.8,0.4,1.4,0.5c0.7,0.2,1.2,0.3,1.6,0.4c0.4,0.1,0.7,0.3,1,0.6
c0.3,0.3,0.4,0.6,0.4,1.1c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.6-1,0.8c-0.4,0.2-0.9,0.3-1.5,0.3C110.3,19.7,109.8,19.6,109.3,19.4z"/>
</g>
</svg>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://boscoandroxys.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>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #323e48;
/* background-color: #FFFFFF; */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
/* Custom per ad */
body{
width: 300px;
height: 250px;
background: url(assets/300x250img.jpg) no-repeat;
/* background: url(backup.jpg) no-repeat; */
}
#border{
border-top: 10px solid #323e48;
background-position: 0 -10px;
}
.box{
left:11px;
top:13px;
opacity: 0;
}
#box-xmas{
opacity: 1;
}
#txt{
left: 167px;
top: 21px;
-ms-transform: scale(.5); /* IE 9 */
-ms-transform-origin: 0% 0%; /* IE 9 */
-webkit-transform: scale(.5); /* Chrome, Safari, Opera */
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
transform: scale(.5);
transform-origin: 0% 0%;
}
#logo{
position: absolute;
left: 8px;
top: 178px;
width:123px; /* 131px */
height:auto;
}
#subscribe{
right: 20px;
bottom: 10px;
width: 126px;
height: auto;
}
</style>
</head>
<body>
<div id="border">
<div id="logo"></div>
<img id="subscribe" src="assets/subscribe.svg" alt="txt"> <!-- width="114" height="33" -->
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
$( document ).ready(function() {
/*
* embed external svg using ajax
*/
eyeBuild.initialize();
var container = $("#logo");
var svgUrl = "assets/logo.svg";
$.get(svgUrl)
.then(injectSvg);
function injectSvg(xmlDoc) {
var svg = $(xmlDoc).find("svg");
container.append(svg);
animate();
}
/*
* animate
*/
function animate(){
// animate the boxes
var tl = new TimelineMax({repeat:2});
var d = 1.25;
var box_arr = ["#box-advent", "#box-winter", "#box-spoileddog", "#box-valentines"];
for (var i = 0 in box_arr) {
tl.to(box_arr[i], 0.6, {opacity:1, ease:Power1.easeInOut, delay:d });
}
for (var i = 0 in box_arr) {
tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
}
/* console.log("boxes: " + tl.totalDuration()); */
// animate the logo
var eye_tl = new TimelineMax({repeat:3});
var winkTime = .3;
// close eye
eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
var crumbTime = 1;
eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
// open eye
eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
/* console.log("eye_right: " + eye_tl.totalDuration()); */
var tongue_tl = new TimelineMax();
var pantDuration = .3;
var pantTongueLength = .9;
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
/* console.log("tongue: " + tongue_tl.totalDuration()); */
};
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://boscoandroxys.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>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #323e48;
/* background-color: #FFFFFF; */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
/* Custom per ad */
body{
width: 300px;
height: 600px;
background: url(assets/300x600img.jpg) no-repeat;
/* background: url(backup.jpg) no-repeat; */
}
#border{
border-top: 10px solid #323e48;
background-position: 0 -10px;
}
.box{
left:11px;
top:13px;
opacity: 0;
}
#box-xmas{
opacity: 1;
}
#txt{
left: 167px;
top: 21px;
-ms-transform: scale(.5); /* IE 9 */
-ms-transform-origin: 0% 0%; /* IE 9 */
-webkit-transform: scale(.5); /* Chrome, Safari, Opera */
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
transform: scale(.5);
transform-origin: 0% 0%;
}
#logo{
position: absolute;
left: 6px;
top: 3px;
width:180px; /* 131px */
height:auto;
}
#subscribe{
right: 20px;
bottom: 10px;
width: 126px;
height: auto;
}
</style>
</head>
<body>
<div id="border">
<div id="logo"></div>
<!-- <img id="subscribe" src="assets/subscribe.svg" alt="txt"> -->
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
$( document ).ready(function() {
/*
* embed external svg using ajax
*/
eyeBuild.initialize();
var container = $("#logo");
var svgUrl = "assets/logo.svg";
$.get(svgUrl)
.then(injectSvg);
function injectSvg(xmlDoc) {
var svg = $(xmlDoc).find("svg");
container.append(svg);
animate();
}
/*
* animate
*/
function animate(){
// animate the boxes
var tl = new TimelineMax({repeat:2});
var d = 1.25;
var box_arr = ["#box-advent", "#box-winter", "#box-spoileddog", "#box-valentines"];
for (var i = 0 in box_arr) {
tl.to(box_arr[i], 0.6, {opacity:1, ease:Power1.easeInOut, delay:d });
}
for (var i = 0 in box_arr) {
tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
}
/* console.log("boxes: " + tl.totalDuration()); */
// animate the logo
var eye_tl = new TimelineMax({repeat:3});
var winkTime = .3;
// close eye
eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
var crumbTime = 1;
eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
// open eye
eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
/* console.log("eye_right: " + eye_tl.totalDuration()); */
var tongue_tl = new TimelineMax();
var pantDuration = .3;
var pantTongueLength = .9;
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
/* console.log("tongue: " + tongue_tl.totalDuration()); */
};
});
</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>
<p>Party</p>
<iframe id='' class="b300x250 float" scrolling="no" src="300x250_party/index.html"></iframe>
<iframe id='' class="b300x600 float" scrolling="no" src="300x600_party/index.html"></iframe>
</body>
</html>
html {
background-color: #d4d4d4;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #8e8e8e;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3em;
margin-left: 10px;
}
a {
color: #8e8e8e;
}
a:hover {
color: #FFFFFF;
}
iframe, img {
margin: 10px;
/* border: 1px #d4d4d4 solid; */
border: 0px fuchsia solid;
overflow: hidden;
iframe::-webkit-scrollbar {
display: none;
};
}
.stacked {
display: flex;
}
.float {
display: inline-flex;
vertical-align: top;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}
......@@ -11,7 +11,7 @@
</head>
<body>
<h3><a href="flight1/index.html">Flight 1</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="flight2/index.html">Flight 2</a></h3>
<h3><a href="flight1/index.html">Flight 1</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="flight2/index.html">Flight 2</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="flight3/index.html">Flight 3</a></h3>
</body>
......