[ *** 插件]酷炫的打字机效果: Typed.js

访客4年前 (2021-02-08)黑客资讯897

文章转载与简书https://www.jianshu.com/p/37ff22decc62

typed.js效果

预览地址

Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.

1.简单介绍饮用 ***

//script标签导入<script src="./typed.js"></script>

//cdn导入
  <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>

2. 实例化对象

 <span class="37ce-222d-98f6-e11d element"></span> //目标容器

 <script>    var typed = new Typed('.element', {      strings: ["纠正一个错误的 *** 有很多", "而解决一个错误的终极 *** ，就是不给它发生的机会。"], //输入内容, 支持html标签
      typeSpeed: 100, //打字速度
      backSpeed: 50 //回退速度
    });</script>

如果想加入鼠标闪烁效果, 引入一下样式

   .typed-cursor{      opacity: 1;      -webkit-animation: blink 0.7s infinite;      -moz-animation: blink 0.7s infinite;      animation: blink 0.7s infinite;
    }
    @keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-webkit-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-moz-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }

其他配置参数

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}  *** artBackspace only backspace what doesn't match the previous string
   */
   *** artBackspace: 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',  /**
   * 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) => {}
});

Type.js官网: http://www.mattboldt.com/demos/typed-js/
Github文档地址:https://github.com/mattboldt/typed.js/
CDN地址:http://www.bootcdn.cn/typed.js/

标签: *** 实例

返回列表

上一篇：优酷会员等级V5-V7每天晚上8点抢10元话费抽实物等奖励

下一篇：怎么用ps画云朵 ps制作简单的卡通云朵教程

浏览器使用js代码快速删除微博内容

本文是分享如何用浏览器使用js代码快速删除微博内容方法步骤 1.电脑进入自己微博主页->然后右键鼠标->审核米素->点下面的 2.第二个英文“Console”...

js屏蔽F12和右键代码

//屏蔽F12和右键 function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("你...

简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

1.$.getJSON 　　$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为： $.getJSON( url, ...

浏览器网页定时刷新代码教程分享

浏览器网页定时刷新代码教程分享，只需要一段js代码首先F12打开控制器面板，复制刷新代码 timeout=prompt("Set timeout (Second):"); count=...

网站标题特效集合

js 判断页面切换时，标题改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...

js判断是否手机端，相对域名跳转到对应的m.手机站

找黑客平台