API tools faq
paste
Advertisement
Guest User

kode

a guest
Jan 23rd, 2019
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>160x600</title>
  5. <meta charset="utf-8"/>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="ad.size" content="width=160,height=16000">
  8.  
  9. <!-- TweenMax -->
  10. <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script>
  11.  
  12. <!-- DoubleClick Enabler -->
  13. <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
  14. <script type="text/javascript">var clickTag = "http://www.google.com"; </script>
  15.  
  16. <style type="text/css">
  17. body,html{margin:0;padding:0;}
  18. html{-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;}
  19. #banner {position:absolute; background-color:#fff;width:160px;height:600px;overflow:hidden;cursor:pointer;display:none;}
  20. #banner div {position:absolute;}
  21.  
  22. a:link {color: #92a81c;}
  23. a:visited {color: #92a81c;}
  24. a:hover {color: #92a81c;}
  25. a:active {color: #92a81c;}
  26.  
  27. #legal {position:absolute;right:5px;top:5px;font:10px Arial;color:#939393;}
  28. #legal_overlay {position:absolute;width:150px;height:350px;left:5px;top:5px;font:11px/12px Arial;background:#fff;padding:30px 10px 10px 10px;box-sizing:border-box;overflow:hidden;z-index:10;}
  29. #legal_overlay_close {position:absolute;top:8px;right:8px;cursor:pointer;font:11px/11px Gill Sans, Arial;width:24px;text-align:center;background:#bbcb26;padding:7px;box-sizing:border-box;border-radius: 50%;}
  30. .round_corners {-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
  31.  
  32. #cta {left:16px;top:252px;z-index:10;}
  33. .cta {background: url('cta.png') 0 0 no-repeat;width:128px;height:33px;background-size:128px 66px;}
  34. .cta:hover {background-position: 0 -33px;}
  35. </style>
  36. </head>
  37. <body>
  38.  
  39. <div id="banner">
  40. <div id="content">
  41. <div id="bg"><img src="bg.png" width="160" height="600"></div>
  42. <div id="box"><img src="box.png" width="160" height="600"></div>
  43. <div id="textbox1"><img src="textbox1.png" width="160" height="600"></div>
  44. <div id="textbox2"><img src="textbox2.png" width="160" height="600"></div>
  45. <div id="text1_1"><img src="text1_1.png" width="160" height="600"></div>
  46. <div id="text1_2"><img src="text1_2.png" width="160" height="600"></div>
  47. <div id="text1_3"><img src="text1_3.png" width="160" height="600"></div>
  48. <div id="cta" class="cta"></div>
  49. <div id="logo"><img src="logo.png" width="160" height="600"></div>
  50. </div>
  51. <div id="legal" onClick="openLegal()">Betingelser</div>
  52. <div id="legal_overlay" class="round_corners">
  53. <div id="legal_overlay_close" onClick="closeLegal()">X</div>
  54. <p>* Gælder husstande, hvor der kan leveres min. 10 Mbit. Type af bredbånds-<br>produkt afhænger af leverancemulighed på adressen og alle hastig-<br>heder leveres ikke overalt. Evt. forsendelse af modem (99 kr.). Pris ekskl. evt. tilslutning. BS/adm. gebyr 9,75 kr./regning. Brevpost-gebyr 29 kr./kvartal medmindre aftale om digital post fra Stofa. Opsigelse 1 md. Se <a href="https://www.stofa.dk/bredbaandsfakta" target="_blank">stofa.dk/bredbaandsfakta</a>. Tilbuddet gælder fra 6/11 t.o.m. 11/12 2018 og kun nye kunder uden Stofa Bredbånd de seneste 6 mdr. Min. pris 1. md. inkl. oprettelse og forsendelse: 99 kr. Herefter 229 kr./md.</p>
  55. </div>
  56.  
  57. </div>
  58.  
  59.  
  60. <script>
  61. var loopCounter = 1;
  62. var possibleRoll = false;
  63. var loopsEnded = false;
  64. var politeLoadBanner = true;
  65. var d = new Date().getTime();
  66.  
  67. var banner = document.getElementById("banner");
  68.  
  69. var oLegalOverlay = document.getElementById("legal_overlay");
  70.  
  71. function resetGfx(){
  72. if(loopCounter === 1){
  73. d = new Date().getTime();
  74. TweenLite.to(legal_overlay, 0.0, {autoAlpha:0});
  75. }
  76. TweenMax.to(text1_1, 0, {alpha:0, y:25});
  77. TweenMax.to(text1_2, 0, {alpha:0, y:25});
  78. TweenMax.to(text1_3, 0, {alpha:0, y:25});
  79. TweenLite.to(textbox1, 0, {scale:1, rotationY:0, transformOrigin:"80px 199px", transformPerspective:500});
  80. TweenLite.to(textbox2, 0, {rotationY:90, transformOrigin:"80px 199px", transformPerspective:500});
  81.  
  82. TweenLite.to(cta, 0, {scale:0});
  83.  
  84. // REVEAL BANNER
  85. banner.style.display = "block";
  86. }
  87.  
  88. function frame1(){
  89. TweenMax.to(text1_1, 0.7, {alpha:1, y:0, ease:Back.easeOut.config(1.5), delay:0.1});
  90. TweenMax.to(text1_2, 0.7, {alpha:1, y:0, ease:Back.easeOut.config(1.5), delay:0.15});
  91. TweenMax.to(text1_3, 0.7, {alpha:1, y:0, ease:Back.easeOut.config(1.5), delay:0.2});
  92.  
  93. TweenMax.to(cta, 0.5, {scale:1, ease:Back.easeOut.config(1.5), delay:4.5});
  94.  
  95. TweenMax.to(textbox1, 0.5, {rotationY:-90, ease:Power2.easeIn, delay:4.0});
  96. TweenMax.to(textbox2, 0.5, {rotationY:0, ease:Power2.easeOut, delay:4.5});
  97.  
  98.  
  99.  
  100. //TweenMax.to(text1_1, 0.5, {alpha:0, y:-25, ease:Back.easeIn.config(1), delay:4.0});
  101. //TweenMax.to(text1_2, 0.5, {alpha:0, y:-25, ease:Back.easeIn.config(1), delay:4.05});
  102. //TweenMax.to(text1_3, 0.5, {alpha:0, y:-25, ease:Back.easeIn.config(1), delay:4.1});
  103.  
  104. TweenMax.to(cta, 0.2, {scale:1.05, yoyo:true, repeat:3, ease:Power2.easeInOut, delay:6.5});
  105. TweenMax.delayedCall(8.5, endFrame);
  106. }
  107.  
  108. function endFrame(){
  109. if(loopCounter<3){
  110. TweenMax.to(textbox1, 0.5, {rotationY:-90, ease:Power2.easeIn, delay:0.0});
  111. TweenMax.to(textbox2, 0.5, {rotationY:0, ease:Power2.easeOut, delay:0.2});
  112. TweenMax.to(textbox2, 0.5, {rotationY:-90, ease:Power2.easeIn, delay:0.5});
  113. TweenMax.to(textbox1, 0.5, {rotationY:0, ease:Power2.easeOut, delay:1});
  114. TweenMax.to(cta, 0.5, {scale:0, ease:Back.easeIn.config(1), delay:1, onComplete:restartBanner});
  115. }else{
  116. loopsEnded = true;
  117. console.log("TOTAL TIME: " + timeElapsed());
  118. }
  119. }
  120.  
  121.  
  122.  
  123. function restartBanner(){
  124. loopCounter++;
  125. resetGfx();
  126. frame1();
  127. }
  128.  
  129. // For testing animation duration
  130. function timeElapsed(){
  131. var da = new Date();
  132. var now = da.getTime();
  133. return (now - d)/1000;
  134. }
  135.  
  136. function openLegal() {
  137. TweenLite.to(oLegalOverlay, 0.5, {autoAlpha:1, delay:0});
  138. }
  139.  
  140. function closeLegal() {
  141. TweenLite.to(oLegalOverlay, 0.5, {autoAlpha:0, delay:0});
  142. }
  143.  
  144. // CLICKTAG
  145. content.onclick = function() {
  146. Enabler.exit('Background Exit', clickTag);
  147. }
  148.  
  149. content.onmouseover = function(){
  150. if(loopsEnded){
  151. loopCounter--;
  152. loopsEnded = false;
  153. endFrame();
  154. }
  155. }
  156.  
  157. // Make sure the Enabler is initialised before starting
  158. if (Enabler.isInitialized()) {
  159. init();
  160. }else{
  161. Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
  162. }
  163.  
  164. // Runs when Enabler is ready.
  165. function init() {
  166. if(politeLoadBanner){
  167. if (Enabler.isPageLoaded()) {
  168. checkVisibility();
  169. }else{
  170. Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, checkVisibility);
  171. }
  172. }else{
  173. checkVisibility();
  174. }
  175. };
  176.  
  177. function checkVisibility(){
  178. // In App ads are rendered offscreen so animation should wait for
  179. // the visible event. These are simulated with delays in the local environment.
  180. if (!Enabler.isVisible()) {
  181. Enabler.addEventListener(studio.events.StudioEvent.VISIBLE, adVisible);
  182. } else {
  183. adVisible();
  184. }
  185. };
  186.  
  187. // Runs when the page is completely loaded
  188. function adVisible(){
  189. resetGfx();
  190. frame1();
  191. };
  192.  
  193. </script>
  194. </body>
  195. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!