【js】文本动态打字效果

最近动态打字效果挺多的，就写了个js文件，提供了个函数调用一下就可以实现打字效果了

效果展示

有三种效果，1.匀速打字和删除，2.开始和结尾时停顿，3.每到换行停顿一下

使用

1. 设置一个html容器，一般使用pre标签作为容器，将打印字符放置到其中

   <pre>
   function main() {
       <div class="codetypewriter"></div>
   }
   </pre>
   

2. 引入CodeTypewriter.js文件，导入该文件后将会获得一个构造函数CodeTypewriter

   new CodeTypewriter({
       element: document.querySelector(".codetypewriter"),//html容器
       data: "\tcout << \"Hello World\";\n\treturn 0;",//内容字符串
       animation: "lineFeed", //动画样式line | both | lineFeed
       cursor: "vertical" //光标样式 transverse | vertical
       time: 200 // 打印每个字符的时间
   }).init();
   

   • cursor

   

   • animation
     有三种效果，1.匀速打字和删除，2.开始和结尾时停顿，3.每到换行停顿一下
     

3. 使用new关键字构造一个对象并调用init方法即可

js文件下载

GitHub.
CSDN下载.