daily pastebin goal
34%
SHARE
TWEET

【3Kクリア画面】 tpindex2.html

basictomonokai Oct 3rd, 2016 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html >
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Terminal Text Effect</title>
  6.    
  7.    
  8.    
  9.    
  10.         <link rel="stylesheet" href="tpstyle.css">
  11. <style>
  12.  
  13. @import url(https://fonts.googleapis.com/css?family=Khula:700);
  14. body {
  15.   background: #111;
  16. }
  17. .hidden {
  18.   opacity:0;
  19. }
  20. .console-container {
  21.  
  22.   font-family:Khula;
  23.   font-size:3em;
  24.   text-align:center;
  25.   height:200px;
  26.   width:600px;
  27.   display:block;
  28.   position:relative;
  29.   color:white;
  30.   top:0;
  31.   bottom:0;
  32.   left:0;
  33.   right:0;
  34.   margin:auto;
  35. }
  36. .console-underscore {
  37.    display:inline-block;
  38.   position:relative;
  39.   top:-0.14em;
  40.   left:10px;
  41. }
  42.  
  43. </style>
  44.  
  45. <style>
  46. #img1 {
  47.   text-align: center;
  48.   margin-top: 20px;
  49. }
  50.  
  51. </style>
  52.  
  53. <script type="text/javascript">
  54.     function doDataLink(data) {
  55.         // alert(data);
  56.         Android.dataLink(data);
  57.     }
  58. </script>    
  59.    
  60.   </head>
  61.  
  62.   <body>
  63. <div id="img1">
  64. <img src="kei8.jpg">
  65. </div>
  66.  
  67.     <div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>
  68.    
  69. <script>
  70.  
  71. // function([string1, string2],target id,[color1,color2])    
  72.  consoleText(['クリア おめでとう.', 'でも終りじゃない・・', '次はちょっと大変'], 'text',['tomato','rebeccapurple','lightblue']);
  73.  
  74. function consoleText(words, id, colors) {
  75.  
  76.   var zzi=1;
  77.  
  78.   if (colors === undefined) colors = ['#fff'];
  79.   var visible = true;
  80.   var con = document.getElementById('console');
  81.   var letterCount = 1;
  82.   var x = 1;
  83.   var zzy = 0;
  84.   var waiting = false;
  85.   var target = document.getElementById(id)
  86.   target.setAttribute('style', 'color:' + colors[0])
  87.   window.setInterval(function() {
  88.  
  89.  
  90.     if (zzi==4) {
  91.        if (zzy==0) {
  92.           zzy=1;
  93.           doDataLink('//f//');
  94.        };
  95.        return;
  96.      };
  97.  
  98.  
  99.     if (letterCount === 0 && waiting === false) {
  100.       waiting = true;
  101.       target.innerHTML = words[0].substring(0, letterCount)
  102.       window.setTimeout(function() {
  103.         var usedColor = colors.shift();
  104.         colors.push(usedColor);
  105.         var usedWord = words.shift();
  106.         words.push(usedWord);
  107.         x = 1;
  108.         target.setAttribute('style', 'color:' + colors[0])
  109.         letterCount += x;
  110.         waiting = false;
  111.       }, 1000)
  112.     } else if (letterCount === words[0].length + 1 && waiting === false) {
  113.       zzi=zzi+1;
  114.       // console.log(zzi);
  115.       // if (zzi==4) { return; };
  116.       waiting = true;
  117.       window.setTimeout(function() {
  118.         x = -1;
  119.         letterCount += x;
  120.         waiting = false;
  121.       }, 1000)
  122.     } else if (waiting === false) {
  123.       target.innerHTML = words[0].substring(0, letterCount)
  124.       letterCount += x;
  125.     }
  126.   }, 120)
  127.   window.setInterval(function() {
  128.     if (visible === true) {
  129.       con.className = 'console-underscore hidden'
  130.       visible = false;
  131.  
  132.  
  133.     } else {
  134.       con.className = 'console-underscore'
  135.  
  136.       visible = true;
  137.     }
  138.   }, 400)
  139. }
  140.  
  141. </script>
  142.  
  143.    
  144.    
  145.    
  146.   </body>
  147. </html>
RAW Paste Data
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
 
Top