最简单实用的JQuery实现banner图中的text打字动画效果！！！

下面，就让小博详细介绍如何实现上面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: 0;
                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: 0;
                text-transform: lowercase;
                font-size: 10pt;
                font-weight: 900;
                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>

　那么，一个简单实用的banner图的文字动画效果，就完成了。希望各位博主，能对小博提出建议，不断完善修改，小博定当虚心修改，不断进步。