模拟文字输入动效 Auto-Text-Effect
1. 概述
项目本体模拟了文字缓慢输入的效果, 并可控制 “输入” 的速度.
本项目中涉及的知识点:
- 使用
input控件调整参数值 - 使用
.slice(start_index, end_index+1)对字符串切片
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
<body>
<h1 id="text">Starting...</h1>
<div id="ctrl">
<label for="speed">Speed: </label>
<input id="ctrl_speed" type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>
</body>
使用 flex 布局纵向排布文字本体, 速度控制提示文字和速度控制框.
3. 编写 CSS 样式
首先定义排版模式, 并设定水平垂直居中:
1
2
3
4
5
6
7
8
9
10
11
body {
background-color: #660099;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
其次设定包裹提示文字和控件的容器的样式:
1
2
3
4
5
6
7
8
#ctrl {
position: absolute;
bottom: 20px;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 18px;
color: #fff;
}
再设计控件样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
#ctrl input{
width: 50px;
padding: 5px;
font-style: 18px;
background-color: #FFCC33;
border: none;
text-align: center;
-webkit-appearance:none;
}
#ctrl input:focus {
outline: none;
}
注意此处隐藏控件输入高亮框的方式.
最后微调文字本体的排版方式和颜色:
1
2
3
4
#text {
color: #fff;
text-align: center;
}
完整的 CSS 样式表如下:
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
* {
box-sizing: border-box;
}
body {
background-color: #660099;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
#ctrl {
position: absolute;
bottom: 20px;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px 20px;
font-size: 18px;
color: #fff;
}
#ctrl input{
width: 50px;
padding: 5px;
font-style: 18px;
background-color: #FFCC33;
border: none;
text-align: center;
-webkit-appearance:none;
}
#ctrl input:focus {
outline: none;
}
#text {
color: #fff;
text-align: center;
}
4. JavaScript
最后编写 JavaScript 函数. 在此处, 我们构造一个每一次执行都只会改变文字本体一个字符长度的内容的函数, 并通过设定它执行的间隔实现对输入效果的模拟. 思考一下, 如果我们希望每次文字输入完成后停顿几秒, 又该如何实现?
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
const textEl = document.getElementById('text');
const speedEl = document.getElementById('ctrl_speed');
const text = '汝之感官\n 越次超倫\n 身手造詣\n 如日中升\n 盡在\n arcaea.lowiro.com\n';
let idx = 1;
let speed = 300 / speedEl.value;
handleTextWriting()
// the function responsible for changing the innerText of elem 'text'
// to simulate the typing effect
function handleTextWriting() {
textEl.innerText = text.slice(0, idx);
idx++;
// reset the text length if it exceeds
if (idx > text.length) {
idx = 1;
}
// keep playing the typing effect
setTimeout(handleTextWriting, speed);
}
// add an event listener to adjust the value of the variable
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
最后, 完整的网页演示可见 此处
