控制台打印文字效果js插件-typed.js

当前位置:主页 > jQuery库 > 文本和超链接 > 控制台打印文字效果js插件-typed.js
控制台打印文字效果js插件-typed.js
分享:

    插件介绍

    typed.js是一款模拟控制台打印文字效果的js插件。typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-14
    阅读:
麦子学院
简要教程

typed.js是一款模拟控制台打印文字效果的js插件。typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果。

安装

可以通过bower来安装typed.js插件。

bower install typed.js              
                

使用方法

在页面中引入jquery和typed.js文件。

<script src='path/to/jquery.min.js'></script>
<script src='path/to/typed.js'></script>                  
                
HTML结构

使用一个<span>元素来作为打印控制台容器。

<span class="element"></span>              
                
初始化插件

可以通过纯js的方法来初始化type.js插件。

document.addEventListener("DOMContentLoaded", function(){
  Typed.new(".element", {
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});                  
                

也可以将typed.js作为jquery插件来使用。

$(function(){
  $(".element").typed({
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});                  
                
CSS样式

你需要使用下面的css样式来添加光标的闪烁效果。

.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; }
}
.typed-fade-out{
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}                  
                

配置参数

typed.js插件的所有可用配置参数如下:

Typed.new(".element", {
  strings: ["First sentence.", "Second sentence."],
  // Optionally use an HTML element to grab strings from (must wrap each string in a 

) stringsElement: null, // typing speed typeSpeed: 0, // time before typing starts startDelay: 0, // backspacing speed backSpeed: 0, // shuffle the strings shuffle: false, // time before backspacing backDelay: 500, // Fade out instead of backspace (must use CSS class) fadeOut: false, fadeOutClass: 'typed-fade-out', fadeOutSpeed: 500, // milliseconds // loop loop: false, // null = infinite loopCount: null, // show cursor showCursor: true, // character for cursor cursorChar: "|", // attribute to type (null == text) attr: null, // either html or text contentType: 'html', // call when done callback function callback: function() {}, // starting callback function before each string preStringTyped: function() {}, //callback for every typed string onStringTyped: function() {}, // callback for reset resetCallback: function() {} });

typed.js控制台打印文字效果js插件的egithub地址为:https://github.com/mattboldt/typed.js

网友评论