konsola, js, php -

Konsola w przeglądarce

Article 0111Currently 24.11/100%
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

https://emlog.pl/blog/index.php? 24.1% popularności (Głosowało 37 osób)

Konsola napisana w CSS i JS

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="console">
    <pre class="typing">$ </pre>
  </div>
</body>
</html>

css

.typing::after {
  content: '_';
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;  
}

.typing::before {
  content: 'SYSTEM KODUJE';
  display: block;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.typing {
  color: #34d834;
}
.console {
  background: black;
  height: 200px;
  border: 3px solid silver;
  border-top-width: 20px;
  position: relative;
  padding: 10px;
  border-radius: 3px;
}

.console::after {
  content: '';
  width: 10px;
  height: 10px;
  font-size: 10px;
  position: absolute;
  top: -15px;
  left: 1px;
  border-radius: 50%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.console::before {
  content: '';
  width: 10px;
  height: 10px;
  font-size: 10px;
  position: absolute;
  top: -15px;
  left: 15px;
  border-radius: 50%;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

var typing = document.querySelector('.typing'),
    currentIndex = 0;

var startTyping = function (text) {
  
  interval = setInterval(function(){
      if (text.length > currentIndex) {
        typing.textContent += text[currentIndex];
        currentIndex++;
      } else {
        clearInterval(interval);
      } 
  },100);
}

startTyping("tekst do wyświetlenia");

Konsola w przeglądarce

Szukarka

Artykuły

Jak oceniasz tego bloga?

Archiwa

Ostatnie artykuły

Ostatnie komentarze

Tagi

Statystyki