下面，就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果，最简单实用的方法（鉴于代码量较小，就内嵌在一个HTML文件中了）：
首先，我们要在header导入一个jQuery，并新建一个CSS标签，在body部分建立一个外层的div，取一个ID，里面再建立一个内层的div，取一个ID，内层div里，新建一个h1标签和一个p标签，将您显示的文字放到里面，示例代码如下:
<div id="table">
<div id="centeralign">
<h1 id="h1">Sample typing effect.</h1>
<p>Lorem ipsum dolor sit amet 放入您的文字</p>
</div>
</div>
下面，在CSS标签中修改body部分的布局样式，小博使用了简单有效的弹性布局来实现的，效果图及代码如下：
代码如下，注意布局完成之后要先将p标签none掉:
<style type="text/css">
body,
html {
margin:;
height: 100%; font-family: 'Oxygen Mono', monospace;
color: #999;
} #table { width: 100%;
height: 100%;
background-color: #e5e5e5;
} #centeralign {
width: 100%;
height: 100%;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
#centeralign h1 {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1pt;
font-size: 30pt;
margin-bottom: 15px;
} #centeralign p {
text-align: left;
margin:;
text-transform: lowercase;
font-size: 10pt;
font-weight:;
width: 50%;
display: none;
}
</style>
接下来在body的里面，新建一个JS标签，利用定时器和延时器来实现banner中的文字动画效果:
主要有两点:
1：声明一个函数，传入两个参数 元素：element ； 速度：speed。
定义：①var text = $(element).text();
②$(element).html('');
③var i = 0;
此函数取到了，全局的text，利用延时器延迟出现每个字符，但是h1标签会和
2：利用延时器，将h1和p标签，延时分别打印，即将h1标签的文字，打印完成之后，再执行p标签的打印工作；
定义：①定义 var speed = 75 (数值可以自己定义)；
② 定义一个变量 var delay = $('h1').text().length * speed ;------------取到h1打印完成的时间
③ 定义p标签的一个延时器，延时时间即为h1标签的打印完成时间，这里不要忘记把CSS中none掉的p标签，取到display，设为inline-block；
④ 将打印速度通过函数传参，分别将speed赋给h1和p标签；
JS完整代码如下：
<script>
function typeEffect(element, speed) {
var text = $(element).text();
$(element).html('');
var i = 0;
var timer = setInterval(function() {
if (i < text.length) {
$(element).append(text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, 30);
}
$(document).ready(function() {
var speed = 75;
var delay = $('h1').text().length * speed ;
typeEffect($('h1'), speed);
setTimeout(function() {
$('p').css('display', 'inline-block');
typeEffect($('p'), speed);
}, delay);
});
</script>