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

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

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

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

在优化代码后,已经放在github上,并建立了相关项目页面。
项目主页: [typing.js](http://coffeedeveloper.github.io/typing.js/)
完整DEMO:[demo](http://coffeedeveloper.github.io/typing.js/demo.html)
带闪烁效果的代码书写DEMO:[demo2](http://coffeedeveloper.github.io/typing.js/demo2.html)

如果你觉得这个插件有意思的话。可以在github项目上star一个,对我是莫大的鼓励与帮助!
9083 次点击
所在节点    JavaScript
22 条回复
wdlth
2014-07-18 22:14:16 +08:00
画面太美不敢用啊。
loddit
2014-07-18 22:19:02 +08:00
这个东西的应用场景是什么呢?
yreenchan
2014-07-18 22:22:47 +08:00
@loddit 装逼神器啊!!
jprovim
2014-07-18 22:25:04 +08:00
@loddit Presentation特效.
qige023
2014-07-18 22:44:56 +08:00
轻轻地Star了一下
Biwood
2014-07-18 22:47:37 +08:00
曾经在某编程教学的网站上看到过,我尝试做过,想模拟键盘事件,但是貌似js没有那样的接口
izoabr
2014-07-18 23:31:39 +08:00
@yreenchan 比如说某黑客黑掉别人网站,然后用这个显示"hacked by xxx"不觉得炫酷狂霸拽嘛?
shishirui
2014-07-18 23:40:47 +08:00
好东西,收藏
xbonline
2014-07-19 00:10:24 +08:00
00年代刚上网那会儿经常见到这种typing效果
hzlzh
2014-07-19 00:12:11 +08:00
准备把demo2的特效给我的
http://dai.ma/
加上
hzlzh
2014-07-19 00:15:06 +08:00
不过闪烁光标的样式还是喜欢我目前的下划线那样。
GitFree
2014-07-19 00:22:10 +08:00
@hzlzh 神域名!
g0thic
2014-07-19 08:48:27 +08:00
@hzlzh 大哥你的个性域名真多
lagramoon
2014-07-19 10:05:15 +08:00
效果不错!支持!
v5ke
2014-07-19 10:19:25 +08:00
好像可以装逼的样子~
ccbikai
2014-07-19 12:00:46 +08:00
os.io 你的域名吗?
wezzard
2014-07-19 12:48:12 +08:00
00年代刚上网那会儿经常见到这种typing效果 +1
WarWithinMe
2014-07-19 14:17:31 +08:00
“最牛”算是标题党?
另附一个typer lib
http://fardjad.github.io/realistic-typewriter.js/
yreenchan
2014-07-19 17:38:48 +08:00
@izoabr 那绝对是的!
asmore
2014-07-19 18:16:10 +08:00
不错

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/123393

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX