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
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <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"
5 viewBox="0 0 132.1 32.5" style="enable-background:new 0 0 132.1 32.5;" xml:space="preserve">
6 <style type="text/css">
7 .st0{fill:#FF7049;}
8 .st1{fill:#FFFFFF;}
9 </style>
10 <rect class="st0" width="132.2" height="32.5"/>
11 <title>subscribe</title>
12 <g>
13 <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
14 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
15 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
16 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
17 C22.4,18.8,22.8,18.7,23.1,18.5z"/>
18 <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
19 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
20 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
21 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
22 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
23 c-0.3-0.2-0.7-0.4-1.4-0.4h-2.2v3H29.5z"/>
24 <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
25 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
26 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
27 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"/>
28 <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
29 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
30 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
31 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
32 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"/>
33 <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
34 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
35 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
36 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
37 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
38 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
39 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
40 C57,19.7,56.4,19.6,55.9,19.4z"/>
41 <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
42 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
43 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
44 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"/>
45 <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
46 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
47 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"/>
48 <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
49 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
50 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
51 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
52 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"/>
53 <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
54 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
55 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
56 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"/>
57 <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
58 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
59 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
60 L97,12.9L95.3,16.8z"/>
61 <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
62 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
63 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"/>
64 <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
65 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
66 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
67 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
68 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
69 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
70 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"/>
71 </g>
72 </svg>
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7
8 <!--
9
10 <script type="text/javascript">
11
12 // IAB source: modified to allow link testing
13
14 var clickTag = "https://boscoandroxys.com";
15 function getParameterByName(name)
16 {
17 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
18 if (match == null || match == ""){
19 return clickTag;
20 } else{
21 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
22 }
23 }
24 clickTag = getParameterByName('clickTag');
25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
29
30
31
32 <style>
33
34 body{
35 margin: 0;
36 padding: 0;
37 }
38 a{
39 text-decoration: none;
40 }
41 #click-tag{
42 display: block;
43 position: absolute;
44 width: 100%;
45 height: 100%;
46 }
47 #border{
48 position: relative;
49 width: 100%;
50 height: 100%;
51 border: 1px solid #323e48;
52 /* background-color: #FFFFFF; */
53 overflow: hidden;
54 cursor: pointer;
55 box-sizing: border-box;
56 }
57 img {
58 position: absolute;
59 }
60
61
62 /* Custom per ad */
63
64 body{
65 width: 300px;
66 height: 250px;
67 background: url(assets/300x250img.jpg) no-repeat;
68 /* background: url(backup.jpg) no-repeat; */
69 }
70
71 #border{
72 border-top: 10px solid #323e48;
73 background-position: 0 -10px;
74
75 }
76 .box{
77 left:11px;
78 top:13px;
79 opacity: 0;
80 }
81 #box-xmas{
82 opacity: 1;
83 }
84 #txt{
85 left: 167px;
86 top: 21px;
87
88 -ms-transform: scale(.5); /* IE 9 */
89 -ms-transform-origin: 0% 0%; /* IE 9 */
90 -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
91 -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
92 transform: scale(.5);
93 transform-origin: 0% 0%;
94 }
95 #logo{
96 position: absolute;
97 left: 8px;
98 top: 178px;
99 width:123px; /* 131px */
100 height:auto;
101
102 }
103 #subscribe{
104
105 right: 20px;
106 bottom: 10px;
107 width: 126px;
108 height: auto;
109
110 }
111
112 </style>
113
114 </head>
115
116 <body>
117 <div id="border">
118
119
120 <div id="logo"></div>
121 <img id="subscribe" src="assets/subscribe.svg" alt="txt"> <!-- width="114" height="33" -->
122
123 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
124 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
125 </div>
126
127 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
128 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
129 <script>
130
131 $( document ).ready(function() {
132
133 /*
134 * embed external svg using ajax
135 */
136
137 eyeBuild.initialize();
138
139 var container = $("#logo");
140 var svgUrl = "assets/logo.svg";
141
142 $.get(svgUrl)
143 .then(injectSvg);
144
145 function injectSvg(xmlDoc) {
146 var svg = $(xmlDoc).find("svg");
147 container.append(svg);
148 animate();
149 }
150
151 /*
152 * animate
153 */
154
155 function animate(){
156
157 // animate the boxes
158
159 var tl = new TimelineMax({repeat:2});
160
161 var d = 1.25;
162 var box_arr = ["#box-advent", "#box-winter", "#box-spoileddog", "#box-valentines"];
163 for (var i = 0 in box_arr) {
164 tl.to(box_arr[i], 0.6, {opacity:1, ease:Power1.easeInOut, delay:d });
165 }
166 for (var i = 0 in box_arr) {
167 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
168 }
169 /* console.log("boxes: " + tl.totalDuration()); */
170
171
172 // animate the logo
173
174 var eye_tl = new TimelineMax({repeat:3});
175
176 var winkTime = .3;
177 // close eye
178 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
179 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
180 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
181 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
182
183 var crumbTime = 1;
184 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
185 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
186 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
187 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
188
189 // open eye
190 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
191 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
192 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
193 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
194
195 /* console.log("eye_right: " + eye_tl.totalDuration()); */
196
197
198 var tongue_tl = new TimelineMax();
199 var pantDuration = .3;
200 var pantTongueLength = .9;
201 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
202 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
203 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
204 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
205 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
206 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
207 /* console.log("tongue: " + tongue_tl.totalDuration()); */
208 };
209 });
210
211
212 </script>
213
214
215 </body>
216
217 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7
8 <!--
9
10 <script type="text/javascript">
11
12 // IAB source: modified to allow link testing
13
14 var clickTag = "https://boscoandroxys.com";
15 function getParameterByName(name)
16 {
17 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
18 if (match == null || match == ""){
19 return clickTag;
20 } else{
21 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
22 }
23 }
24 clickTag = getParameterByName('clickTag');
25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
29
30
31
32 <style>
33
34 body{
35 margin: 0;
36 padding: 0;
37 }
38 a{
39 text-decoration: none;
40 }
41 #click-tag{
42 display: block;
43 position: absolute;
44 width: 100%;
45 height: 100%;
46 }
47 #border{
48 position: relative;
49 width: 100%;
50 height: 100%;
51 border: 1px solid #323e48;
52 /* background-color: #FFFFFF; */
53 overflow: hidden;
54 cursor: pointer;
55 box-sizing: border-box;
56 }
57 img {
58 position: absolute;
59 }
60
61
62 /* Custom per ad */
63
64 body{
65 width: 300px;
66 height: 600px;
67 background: url(assets/300x600img.jpg) no-repeat;
68 /* background: url(backup.jpg) no-repeat; */
69 }
70
71 #border{
72 border-top: 10px solid #323e48;
73 background-position: 0 -10px;
74
75 }
76 .box{
77 left:11px;
78 top:13px;
79 opacity: 0;
80 }
81 #box-xmas{
82 opacity: 1;
83 }
84 #txt{
85 left: 167px;
86 top: 21px;
87
88 -ms-transform: scale(.5); /* IE 9 */
89 -ms-transform-origin: 0% 0%; /* IE 9 */
90 -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
91 -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
92 transform: scale(.5);
93 transform-origin: 0% 0%;
94 }
95 #logo{
96 position: absolute;
97 left: 6px;
98 top: 3px;
99 width:180px; /* 131px */
100 height:auto;
101
102 }
103 #subscribe{
104
105 right: 20px;
106 bottom: 10px;
107 width: 126px;
108 height: auto;
109
110 }
111
112 </style>
113
114 </head>
115
116 <body>
117 <div id="border">
118
119
120 <div id="logo"></div>
121 <!-- <img id="subscribe" src="assets/subscribe.svg" alt="txt"> -->
122
123 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
124 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
125 </div>
126
127 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
128 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
129 <script>
130
131 $( document ).ready(function() {
132
133 /*
134 * embed external svg using ajax
135 */
136
137 eyeBuild.initialize();
138
139 var container = $("#logo");
140 var svgUrl = "assets/logo.svg";
141
142 $.get(svgUrl)
143 .then(injectSvg);
144
145 function injectSvg(xmlDoc) {
146 var svg = $(xmlDoc).find("svg");
147 container.append(svg);
148 animate();
149 }
150
151 /*
152 * animate
153 */
154
155 function animate(){
156
157 // animate the boxes
158
159 var tl = new TimelineMax({repeat:2});
160
161 var d = 1.25;
162 var box_arr = ["#box-advent", "#box-winter", "#box-spoileddog", "#box-valentines"];
163 for (var i = 0 in box_arr) {
164 tl.to(box_arr[i], 0.6, {opacity:1, ease:Power1.easeInOut, delay:d });
165 }
166 for (var i = 0 in box_arr) {
167 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
168 }
169 /* console.log("boxes: " + tl.totalDuration()); */
170
171
172 // animate the logo
173
174 var eye_tl = new TimelineMax({repeat:3});
175
176 var winkTime = .3;
177 // close eye
178 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
179 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
180 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
181 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
182
183 var crumbTime = 1;
184 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
185 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
186 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
187 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
188
189 // open eye
190 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
191 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
192 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
193 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
194
195 /* console.log("eye_right: " + eye_tl.totalDuration()); */
196
197
198 var tongue_tl = new TimelineMax();
199 var pantDuration = .3;
200 var pantTongueLength = .9;
201 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
202 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
203 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
204 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
205 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
206 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
207 /* console.log("tongue: " + tongue_tl.totalDuration()); */
208 };
209 });
210
211
212 </script>
213
214
215 </body>
216
217 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <p>Party</p>
15
16 <iframe id='' class="b300x250 float" scrolling="no" src="300x250_party/index.html"></iframe>
17 <iframe id='' class="b300x600 float" scrolling="no" src="300x600_party/index.html"></iframe>
18
19 </body>
20 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
29 overflow: hidden;
30 iframe::-webkit-scrollbar {
31 display: none;
32 };
33 }
34
35 .stacked {
36 display: flex;
37
38 }
39 .float {
40 display: inline-flex;
41 vertical-align: top;
42 }
43 .b300x250 {
44 width: 300px;
45 height: 250px;
46 }
47 .b728x90 {
48 width: 728px;
49 height: 90px;
50 }
51 .b300x600 {
52 width: 300px;
53 height: 600px;
54 }
55 .b600x566 {
56 width: 600px;
57 height: 566px;
58 }
1 //js file
...\ No newline at end of file ...\ No newline at end of file
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 </head> 11 </head>
12 <body> 12 <body>
13 13
14 <h3><a href="flight1/index.html">Flight 1</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="flight2/index.html">Flight 2</a></h3> 14 <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>
15 15
16 16
17 </body> 17 </body>
......