-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
149 lines (142 loc) · 4.76 KB
/
index.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fetch every single letter|...who told you not to fetch?</title>
<script src="./library/letterloading.js" type="text/javascript"></script>
<script src="./assets/demo.js"></script>
<link rel="stylesheet" href="./public/styles.css">
</head>
<body>
<div id="container">
<header>
<h1>LetterLoading</h1>
</header>
<section class="paleteContainer">
<h2>Default Letter Loading Simulation (loop is set to true by default )</h2>
<div class="loadingPalete"><span id="main"></span></div>
<p>
<pre>
var letter = new LetterLoading.Liga('#main', {
loadspeed: 5,
randomizeEl : false
});
</pre>
</p>
</section>
<section class="paleteContainer">
<h2> Twick LetterLoading to behave like typed js with even more swag, set cursorType</h2>
<div class="loadingPalete"><span id="main3"></span></div>
<p>
<pre>
var letter2 = new LetterLoading.Typed('#main2', {
strings: [
"You're lovely... yes you are",
"This is an example string",
"tell me about what more animation you love",
"Lastly, Hey, if you're Bukunmi, I love you"
],
// set loop to false;
loop : false,
loadspeed: 5
});
</pre>
</p>
</section>
<section class="paleteContainer">
<h2> Letterloading cursorType can be set to <b>line, block or underscore</b>. see line example</h2>
<div class="loadingPalete"><span id="main6"></span></div>
<p>
<pre>
var letter6 = new LetterLoading('#main6', {
strings: [
"You're lovely... yes you are",
"This is an example string",
"tell me about what more animation you love",
"Lastly, Hey, if you're Bukunmi, I love you"
],
loadspeed: 2,
cursor: true,
simulate: "typed",
// cursorType is set to line
cursorType: "line"
});
</pre>
</p>
</section>
<section class="paleteContainer">
<h2> Letter Loading Loop set to false</h2>
<div class="loadingPalete"><span id="main2"></span></div>
<p>
<pre>
var letter2 = new LetterLoading('#main2', {
strings: [
"You're lovely... yes you are",
"This is an example string",
"tell me about what more animation you love",
"Lastly, Hey, if you're Bukunmi, I love you"
],
// set loop to false;
loop : false,
loadspeed: 5
});
</pre>
</p>
</section>
<section class="paleteContainer">
<h2> You can make your char visible even</h2>
<div class="loadingPalete"><span id="main4"></span></div>
<p>
<pre>
var letter4 = new LetterLoading('#main4', {
strings: [
"You're lovely... yes you are",
"This is an example string",
"tell me about what more animation you love",
"Lastly, Hey, if you're Bukunmi, I love you"
],
loadspeed: 3,
randomizeEl: false,
// this makes your char visible
hideChaar: false,
//...
char: "*",
});
</pre>
</p>
</section>
<section class="paleteContainer">
<h2> Check out</h2>
<div class="loadingPalete_spec"><span id="main5"></span></div>
<p>
<pre>
var letter4 = new LetterLoading('#main5', {
strings: [
"Do this...",
"..with cautions",
],
loadspeed: 3,
// this makes your char visible
hideChaar: false,
//.replace character with whatever you find beautiful
char: " (* *) ",
});
</pre>
</p>
</section>
<footer>
<p>LetterLoading is brought to you by <a href="https://www.github.com/kelvinsekx">kelvinsekx</a></p>
</footer>
<!-- <div id="tello"></div> -->
<!--
<script>
const tello = document.getElementById("tello");
const node = document.createElement("span")
node.textContent="hell"
tello.insertBefore(node, tello.nextSibling)
console.log(tello)
</script> -->
</div>
</body>
</html>