-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (131 loc) · 5.94 KB
/
index.html
File metadata and controls
164 lines (131 loc) · 5.94 KB
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!-----------------------------------------------------------------
textBobber visual novel typewriter plugin
Designed and developed by HT / @ht-devx
__ __ ______ ______ ______ __
/\ \_\ \ /\__ _\ /\__ _\ /\ __ \ /\ \
\ \ __ \ \/_/\ \/ \/_/\ \/ \ \ __ \ \ \ \
\ \_\ \_\ \ \_\ \ \_\ \ \_\ \_\ \ \_\
\/_/\/_/ \/_/ \/_/ \/_/\/_/ \/_/
INITIAL REL.: 2024-08-23
LAST UPDT.: 2025-02-12
------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[DEMO] textBobber (@ht-devx)</title>
<meta name="author" content="@ht-devx">
<meta name="keywords" content="otome,otome text,visual novel,visual novel text,visual novel type,otome type,typewriter,typewriter effect,typewriter plugin,typewriter javascript,typewriter javascript plugin,textbobber,textBobber,text bobber,text-bobber">
<link rel="shortcut icon" href="./favicon.png"/>
<link href="https://fonts.googleapis.com/css2?family=Onest:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://unpkg.com/@phosphor-icons/web@latest/src/bold/style.css" rel="stylesheet" crossorigin>
<link href="https://unpkg.com/@phosphor-icons/web@latest/src/fill/style.css" rel="stylesheet" crossorigin>
<script src="https://popify.gitlab.io/i/popup.js" crossorigin></script>
<!-- essential textBobber files -->
<script src="./v3/init.min.js"></script>
<!-- demo use only -->
<link href="https://text-bobber.gitlab.io/t/demo/vars.css" rel="stylesheet" crossorigin>
<link href="https://text-bobber.gitlab.io/t/demo/style.css" rel="stylesheet" crossorigin>
<script src="https://text-bobber.gitlab.io/t/demo/script.js" crossorigin></script>
<script>
textBobber({
wrapper: ".speech-container",
initialDelay: "0.4s",
textContainer: ".all-texts",
textSelectors: ".one-text",
textSelectorsFadeSpeed: "0.3s",
characterDelay: "0.06s",
characterAnimationSpeed: "0.15s",
nextButton: ".next-arrow",
nextButtonAnimationSpeed: "0.3s",
height: "tall",
loop: false
})
</script>
<style>
.speech-container {
display:none;
}
.speech-container.ready {
display:block;
}
[text-bobber-chara]:not([text-bobber-whitespace]){
display:inline-block;
transform:translateY(-2px);
}
[text-bobber-chara]:not([text-bobber-whitespace]).bob-it {
transform:none;
transition:all var(--Text-Bobber-Animation-Speed) ease-in-out;
}
[text-bobber-chara].show {
transform:none;
}
</style>
</head>
<body>
<div class="whbbr">
<div class="rrxke">
<div class="wejgr">
<div class="atjqv">
<main>
<div class="heading-flex">
<h3>Lorem ipsum says:</h3>
<img class="userpic" src="https://text-bobber.gitlab.io/t/user_sketch.png" alt="Torso sketch of a user with long hair wearing a fluffy jacket"/>
</div>
<div class="speech-container">
<div class="all-texts">
<div class="one-text">
<p><b>One,</b> don't pick up the phone.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat tristique enim, sed aliquam odio euismod id. Nam tempor, leo nec luctus bibendum, eros metus semper eros, sed consequat dolor nunc eget nulla.</p>
</div>
<div class="one-text">
<p><b>Two,</b> don't let him in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id cursus est. Quisque sit amet varius ipsum. Proin id massa luctus nisl suscipit mollis. Nulla et tincidunt metus, id hendrerit velit.</p>
</div>
<div class="one-text">
<p><b>Three,</b> don't be his friend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu facilisis magna. Fusce egestas nisi at quam hendrerit feugiat. Curabitur commodo, quam sed blandit tempor, metus ex lobortis neque, sed pulvinar tortor lorem nec dui.</p>
</div>
</div><!--end all-texts-->
<div class="align-right">
<div class="next-arrow">
<i class="ph-fill ph-caret-right" aria-label="Next arrow"></i>
</div>
</div>
</div><!--end speech-container-->
</main>
</div><!--end container [1/4]-->
</div><!--end container [2/4]-->
</div><!--end container [3/4]-->
</div><!--end container [4/4]-->
<div class="crd">
<button>
<i class="ph-bold ph-gear-six"></i>
</button>
</div>
<div class="popup" hidden>
<div class="popup-box">
<h5>Credits & Resources used:</h5>
<ul>
<li>femme user sketch by Freepik [<a href="https://www.freepik.com/free-vector/_4940212.htm">x</a>]</li>
<li>{ font } <b>Onest</b> via Google Fonts [<a href="https://fonts.google.com/specimen/Onest">x</a>]</li>
<li>{ font } <b>Wanted Sans</b> by wanteddev [<a href="https://github.com/wanteddev/wanted-sans">x</a>]</li>
<li><b>Phosphor Icons</b> [<a href="https://phosphoricons.com/">x</a>]</li>
<li>favicon by SyafriStudio [<a href="https://www.flaticon.com/free-icon/decrease-font_14253704">x</a>]</li>
</ul>
<button class="close-popup">
<i class="ph-bold ph-x"></i>
</button>
</div>
</div>
<div class="ht">
<div class="ht-i">
<a href="https://github.com/ht-devx">
<span>@ ht<span class="dash">-</span>devx</span>
<i class="ph-bold ph-heart"></i>
</a>
</div>
</div>
</body>
</html>