文本/链接
超逼真的控制台打字jQuery特效
PetitQ
typewriting 是一款可以制作超逼真控制台打字特效的 jQuery 插件。该插件使用简单，你可以设置任何你想打印输入的文字内内容，可以设置打字速度和光标闪烁的频率等。
HTML 结构：
该打字特效的 HTML 结构使用一个空的[div]来制作即可。
也想出现在这里？联系我们吧
<div class="terminal"></div>
CSS 样式：
为了效果更加逼真，你可以为这个打字效果添加一些 CSS 样式。
body {width: 100%;
margin: 0px;
font-family: 'Helvetica Neue';
background-color: #020202;
}.terminal {
width: 60%;
font-size: 26px;
color: #00fd55;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 20%;
}.terminal::before {
content: ">";
margin-right: 10px;
}
JAVASCRIPT 代码：
在页面 DOM 元素加载完毕之后可以通过下面的方法来初始化该控制台打字特效插件。
$('.terminal').typewriting( "Hello World!", {
// default: 150"typing_interval": 200,
// default: 0.7s"blink_interval": "1s",
// default: black"cursor_color": "#00fd55"
}
配置参数：
typewriting() 该打字特效的第一个参数是你想要输出的文字。
第二个参数有下面的一些选项：
typing_interval：打字的速度
blink_interval：光标闪烁的速度
cursor_color：光标的颜色
第三个参数是打字效果完成之后的回调函数：
$('.string').typewriting( "Text here", {
"typing_interval": 300,
"blink_interval": "1.5s"
"cursor_color": "white"
}, function() {
console.log( "End." );
});
rewrite():
这个方法可以在同一个元素重写不同的文字。
$('.string').rewrite( "Another text here", function() {
console.log( "End, 2." );
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
