typed.js是一款模拟控制台打印文字效果的js插件。typed.js可以自由的控制要打印的文字，以及打印的速度等，可以制作出逼真的打印文字效果。
安装
可以通过bower来安装typed.js插件。
bower install typed.js
使用方法
在页面中引入jquery和typed.js文件。
HTML结构
使用一个元素来作为打印控制台容器。
初始化插件
可以通过纯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() {}
});
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/178212.html原文链接：https://javaforall.net
