最牛的打字效果JS插件 typing.js

最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑。需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML。苦思猛想数小时后,果断用动态生成DOM的方法实现了整个效果。

typing.js的打印效果甚至能够支持表格、按钮、表单,只要你页面能够呈现出来的,都可以以一种动态输出的感觉打印出来! 强烈推荐观看完整DEMO

我在网上查了一下,应该目前是没有一个插件是和typing.js效果一致的!

typing.js使用非常简单,在页面底部或者Ready事件中执行相关代码。

<script>
  var typing = new Typing({
    source: document.getElementById(source),
    output: document.getElementById(output),
    delay: 80
  });
  typing.start();
</script>

 

DEMO

|

在优化代码后,已经放在github上,并建立了相关项目页面。

项目主页: http://coffeedeveloper.github.io/typing.js/
完整DEMO:http://coffeedeveloper.github.io/typing.js/demo.html
带闪烁效果的代码书写DEMO:http://coffeedeveloper.github.io/typing.js/demo2.html

 

后期完成这个插件的2.0版本后,我将会将在这个插件上用到的一些相关技术点和思路整理成一篇博文,敬请期待^_^ 

 

如果你觉得这个插件有意思的话。可以点个赞给我或者在github项目上star一个,对我是莫大的鼓励与帮助!

最牛的打字效果JS插件 typing.js,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。