API tools faq
paste
lyonlyke

SUPER NOVA

lyonlyke
Jul 16th, 2019
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <title>SUPER NOVA</title>
  5. <!-- for-mobile-apps -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8.  
  9. <!-- //for-mobile-apps -->
  10.  
  11. <!-- Authored by: Lionel Mertens on June 12, 2019 for all to enjoy -->
  12.  
  13. <!-- Just clip and paste this text to a text editor and save it with the extension .html. And run it in your Chrome Browser. It should work. -->
  14.  
  15. <style>
  16.  
  17. /*-- start of calculator styles --*/
  18. /* reset css */
  19.  
  20.  
  21.  
  22. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  23. margin: 0;
  24. padding: 0;
  25. border: 0;
  26. font-size: 100%;
  27. font: inherit;
  28. vertical-align: baseline
  29. }
  30.  
  31. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
  32.  
  33. body { line-height: 1 }
  34.  
  35. ol, ul { list-style: none }
  36.  
  37. blockquote, q { quotes: none }
  38.  
  39. blockquote:before, blockquote:after, q:before, q:after {
  40. content: '';
  41. content: none
  42. }
  43.  
  44. table {
  45. border-collapse: collapse;
  46. border-spacing: 0
  47. }
  48.  
  49.  
  50.  
  51. a { text-decoration: none; }
  52.  
  53. body{background:none;
  54. background-color:#535353;
  55. text:align:center;
  56. margin:0;
  57. }
  58. p{margin:4px 0 0 0;padding:0;
  59. }
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71. body {
  72.  
  73. margin:0 calc(50% - 164px);
  74. background-color:#820000;
  75. overflow-x:hidden;
  76. overflow-y:hidden;
  77. }
  78.  
  79.  
  80. #space {
  81. position:absolute;
  82. width:310px;
  83. height:100%;
  84. background-color:#000;
  85. margin-left:10px;
  86. padding-top:.5%;
  87. }
  88.  
  89. #corridor {
  90. position:relative;
  91. height:98%;
  92. width:296px;
  93. margin:auto;
  94. background-color:#000;
  95. border-left: 1px solid #000;
  96. border-right: 1px solid #000;
  97.  
  98. z-index:2;
  99. }
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108. #starz1,
  109. #starz2,
  110. #starz3,
  111. #starz4,
  112. #starz5,
  113. #starz6,
  114. #starz7,
  115. #starz8 {
  116. position:absolute;
  117. width:.25px;
  118. height:.25px;
  119. background-color:#FFF;
  120. border:1px solid #DDD;
  121. top:0;
  122. z-index:3;
  123. }
  124.  
  125.  
  126. #starz9,
  127. #starz10,
  128. #starz11,
  129. #starz12,
  130. #starz13,
  131. #starz14,
  132. #starz15,
  133. #starz16 {
  134. position:absolute;
  135. width:1.5px;
  136. height:1.5px;
  137. background-color:#FFF;
  138. border:1px solid #DDD;
  139. top:0;
  140. z-index:3;
  141. }
  142.  
  143.  
  144.  
  145. #starter {
  146. position:absolute;
  147. bottom:2%;
  148. display:block;
  149. margin:5px calc(50% - 60px);
  150. width:120px;
  151. text-align:center;
  152. background-color:#008080;
  153. border:1px solid #008080;
  154. border-radius:3px;
  155. padding:2px 0;
  156. color:#FFF;
  157. font-family: 'Arial', Helvetica, Sans-Serif;
  158. font-size:12px;
  159. font-weight:700;
  160. text-decoration:none;
  161. letter-spacing:2px;
  162. box-shadow:0px 0px 2px 2px cyan;
  163. z-index:6;
  164. }
  165.  
  166.  
  167. #starter:hover {color:cyan;}
  168.  
  169. #starter:active {
  170. box-shadow:0px 0px 3px 3px cyan, 0px 0px 2px 2px lime;
  171. color:#FFF;}
  172.  
  173.  
  174.  
  175.  
  176. #holder {
  177. position:absolute;
  178. top:-100px;
  179. margin:25% calc(50% - 55px);
  180. width:110px;
  181. height:110px;
  182. background-color:gold;
  183. z-index:4;
  184. display:none;
  185. }
  186.  
  187.  
  188. #cont {
  189. position:relative;
  190. margin:5px;
  191. height:100px;
  192. width:100px;
  193. background-color:cyan;
  194.  
  195.  
  196. }
  197.  
  198.  
  199.  
  200.  
  201. .fraame {
  202. position:absolute;
  203. height:100px;
  204. width:100px;
  205. border-radius:2%;
  206.  
  207. }
  208.  
  209. #fraame1 {
  210. background-color:cyan;
  211. transform:rotate(0deg);
  212.  
  213. }
  214.  
  215.  
  216. #fraame2 {
  217. background-color:aqua;
  218. transform:rotate(22.5deg);
  219. }
  220.  
  221.  
  222.  
  223. #fraame3 {
  224. background-color:Turquoise;
  225. transform:rotate(45deg);
  226.  
  227. }
  228.  
  229.  
  230.  
  231. #fraame4 {
  232. background-color:DarkTurquoise;
  233. transform:rotate(67.5deg);
  234. }
  235.  
  236. #fraame5 {
  237. height:98px;
  238. width:98px;
  239. background-color:gold;
  240. border:1px solid white;
  241.  
  242. border-radius:50%;
  243.  
  244. background:gold;
  245. background:-moz-linear-gradient(top, gold 0%, yellow 100%);
  246. background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, gold), color-stop(100%, yellow));
  247. background:-webkit-linear-gradient(top, gold 0%, yellow 100%);
  248. background:-o-linear-gradient(top, gold 0%, yellow 100%);
  249. background:-ms-linear-gradient(top, gold 0%, yellow 100%);
  250. background:linear-gradient(to bottom, gold 0%, yellow 100%);
  251. /*filter:progid:DXImageTransform.Mic.social_icrosoft.gradient(startColorstr='gold', endColorstr='yellow', GradientType=0);*/
  252. margin:0;
  253.  
  254.  
  255. }
  256.  
  257.  
  258. </style>
  259.  
  260.  
  261.  
  262. <script>
  263. screenHeight = screen.availHeight;
  264. travel = screen.availHeight - 125;
  265. turn = 0;
  266. novaY = -100;
  267. rotation = 0;
  268.  
  269.  
  270.  
  271.  
  272. widHeight = 100;
  273. d = new Array (1,1,-1,-1,1,-1,-1,1,0,1,1,0);
  274. p = new Array (0,0,0,0,0,0,0,0,0,0,0,0);
  275.  
  276.  
  277.  
  278.  
  279.  
  280. /* BEGIN FUNCTION LIST */
  281.  
  282. function setStarz(){
  283.  
  284. for(num = 1; num < 17;num++){
  285. var r = randomize(0,travel);
  286. var randLeft = randomize(2,293);
  287. var s = 'starz' + num;
  288.  
  289. setProperty(s,'left',randLeft+'px');
  290. var b = 'matrix(1,0,0,1,0,'+r+') rotate(45deg)';
  291. styleTransform(s,b);
  292. deezPlay(s,1);
  293. }
  294.  
  295.  
  296. stopTwinkle = setInterval(twinkleStarz,000444);
  297.  
  298. document.getElementById('starter').addEventListener('click',finale);
  299. document.getElementById('starter').innerHTML='SHOW NOVA';
  300.  
  301. }
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309. function twinkleStarz(){
  310.  
  311. var r = randomize(1,17);
  312. var s = 'starz' + r;
  313.  
  314. var d = randomize(.25, 1.5);
  315.  
  316. var p = d + 'px';
  317.  
  318. setProperty(s,'height',p);
  319. setProperty(s,'width',p);
  320.  
  321. }
  322.  
  323.  
  324.  
  325.  
  326. function reFresh(){window.location.reload(false);}
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336. function Dstruct(){
  337.  
  338. document.getElementById('starter').removeEventListener('click',Dstruct);
  339. document.getElementById('starter').addEventListener('click',reFresh);
  340. document.getElementById('starter').innerHTML='REFRESH';
  341.  
  342.  
  343.  
  344. stopDerbis = setInterval(derbis,00001);
  345.  
  346. function derbis(){
  347. widHeight = widHeight - 1;
  348.  
  349. if(widHeight <= 0){
  350. clearInterval(derbis);
  351. clearInterval(stopSpin);var b = -310;
  352.  
  353.  
  354. transBack('holder',b);
  355.  
  356. }
  357.  
  358. var f = 1;
  359.  
  360. for(i = 0;i < d.length;i = i + 2){
  361.  
  362. var n = 'fraame' + f;
  363.  
  364. var x = p[i];
  365. var y = p[i+1];
  366.  
  367.  
  368. setProperty(n,'width',widHeight+'px');
  369. setProperty(n,'height',widHeight+'px');
  370. setProperty('cont','width',widHeight+'px');
  371. setProperty('cont','height',widHeight+'px');
  372. setProperty('holder','width',widHeight+'px');
  373. setProperty('holder','height',widHeight+'px');
  374.  
  375.  
  376.  
  377. var r = 'matrix(1,0,0,1,'+x+','+y+')';
  378. styleTransform(n,r);
  379. p[i] = p[i] + d[i];
  380. p[i+1] = p[i+1] + d[i+1];
  381.  
  382. var f = f + 1;
  383. }
  384. }
  385. }
  386.  
  387.  
  388.  
  389.  
  390.  
  391.  
  392.  
  393. function styleTransform(ID,TRANS){
  394. document.getElementById(ID).style.transform=TRANS;
  395. }
  396.  
  397.  
  398. function randomize(min, max){
  399. return Math.floor(Math.random() * (max - min)) + min;
  400. }
  401.  
  402.  
  403. function finale(){
  404.  
  405. document.getElementById('starter').removeEventListener('click',finale);
  406. document.getElementById('starter').addEventListener('click',Dstruct);
  407. document.getElementById('starter').innerHTML='DESTRUCT';
  408.  
  409.  
  410.  
  411.  
  412. deezPlay('holder',1);
  413. stopSpin = setInterval(spinWheel,003);
  414. }
  415.  
  416.  
  417. function spinWheel(){
  418. var r = 'matrix(1,0,0,1,0,'+novaY+')rotate('+turn+'deg)';
  419. styleTransform('holder',r);
  420. if(turn < 360){turn = turn + 3;}
  421. else{turn = 0;}
  422. if(novaY < 260){novaY++;}
  423.  
  424. }
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431.  
  432. function setProperty(ID,ATT,VAL) {
  433. document.getElementById(ID).style.setProperty(ATT,VAL);
  434. }
  435.  
  436.  
  437.  
  438.  
  439.  
  440. function deezPlay(ID,TOG) {
  441. if(TOG == 0){var VAL = 'none';}
  442. else{var VAL = 'block';}
  443.  
  444. document.getElementById(ID).style.setProperty('display',VAL);
  445. }
  446.  
  447.  
  448.  
  449.  
  450. function transBack(ID,TRANS){
  451.  
  452. setProperty(ID,'display','none');
  453. var t = 'matrix(1,0,0,1,0,'+TRANS+')';
  454. styleTransform(ID,t);
  455. }
  456.  
  457. </script>
  458.  
  459.  
  460.  
  461. </head>
  462. <body onload="setStarz()">
  463.  
  464. <div id="space">
  465. <div id="corridor">
  466. <button id="starter"></button>
  467. <script>
  468.  
  469. for(i = 1;i < 17;i++){
  470. document.write('<span id="starz'+i+'">&nbsp;<\/span>');
  471. }
  472.  
  473. </script>
  474.  
  475.  
  476. <div id="holder">
  477. <div id="cont">
  478.  
  479. <script>
  480.  
  481. for(t = 1;t < 6;t++){
  482. document.write('<div class="fraame" id="fraame'+t+'"><\/div>');
  483. }
  484.  
  485. </script>
  486.  
  487. </div>
  488. </div>
  489. </div>
  490. </div>
  491. </body>
  492. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!