jQuery打字特效插件typeit.js

一款jQuery打字特效插件typeit.js，页面的最上面有一个打字的demo效果，下面有可以设置不同参数后查看的打字效果，另外有几个页面插入特效的相关代码。

分类：文字特效 > 文字动画难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面所需的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="dist/typeit.min.css">
<link type="text/css" rel="stylesheet" href="src/style.css">

页面的body部分，包含了多个演示效果，这里仅贴出部分代码：

<a name="top"></a>
<header>
<h1 class="main-header">TypeIt</h1>
<hr>
<span class="typeit-box"></span>
</header>
<div class="container">
<section>
  <form id="TIInput">
	<h2 class="ti-header">Try it!</h2>
	<span class="info">Tweak the settings (optional), enter at least one string, and watch it go!</span>
	<div class="options-holder">
	  <div class="ti-option-box">
		<label>Type Speed</labeL>
		<input class="ti-option" type="number" id="iTypeSpeed" placeholder="typeSpeed">
	  </div>
	  <div class="ti-option-box">
		<label>Life-Like</labeL>
		<select class="ti-option" id="iLifeLike">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Show Cursor</labeL>
		<select class="ti-option" id="iShowCursor">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Break Lines</labeL>
		<select class="ti-option" id="iBreakLines">
		  <option value="true" selected>True</option>
		  <option value="false">False</option>
		</select>
	  </div>
	  <div class="ti-option-box">
		<label>Break Wait</labeL>
		<input class="ti-option" type="number" id="iBreakWait" placeholder="breakWait">
	  </div>
	  <div class="ti-option-box">
		<label>Delay Start</labeL>
		<input class="ti-option" type="number" id="iDelayStart" placeholder="breakStart">
	  </div>
	  <a href="#options" class="settings-link">Wait, what do these settings actually do?</a>
	  <textarea rows="3" id="stringTI" placeholder="Enter one or multiple strings per line here."></textarea>
	</div>
	<input type="submit" id="TISubmit" value="Type it!">
  </form>
  <div class="ti-output-box">
	<div id="TIOutput">
	  <span class="temp-text">output box</span>
	</div>
  </div>
  <a id="scrollTo"></a>
</section>

页面的底部，需引入jQuery库和两个必要的JS文件，代码如下：

<script type="text/javascript" src="src/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="dist/typeit.min.js"></script>
<script type="text/javascript" src="src/scripts.min.js"></script>