Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="UTF-8">
- <title>Terminal Text Effect</title>
- <link rel="stylesheet" href="tpstyle.css">
- <style>
- @import url(https://fonts.googleapis.com/css?family=Khula:700);
- body {
- background: #111;
- }
- .hidden {
- opacity:0;
- }
- .console-container {
- font-family:Khula;
- font-size:3em;
- text-align:center;
- height:200px;
- width:600px;
- display:block;
- position:relative;
- color:white;
- top:0;
- bottom:0;
- left:0;
- right:0;
- margin:auto;
- }
- .console-underscore {
- display:inline-block;
- position:relative;
- top:-0.14em;
- left:10px;
- }
- </style>
- <style>
- #img1 {
- text-align: center;
- margin-top: 20px;
- }
- </style>
- <script type="text/javascript">
- function doDataLink(data) {
- // alert(data);
- Android.dataLink(data);
- }
- </script>
- </head>
- <body>
- <div id="img1">
- <img src="kei5.jpg">
- </div>
- <div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>
- <script>
- // function([string1, string2],target id,[color1,color2])
- consoleText(['クリア おめでとう!!', '意外と難しかった?', 'これでおしまい~'], 'text',['tomato','rebeccapurple','lightblue']);
- function consoleText(words, id, colors) {
- var zzi=1;
- if (colors === undefined) colors = ['#fff'];
- var visible = true;
- var con = document.getElementById('console');
- var letterCount = 1;
- var x = 1;
- var zzy = 0;
- var waiting = false;
- var target = document.getElementById(id)
- target.setAttribute('style', 'color:' + colors[0])
- window.setInterval(function() {
- if (zzi==4) {
- if (zzy==0) {
- zzy=1;
- doDataLink('//f//');
- };
- return;
- };
- if (letterCount === 0 && waiting === false) {
- waiting = true;
- target.innerHTML = words[0].substring(0, letterCount)
- window.setTimeout(function() {
- var usedColor = colors.shift();
- colors.push(usedColor);
- var usedWord = words.shift();
- words.push(usedWord);
- x = 1;
- target.setAttribute('style', 'color:' + colors[0])
- letterCount += x;
- waiting = false;
- }, 1000)
- } else if (letterCount === words[0].length + 1 && waiting === false) {
- zzi=zzi+1;
- // console.log(zzi);
- // if (zzi==4) { return; };
- waiting = true;
- window.setTimeout(function() {
- x = -1;
- letterCount += x;
- waiting = false;
- }, 1000)
- } else if (waiting === false) {
- target.innerHTML = words[0].substring(0, letterCount)
- letterCount += x;
- }
- }, 120)
- window.setInterval(function() {
- if (visible === true) {
- con.className = 'console-underscore hidden'
- visible = false;
- } else {
- con.className = 'console-underscore'
- visible = true;
- }
- }, 400)
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement