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
1 <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 ...\ No newline at end of file
1 <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 ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 250px;
69 bottom:-250px;
70 background:#A2D300;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 250px;
78 bottom:-138px;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .img-2 {
94 position: absolute;
95 top:25px;
96 z-index: 2;
97 }
98
99 .txt-2 {
100 position: absolute;
101 bottom:-100px;
102 z-index: 2;
103 }
104
105 .img-3 {
106 z-index:3;
107 position: absolute;
108 top:8px;
109 }
110
111 .txt-3 {
112 z-index:3;
113 position: absolute;
114 top:200px;
115 }
116
117 .img-4-bg {
118 position: absolute;
119 top:0;
120 }
121
122 .img-4 {
123 position: absolute;
124 top:108px;
125 z-index: 1;
126 }
127
128 .img-4-2 {
129 position: absolute;
130 bottom:12px;
131 z-index: 1;
132 }
133
134 .txt-4 {
135 opacity: 0;
136 position: absolute;
137 bottom:-100px;
138 z-index: 1;
139 }
140
141 .txt-4-2 {
142 opacity: 0;
143 position: absolute;
144 bottom:-100px;
145 z-index: 1;
146 }
147
148 </style>
149
150 </head>
151
152 <body>
153 <a id="click-tag" href="javascript:window.open(window.clickTag)">
154 <div id="border">
155
156 <img class='txt-1' src='assets/txt-1.png' />
157 <img class='txt-1-2' src='assets/txt-1-2.png' />
158
159 <div class='cover'></div>
160
161 <img class='img-2' style='opacity:0' src='assets/img-2.svg' />
162 <img class='txt-2' src='assets/txt-2.svg' />
163
164 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
165 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
166
167 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
168
169 <div class='cover-2' style='opacity:0'></div>
170 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
171 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
172
173 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
174 <img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
175
176
177 </div>
178 </a>
179 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
180
181 <script>
182
183
184 function ready(fn) {
185 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
186 fn();
187 } else {
188 document.addEventListener('DOMContentLoaded', fn);
189 }
190 }
191
192
193 function stage1(){
194
195 var tl = new TimelineMax({repeat:3, repeatDelay:7});
196
197 tl.to(".txt-1",0.5,{top:40});
198 tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
199
200 tl.to(".txt-1-2",0,{opacity:0}, "+=2.25");
201 tl.to(".txt-1",0,{opacity:0});
202
203 tl.to(".img-2",0,{opacity:1,scale:0.75});
204 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
205 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
206 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
207 tl.to(".txt-2",1,{top:200}, "-=1");
208
209 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
210
211 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
212 tl.to(".img-2",0,{opacity:0});
213 tl.to(".img-3",0,{opacity:1});
214
215 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
216 tl.to("#border",0,{background:"rgb(241,242,243)"});
217 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
218
219 tl.to(".txt-4",0.5,{bottom:70});
220 tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
221
222 }
223
224
225
226 ready(stage1());
227
228 </script>
229
230 </body>
231
232 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 250px;
69 bottom:-250px;
70 background:#FF4C46;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 250px;
78 bottom:-138px;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .img-2 {
94 position: absolute;
95 top:50px;
96 z-index: 2;
97 }
98
99 .txt-2 {
100 position: absolute;
101 bottom:-100px;
102 z-index: 2;
103 }
104
105 .img-3 {
106 z-index:3;
107 position: absolute;
108 top:8px;
109 }
110
111 .txt-3 {
112 z-index:3;
113 position: absolute;
114 top:200px;
115 }
116
117 .img-4-bg {
118 position: absolute;
119 top:0;
120 }
121
122 .img-4 {
123 position: absolute;
124 top:0px;
125 z-index: 1;
126 }
127
128 .img-4-2 {
129 position: absolute;
130 bottom:7px;
131 z-index: 1;
132 }
133
134 .txt-4 {
135 opacity: 0;
136 position: absolute;
137 bottom:-100px;
138 z-index: 1;
139 }
140
141 .txt-4-2 {
142 opacity: 0;
143 position: absolute;
144 bottom:-100px;
145 z-index: 1;
146 }
147
148 </style>
149
150 </head>
151
152 <body>
153 <a id="click-tag" href="javascript:window.open(window.clickTag)">
154 <div id="border">
155
156 <img class='txt-1' src='assets/txt-1.png' />
157 <img class='txt-1-2' src='assets/txt-1-2.png' />
158
159 <div class='cover'></div>
160
161 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
162 <img class='txt-2' src='assets/txt-2.png' />
163
164 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
165 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
166
167 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
168
169 <div class='cover-2' style='opacity:0'></div>
170 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
171 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
172
173 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
174 <img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
175
176
177 </div>
178 </a>
179 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
180
181 <script>
182
183
184 function ready(fn) {
185 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
186 fn();
187 } else {
188 document.addEventListener('DOMContentLoaded', fn);
189 }
190 }
191
192
193 function stage1(){
194
195 var tl = new TimelineMax({repeat:3, repeatDelay:7});
196
197 tl.to(".txt-1",0.5,{top:40});
198 tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
199
200 tl.to(".txt-1-2",0,{opacity:0}, "+=3");
201 tl.to(".txt-1",0,{opacity:0});
202
203 tl.to(".img-2",0,{opacity:1,scale:0.75});
204 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
205 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
206 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
207 tl.to(".txt-2",1,{top:200}, "-=1");
208
209 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
210
211 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
212 tl.to(".img-2",0,{opacity:0});
213 tl.to(".img-3",0,{opacity:1});
214
215 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
216 tl.to("#border",0,{background:"rgb(241,242,243)"});
217 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
218
219
220 tl.to(".txt-4",0.5,{bottom:70});
221 tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
222
223 }
224
225
226
227 ready(stage1());
228
229 </script>
230
231 </body>
232
233 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 250px;
69 bottom:-250px;
70 background:#FBDF4F;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 250px;
78 bottom:-138px;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .txt-1-3 {
94 position: absolute;
95 bottom:-100px;
96 }
97
98 .img-2 {
99 position: absolute;
100 top:8px;
101 z-index: 2;
102 }
103
104 .txt-2 {
105 position: absolute;
106 bottom:-100px;
107 z-index: 2;
108 }
109
110 .img-3 {
111 z-index:3;
112 position: absolute;
113 top:8px;
114 }
115
116 .txt-3 {
117 z-index:3;
118 position: absolute;
119 top:200px;
120 }
121
122 .img-4-bg {
123 position: absolute;
124 top:0;
125 }
126
127 .img-4 {
128 position: absolute;
129 top:108px;
130 z-index: 1;
131 }
132
133 .img-4-2 {
134 position: absolute;
135 bottom:7px;
136 z-index: 1;
137 }
138
139 .txt-4 {
140 opacity: 0;
141 position: absolute;
142 bottom:-100px;
143 z-index: 1;
144 }
145
146 .txt-4-2 {
147 opacity: 0;
148 position: absolute;
149 bottom:-100px;
150 z-index: 1;
151 }
152
153 </style>
154
155 </head>
156
157 <body>
158 <a id="click-tag" href="javascript:window.open(window.clickTag)">
159 <div id="border">
160
161 <img class='txt-1' src='assets/txt-1.png' />
162 <img class='txt-1-2' src='assets/txt-1-2.png' />
163 <img class='txt-1-3' src='assets/txt-1-3.png' />
164
165 <div class='cover'></div>
166
167 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
168 <img class='txt-2' src='assets/txt-2.png' />
169
170 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
171 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
172
173 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
174
175 <div class='cover-2' style='opacity:0'></div>
176 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
177 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
178
179 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
180 <img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
181
182
183 </div>
184 </a>
185 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
186
187 <script>
188
189
190 function ready(fn) {
191 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
192 fn();
193 } else {
194 document.addEventListener('DOMContentLoaded', fn);
195 }
196 }
197
198
199 function stage1(){
200
201 var tl = new TimelineMax({repeat:3, repeatDelay:7});
202
203 tl.to(".txt-1",0.5,{top:40});
204 tl.to(".txt-1-2",0.5,{top:115}, "-=0.25");
205 tl.to(".txt-1-3",0.5,{top:155}, "-=0.25");
206
207 tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=5");
208
209 tl.to(".img-2",0,{opacity:1,scale:0.75});
210 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
211 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
212 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
213 tl.to(".txt-2",1,{top:200}, "-=1");
214
215 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
216
217 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
218 tl.to(".img-2",0,{opacity:0});
219 tl.to(".img-3",0,{opacity:1});
220
221 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
222 tl.to("#border",0,{background:"rgb(241,242,243)"});
223 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
224
225 tl.to(".txt-4",0.5,{bottom:70});
226 tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
227
228 }
229
230
231
232 ready(stage1());
233
234 </script>
235
236 </body>
237
238 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 250px;
69 bottom:-250px;
70 background:#FF4C46;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 250px;
78 bottom:-138px;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .img-2 {
94 position: absolute;
95 top:-30px;
96 z-index: 2;
97 }
98
99 .txt-2 {
100 position: absolute;
101 bottom:-100px;
102 z-index: 2;
103 }
104
105 .img-3 {
106 z-index:3;
107 position: absolute;
108 top:-30px;
109 }
110
111 .txt-3 {
112 z-index:3;
113 position: absolute;
114 top:200px;
115 }
116
117 .img-4-bg {
118 position: absolute;
119 top:0;
120 }
121
122 .img-4 {
123 position: absolute;
124 top:108px;
125 z-index: 1;
126 }
127
128 .img-4-2 {
129 position: absolute;
130 bottom:7px;
131 z-index: 1;
132 }
133
134 .txt-4 {
135 opacity: 0;
136 position: absolute;
137 bottom:-100px;
138 z-index: 1;
139 }
140
141 .txt-4-2 {
142 opacity: 0;
143 position: absolute;
144 bottom:-100px;
145 z-index: 1;
146 }
147
148 </style>
149
150 </head>
151
152 <body>
153 <a id="click-tag" href="javascript:window.open(window.clickTag)">
154 <div id="border">
155
156 <img class='txt-1' src='assets/txt-1.png' />
157 <img class='txt-1-2' src='assets/txt-1-2.png' />
158
159 <div class='cover'></div>
160
161 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
162 <img class='txt-2' src='assets/txt-2.png' />
163
164 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
165 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
166
167 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
168
169 <div class='cover-2' style='opacity:0'></div>
170 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
171 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
172
173 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
174 <img class='txt-4-2' style='opacity: 0' src='assets/txt-4-2.png' />
175
176
177 </div>
178 </a>
179 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
180
181 <script>
182
183
184 function ready(fn) {
185 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
186 fn();
187 } else {
188 document.addEventListener('DOMContentLoaded', fn);
189 }
190 }
191
192
193 function stage1(){
194
195 var tl = new TimelineMax({repeat:3, repeatDelay:7});
196
197 tl.to(".txt-1",0.5,{top:40});
198 tl.to(".txt-1-2",0.5,{top:125}, "-=0.25");
199
200 tl.to([".txt-1",".txt-1-2"],0,{opacity:0}, "+=3.5");
201
202 tl.to(".img-2",0,{opacity:1,scale:0.75});
203 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
204 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
205 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
206 tl.to(".txt-2",1,{top:200}, "-=1");
207
208 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
209
210 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
211 tl.to(".img-2",0,{opacity:0});
212 tl.to(".img-3",0,{opacity:1});
213
214 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
215 tl.to("#border",0,{background:"rgb(241,242,243)"});
216 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
217
218 tl.to(".txt-4",0.5,{bottom:70});
219 tl.to(".txt-4-2",0.5,{bottom:45}, "-=0.25");
220
221 }
222
223
224
225 ready(stage1());
226
227 </script>
228
229 </body>
230
231 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 600px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 600px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 600px;
69 bottom:-600px;
70 background:#A2D300;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 224px;
78 bottom:0;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .txt-1-3 {
94 position: absolute;
95 bottom:-100px;
96 }
97
98 .img-2 {
99 position: absolute;
100 top:150px;
101 z-index: 2;
102 }
103
104 .txt-2 {
105 position: absolute;
106 bottom:-100px;
107 z-index: 2;
108 }
109
110 .img-3 {
111 z-index:3;
112 position: absolute;
113 top:115px;
114 }
115
116 .txt-3 {
117 z-index:3;
118 position: absolute;
119 top:475px;
120 }
121
122 .img-4-bg {
123 position: absolute;
124 top:0;
125 }
126
127 .img-4 {
128 position: absolute;
129 bottom:180px;
130 z-index: 1;
131 }
132
133 .img-4-2 {
134 position: absolute;
135 bottom:12px;
136 z-index: 1;
137 }
138
139 .txt-4 {
140 opacity: 0;
141 position: absolute;
142 bottom:-100px;
143 z-index: 1;
144 }
145
146 .txt-4-2 {
147 opacity: 0;
148 position: absolute;
149 bottom:-100px;
150 z-index: 1;
151 }
152
153 </style>
154
155 </head>
156
157 <body>
158 <a id="click-tag" href="javascript:window.open(window.clickTag)">
159 <div id="border">
160
161 <img class='txt-1' src='assets/txt-1.png' />
162 <img class='txt-1-2' src='assets/txt-1-2.png' />
163 <img class='txt-1-3' src='assets/txt-1-3.png' />
164
165 <div class='cover'></div>
166
167 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
168 <img class='txt-2' src='assets/txt-2.png' />
169
170 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
171 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
172
173 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
174
175 <div class='cover-2' style='opacity:0'></div>
176 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
177 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
178
179 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
180
181
182 </div>
183 </a>
184 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
185
186 <script>
187
188
189 function ready(fn) {
190 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
191 fn();
192 } else {
193 document.addEventListener('DOMContentLoaded', fn);
194 }
195 }
196
197
198 function stage1(){
199
200 var tl = new TimelineMax({repeat:3, repeatDelay:7});
201
202 tl.to(".txt-1",0.5,{top:150});
203 tl.to(".txt-1-2",0.5,{top:255}, "-=0.25");
204 tl.to(".txt-1-3",0.5,{top:305}, "-=0.25");
205
206 tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=2.25");
207
208 tl.to(".img-2",0,{opacity:1,scale:0.75});
209 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
210 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
211 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
212 tl.to(".txt-2",1,{top:475}, "-=1");
213
214 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
215
216 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
217 tl.to(".img-2",0,{opacity:0});
218 tl.to(".img-3",0,{opacity:1});
219
220 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
221 tl.to("#border",0,{background:"rgb(241,242,243)"});
222 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
223
224 tl.to(".txt-4",0.5,{bottom:100});
225
226 }
227
228
229
230 ready(stage1());
231
232 </script>
233
234 </body>
235
236 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 600px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 600px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 600px;
69 bottom:-600px;
70 background:#FF4C46;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 224px;
78 bottom:0;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .txt-1-3 {
94 position: absolute;
95 bottom:-100px;
96 }
97
98 .img-2 {
99 position: absolute;
100 top:150px;
101 z-index: 2;
102 }
103
104 .txt-2 {
105 position: absolute;
106 bottom:-100px;
107 z-index: 2;
108 }
109
110 .img-3 {
111 z-index:3;
112 position: absolute;
113 top:115px;
114 }
115
116 .txt-3 {
117 z-index:3;
118 position: absolute;
119 top:455px;
120 }
121
122 .img-4-bg {
123 position: absolute;
124 top:0;
125 }
126
127 .img-4 {
128 position: absolute;
129 bottom:180px;
130 z-index: 1;
131 }
132
133 .img-4-2 {
134 position: absolute;
135 bottom:12px;
136 z-index: 1;
137 }
138
139 .txt-4 {
140 opacity: 0;
141 position: absolute;
142 bottom:-100px;
143 z-index: 1;
144 }
145
146 .txt-4-2 {
147 opacity: 0;
148 position: absolute;
149 bottom:-100px;
150 z-index: 1;
151 }
152
153 </style>
154
155 </head>
156
157 <body>
158 <a id="click-tag" href="javascript:window.open(window.clickTag)">
159 <div id="border">
160
161 <img class='txt-1' src='assets/txt-1.png' />
162 <img class='txt-1-2' src='assets/txt-1-2.png' />
163 <img class='txt-1-3' src='assets/txt-1-3.png' />
164
165 <div class='cover'></div>
166
167 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
168 <img class='txt-2' src='assets/txt-2.png' />
169
170 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
171 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
172
173 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
174
175 <div class='cover-2' style='opacity:0'></div>
176 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
177 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
178
179 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
180
181
182 </div>
183 </a>
184 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
185
186 <script>
187
188
189 function ready(fn) {
190 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
191 fn();
192 } else {
193 document.addEventListener('DOMContentLoaded', fn);
194 }
195 }
196
197
198 function stage1(){
199
200 var tl = new TimelineMax({repeat:3, repeatDelay:7});
201
202 tl.to(".txt-1",0.5,{top:125});
203 tl.to(".txt-1-2",0.5,{top:235}, "-=0.25");
204 tl.to(".txt-1-3",0.5,{top:355}, "-=0.25");
205
206 tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=3.5");
207
208 tl.to(".img-2",0,{opacity:1,scale:0.75});
209 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
210 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
211 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
212 tl.to(".txt-2",1,{top:455}, "-=1");
213
214 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
215
216 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
217 tl.to(".img-2",0,{opacity:0});
218 tl.to(".img-3",0,{opacity:1});
219
220 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
221 tl.to("#border",0,{background:"rgb(241,242,243)"});
222 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
223
224 tl.to(".txt-4",0.5,{bottom:125});
225
226 }
227
228
229
230 ready(stage1());
231
232 </script>
233
234 </body>
235
236 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 600px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 600px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 600px;
69 bottom:-600px;
70 background:#FDE14F;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 224px;
78 bottom:0;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .txt-1-3 {
94 position: absolute;
95 bottom:-100px;
96 }
97
98 .img-2 {
99 position: absolute;
100 top:80px;
101 z-index: 2;
102 }
103
104 .txt-2 {
105 position: absolute;
106 bottom:-100px;
107 z-index: 2;
108 }
109
110 .img-3 {
111 z-index:3;
112 position: absolute;
113 top:90px;
114 }
115
116 .txt-3 {
117 z-index:3;
118 position: absolute;
119 top:500px;
120 }
121
122 .img-4-bg {
123 position: absolute;
124 top:0;
125 }
126
127 .img-4 {
128 position: absolute;
129 bottom:180px;
130 z-index: 1;
131 }
132
133 .img-4-2 {
134 position: absolute;
135 bottom:12px;
136 z-index: 1;
137 }
138
139 .txt-4 {
140 opacity: 0;
141 position: absolute;
142 bottom:-100px;
143 z-index: 1;
144 }
145
146 .txt-4-2 {
147 opacity: 0;
148 position: absolute;
149 bottom:-100px;
150 z-index: 1;
151 }
152
153 </style>
154
155 </head>
156
157 <body>
158 <a id="click-tag" href="javascript:window.open(window.clickTag)">
159 <div id="border">
160
161 <img class='txt-1' src='assets/txt-1.png' />
162 <img class='txt-1-2' src='assets/txt-1-2.png' />
163 <img class='txt-1-3' src='assets/txt-1-3.png' />
164
165 <div class='cover'></div>
166
167 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
168 <img class='txt-2' src='assets/txt-2.png' />
169
170 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
171 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
172
173 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
174
175 <div class='cover-2' style='opacity:0'></div>
176 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
177 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
178
179 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
180
181
182 </div>
183 </a>
184 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
185
186 <script>
187
188
189 function ready(fn) {
190 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
191 fn();
192 } else {
193 document.addEventListener('DOMContentLoaded', fn);
194 }
195 }
196
197
198 function stage1(){
199
200 var tl = new TimelineMax({repeat:3, repeatDelay:7});
201
202 tl.to(".txt-1",0.5,{top:80});
203 tl.to(".txt-1-2",0.5,{top:250}, "-=0.25");
204 tl.to(".txt-1-3",0.5,{top:370}, "-=0.25");
205
206 tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=5");
207
208 tl.to(".img-2",0,{opacity:1,scale:0.75});
209 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
210 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
211 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
212 tl.to(".txt-2",1,{top:500}, "-=1");
213
214 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
215
216 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
217 tl.to(".img-2",0,{opacity:0});
218 tl.to(".img-3",0,{opacity:1});
219
220 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
221 tl.to("#border",0,{background:"rgb(241,242,243)"});
222 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
223
224 tl.to(".txt-4",0.5,{bottom:105});
225
226 }
227
228
229
230 ready(stage1());
231
232 </script>
233
234 </body>
235
236 </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 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://www.manningcanning.com/";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 600px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 600px;
54 background:#231F20;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 display: flex;
60 align-items: center;
61 flex-direction: column;
62 justify-content: center;
63 }
64
65 .cover {
66 position: absolute;
67 width: 300px;
68 height: 600px;
69 bottom:-600px;
70 background:#FF4C46;
71 z-index: 1;
72 }
73
74 .cover-2 {
75 position: absolute;
76 width: 300px;
77 height: 224px;
78 bottom:0;
79 background:#231F20;
80 z-index: 1;
81 }
82
83 .txt-1 {
84 position: absolute;
85 bottom:-100px;
86 }
87
88 .txt-1-2 {
89 position: absolute;
90 bottom:-100px;
91 }
92
93 .txt-1-3 {
94 position: absolute;
95 bottom:-100px;
96 }
97
98 .img-2 {
99 position: absolute;
100 top:80px;
101 z-index: 2;
102 }
103
104 .txt-2 {
105 position: absolute;
106 bottom:-100px;
107 z-index: 2;
108 }
109
110 .img-3 {
111 z-index:3;
112 position: absolute;
113 top:90px;
114 }
115
116 .txt-3 {
117 z-index:3;
118 position: absolute;
119 top:500px;
120 }
121
122 .img-4-bg {
123 position: absolute;
124 top:0;
125 }
126
127 .img-4 {
128 position: absolute;
129 bottom:180px;
130 z-index: 1;
131 }
132
133 .img-4-2 {
134 position: absolute;
135 bottom:12px;
136 z-index: 1;
137 }
138
139 .txt-4 {
140 opacity: 0;
141 position: absolute;
142 bottom:-100px;
143 z-index: 1;
144 }
145
146 .txt-4-2 {
147 opacity: 0;
148 position: absolute;
149 bottom:-100px;
150 z-index: 1;
151 }
152
153 </style>
154
155 </head>
156
157 <body>
158 <a id="click-tag" href="javascript:window.open(window.clickTag)">
159 <div id="border">
160
161 <img class='txt-1' src='assets/txt-1.png' />
162 <img class='txt-1-2' src='assets/txt-1-2.png' />
163
164 <div class='cover'></div>
165
166 <img class='img-2' style='opacity:0' src='assets/img-2.png' />
167 <img class='txt-2' src='assets/txt-2.png' />
168
169 <img class='img-3' style='opacity:0' src='assets/img-3.png' />
170 <img class='txt-3' style='opacity:0' src='assets/txt-3.png' />
171
172 <img class='img-4-bg' style='opacity:0' src='assets/img-4-bg.png' />
173
174 <div class='cover-2' style='opacity:0'></div>
175 <img class='img-4' style='opacity: 0' src='assets/img-4.png' />
176 <img class='img-4-2' style='opacity: 0' src='assets/img-4-2.png' />
177
178 <img class='txt-4' style='opacity: 0' src='assets/txt-4.png' />
179
180
181 </div>
182 </a>
183 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
184
185 <script>
186
187
188 function ready(fn) {
189 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
190 fn();
191 } else {
192 document.addEventListener('DOMContentLoaded', fn);
193 }
194 }
195
196
197 function stage1(){
198
199 var tl = new TimelineMax({repeat:3, repeatDelay:7});
200
201 tl.to(".txt-1",0.5,{top:150});
202 tl.to(".txt-1-2",0.5,{top:330}, "-=0.25");
203
204 tl.to([".txt-1",".txt-1-2",".txt-1-3"],0,{opacity:0}, "+=3.5");
205
206 tl.to(".img-2",0,{opacity:1,scale:0.75});
207 tl.to(".img-2",0.4,{scale:1.25,transformOrigin:"50% 50%", ease:"bounce.out"});
208 tl.to(".img-2",0.4,{scale:0.90,transformOrigin:"50% 50%", ease:"bounce.out"});
209 tl.to(".img-2",0.4,{scale:1,transformOrigin:"50% 50%", ease:"bounce.out"});
210 tl.to(".txt-2",1,{top:500}, "-=1");
211
212 tl.to(".cover",0.2,{top:0,ease: "none"}, "+=1.7");
213
214 tl.to(".txt-3",0,{opacity:1}, "-=0.1");
215 tl.to(".img-2",0,{opacity:0});
216 tl.to(".img-3",0,{opacity:1});
217
218 tl.to([".cover", ".img-2", ".img-3", ".img-2", ".txt-1", ".txt-1-2", ".txt-2", ".txt-3"],0,{opacity:0}, "+=2.5");
219 tl.to("#border",0,{background:"rgb(241,242,243)"});
220 tl.to([".img-4-bg",".cover-2", ".img-4", ".img-4-2",".txt-4", ".txt-4-2"],0,{opacity:1});
221
222 tl.to(".txt-4",0.5,{bottom:105});
223
224 }
225
226
227
228 ready(stage1());
229
230 </script>
231
232 </body>
233
234 </html>
...\ No newline at end of file ...\ No newline at end of file