V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
coffeedeveloper
V2EX  ›  JavaScript

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

  •  
  •   coffeedeveloper · 2014-07-18 22:09:26 +08:00 · 9049 次点击
    这是一个创建于 3779 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑。需要支持语法高亮,并不能直接简单的用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一个,对我是莫大的鼓励与帮助!
    22 条回复    2014-07-29 05:55:36 +08:00
    wdlth
        1
    wdlth  
       2014-07-18 22:14:16 +08:00
    画面太美不敢用啊。
    loddit
        2
    loddit  
       2014-07-18 22:19:02 +08:00
    这个东西的应用场景是什么呢?
    yreenchan
        3
    yreenchan  
       2014-07-18 22:22:47 +08:00
    @loddit 装逼神器啊!!
    jprovim
        4
    jprovim  
       2014-07-18 22:25:04 +08:00
    @loddit Presentation特效.
    qige023
        5
    qige023  
       2014-07-18 22:44:56 +08:00
    轻轻地Star了一下
    Biwood
        6
    Biwood  
       2014-07-18 22:47:37 +08:00
    曾经在某编程教学的网站上看到过,我尝试做过,想模拟键盘事件,但是貌似js没有那样的接口
    izoabr
        7
    izoabr  
       2014-07-18 23:31:39 +08:00
    @yreenchan 比如说某黑客黑掉别人网站,然后用这个显示"hacked by xxx"不觉得炫酷狂霸拽嘛?
    shishirui
        8
    shishirui  
       2014-07-18 23:40:47 +08:00
    好东西,收藏
    xbonline
        9
    xbonline  
       2014-07-19 00:10:24 +08:00
    00年代刚上网那会儿经常见到这种typing效果
    hzlzh
        10
    hzlzh  
       2014-07-19 00:12:11 +08:00
    准备把demo2的特效给我的
    http://dai.ma/
    加上
    hzlzh
        11
    hzlzh  
       2014-07-19 00:15:06 +08:00
    不过闪烁光标的样式还是喜欢我目前的下划线那样。
    GitFree
        12
    GitFree  
       2014-07-19 00:22:10 +08:00 via Android
    @hzlzh 神域名!
    g0thic
        13
    g0thic  
       2014-07-19 08:48:27 +08:00
    @hzlzh 大哥你的个性域名真多
    lagramoon
        14
    lagramoon  
       2014-07-19 10:05:15 +08:00
    效果不错!支持!
    v5ke
        15
    v5ke  
       2014-07-19 10:19:25 +08:00
    好像可以装逼的样子~
    ccbikai
        16
    ccbikai  
       2014-07-19 12:00:46 +08:00
    os.io 你的域名吗?
    wezzard
        17
    wezzard  
       2014-07-19 12:48:12 +08:00
    00年代刚上网那会儿经常见到这种typing效果 +1
    WarWithinMe
        18
    WarWithinMe  
       2014-07-19 14:17:31 +08:00
    “最牛”算是标题党?
    另附一个typer lib
    http://fardjad.github.io/realistic-typewriter.js/
    yreenchan
        19
    yreenchan  
       2014-07-19 17:38:48 +08:00
    @izoabr 那绝对是的!
    asmore
        20
    asmore  
       2014-07-19 18:16:10 +08:00
    不错
    Fulminit
        21
    Fulminit  
       2014-07-19 21:27:01 +08:00
    Mark一个。顺便来围观域名。
    yyx990803
        22
    yyx990803  
       2014-07-29 05:55:36 +08:00
    给个建议啊,现在字是按固定间隔出现的,感觉很生硬,不像是人打字。同事做过个类似项目用的是 perlin noise 来产生随机但顺滑的打字间隔。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1978 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 00:01 · PVG 08:01 · LAX 16:01 · JFK 19:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.