this repo has no description
Some JavaScript clean up and use a box element div for display with viewport aware height and width so text box doesn't jump during animation.
Signed-off-by: moderation <michael@sooper.org>
+16
-16
+16
-16
index.html
+16
-16
index.html
···
1
1
<!DOCTYPE html>
2
2
<html lang=en>
3
3
<head>
4
+
<meta charset=utf-8>
4
5
<style>
5
-
body { padding: 15px 0 0 30px; }
6
-
span { font-family: "Maple Mono", "TX-02", monospace; font-size: 3.0vw; }
6
+
body { padding: 0 0 0 30px; }
7
+
div { font-family: "Maple Mono", "Berkeley Mono", monospace; font-size: 3.0vw; width: 64vw; height: 4.6vw; }
7
8
</style>
8
9
<title>split</title>
9
10
</head>
10
11
<body>
11
-
<span id="messenger"> </span>
12
+
<div id=messenger></div>
12
13
13
14
<script>
14
15
15
-
const messengerElement = document.getElementById("messenger");
16
-
let t = "0123456789&%$#@",
17
-
// t = "0123456789&%$#@!()[]{}",
18
-
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!/",
19
-
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/",
20
-
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/.,<>~`^*-+=_|",
21
-
// s = "turbopuffer",
22
-
s = "below average heavy industries inc.",
23
-
// s = "BELOW AVERAGE HEAVY INDUSTRIES INC.",
24
-
r = s.length,
16
+
const messengerElement = document.getElementById("messenger"),
17
+
s = "below average heavy industries inc.";
18
+
// s = "BELOW AVERAGE HEAVY INDUSTRIES INC.";
19
+
t = "0123456789&%$#@",
20
+
// t = "0123456789&%$#@!()[]{}";
21
+
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!/";
22
+
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/";
23
+
// t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&%$#@!()[]{}/.,<>~`^*-+=_|";
24
+
u = s.length;
25
+
let l = 0,
25
26
a = 0,
26
-
l = 0,
27
27
i = "";
28
28
(function o(c) {
29
29
setTimeout(function() {
30
30
--c && o(c);
31
31
(function() {
32
32
const randomChars = [];
33
-
for (let d = 0; d < r - l; d++) {
33
+
for (let d = 0; d < u - l; d++) {
34
34
let e = Math.floor(t.length * Math.random());
35
35
randomChars.push(t.charAt(e));
36
36
}
···
45
45
})();
46
46
a += 1;
47
47
}, 16); // ms - roughly 60fps
48
-
})(5 * r + 1);
48
+
})(5 * u + 1);
49
49
50
50
</script>
51
51