使用typed.js来给你的网页添加打字效果吧

使用typed.js来给你的网页添加打字效果吧

typed.js官网看这JavaScript Animated Typing with Typed.js | by Matt Boldt

typed.js

先看看效果:

右侧公告栏也是同样的方法

使用指北：

先在head或body里引入js

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

然后再创建一个自己的js文件，输入以下代码

var typed = new Typed('#hello-world', {  
  strings: ['Hello World!']  
});

在引入typed.js的cdn后面引入你的js文件

再在html里输入

<span id="hello-world"></span>

你就可以看到你的打字效果了

这里必须要span，如果是div的话光标会显示不正常，跑文字下一行去

当然这只是最基本的用法，你还可以在js里添加一些自定义的

如将strings替换为

  strings: [  
    '你猜这些是啥！',
    '你该干些啥！',
    '用你自己的!',
    '我去！',
  ],

并添加循环：

  loop: true,  
  loopCount: Infinity,

同时你可以在string中的文字里加上 ^3000 来让打字效果在此延迟3000毫秒再继续

如

  strings: [  
    '你猜这些^3000是啥！',
    '你该^5000干些啥！',
    '用你^2000自己的!',
    '我去^3000！',
  ],

它就会无限循环打字这几行文字

还可以设置打字速度，回溯速度

  typeSpeed: 100,  
  backSpeed: 50,

typed.js自带很多可自定义的

在GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library

里可以看到所有可以的自定义项

var typed = new Typed('#element', {  
  /**  
   * @property {array} strings strings to be typed  
   * @property {string} stringsElement ID of element containing string children  
   */  
  strings: [  
    'These are the default values...',
    'You know what you should do?',
    'Use your own!',
    'Have a great day!',
  ],  
  stringsElement: null,  

  /**  
   * @property {number} typeSpeed type speed in milliseconds  
   */  
  typeSpeed: 0,  

  /**  
   * @property {number} startDelay time before typing starts in milliseconds  
   */  
  startDelay: 0,  

  /**  
   * @property {number} backSpeed backspacing speed in milliseconds  
   */  
  backSpeed: 0,  

  /**  
   * @property {boolean} smartBackspace only backspace what doesn't match the previous string  
   */  
  smartBackspace: true,  

  /**  
   * @property {boolean} shuffle shuffle the strings  
   */  
  shuffle: false,  

  /**  
   * @property {number} backDelay time before backspacing in milliseconds  
   */  
  backDelay: 700,  

  /**  
   * @property {boolean} fadeOut Fade out instead of backspace  
   * @property {string} fadeOutClass css class for fade animation  
   * @property {boolean} fadeOutDelay Fade out delay in milliseconds  
   */  
  fadeOut: false,  
  fadeOutClass: 'typed-fade-out',  
  fadeOutDelay: 500,  

  /**  
   * @property {boolean} loop loop strings  
   * @property {number} loopCount amount of loops  
   */  
  loop: false,  
  loopCount: Infinity,  

  /**  
   * @property {boolean} showCursor show cursor  
   * @property {string} cursorChar character for cursor  
   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>  
   */  
  showCursor: true,  
  cursorChar: '|',  
  autoInsertCss: true,  

  /**  
   * @property {string} attr attribute for typing  
   * Ex: input placeholder, value, or just HTML text  
   */  
  attr: null,  

  /**  
   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input  
   */  
  bindInputFocusEvents: false,  

  /**  
   * @property {string} contentType 'html' or 'null' for plaintext  
   */  
  contentType: 'html',  

  /**  
   * Before it begins typing  
   * @param {Typed} self  
   */  
  onBegin: (self) => {},  

  /**  
   * All typing is complete  
   * @param {Typed} self  
   */  
  onComplete: (self) => {},  

  /**  
   * Before each string is typed  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  preStringTyped: (arrayPos, self) => {},  

  /**  
   * After each string is typed  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  onStringTyped: (arrayPos, self) => {},  

  /**  
   * During looping, after last string is typed  
   * @param {Typed} self  
   */  
  onLastStringBackspaced: (self) => {},  

  /**  
   * Typing has been stopped  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  onTypingPaused: (arrayPos, self) => {},  

  /**  
   * Typing has been started after being stopped  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  onTypingResumed: (arrayPos, self) => {},  

  /**  
   * After reset  
   * @param {Typed} self  
   */  
  onReset: (self) => {},  

  /**  
   * After stop  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  onStop: (arrayPos, self) => {},  

  /**  
   * After start  
   * @param {number} arrayPos  
   * @param {Typed} self  
   */  
  onStart: (arrayPos, self) => {},  

  /**  
   * After destroy  
   * @param {Typed} self  
   */  
  onDestroy: (self) => {},  
});

一些有趣的

butterfly主题的话，主页副标题就使用了这个打字库

所以如果你不引入它的cdn的话，在主页里也会正常显示

这样就做了一个只会出现在主页的打字特效了！

版权信息