html-javascript-mmc/index.html at master · MoquMoquCOM/html-javascript-mmc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>HTMLから入門してJavaScriptまで習得する会.mmc</title>

    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div>
  <!--<div>しばしお待ちを <i class="em em-pray"></i></div>-->
<div class="link">
  <a href="join.html" target="_blank">参加方法</a> <a target="_blank" href="https://www.youtube.com/channel/UCBGqexNLjaoXxj3fS8JRVjw/live">生配信</a>
  <br><a href="https://moqumoqu.slack.com/messages/C6C6B31R9/" target="_blank">Slack</a> <a href="https://speakerdeck.com/ksyunnnn/htmlkararu-men-sitejavascriptmadexi-de-suruhui-dot-mmc" target="_blank">Slide</a> <a href="https://techplay.jp/event/630101" target="_blank">Event</a>
  <br><a href="https://www.facebook.com/MoquMoquCOM/" target="_blank">Facebook</a> <a href="https://about.me/kobashisyunsuke" target="_blank">問い合わせ</a>
</div>
</div>


</body>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
  font-family:游ゴシック;
  font-size:14px;
}
.hidden {
  opacity:0;
}
.console-container {

  font-size:4em;
  text-align:center;
  height:500px;
  max-width:610px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
  display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}
a{
  color:#fff;
}
</style>
<script type="text/javascript">
// function([string1, string2],target id,[color1,color2])
 consoleText(['HTMLから入門してJavaScriptまで習得する会.mmc'], 'text',['#619E6F','rebeccapurple','lightblue']);

function consoleText(words, id, colors) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var target = document.getElementById(id)
  target.setAttribute('style', 'color:' + colors[0])
  window.setInterval(function() {

    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) {
      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>