当前位置:主页 > JavsScript库 > 文本 >

JavaScript中的简单打字机效果 - TypewriterJS
栏目分类:文本   发布日期:2021-09-18   浏览次数:

TypewriterJS 是一个原生 javascript 插件,可用于在网站上创建优雅的自动打字机动画效果。

使用:

在结束正文标记之前加载主 JS 文件 typewriter.js。

<script src="typewriter.js"></script>

创建占位符元素:

<div id="demo"></div>

在元素上初始化库并指定要键入的字符串数组。

var demo = document.getElementById('demo');
 
var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type']
});

可用的 API 方法来控制打字动画。

// 开始打字动画
typewriter.start() 
 
// 停止动画
typewriter.stop() 
 
// 暂停时间以毫秒为单位
typewriter.pauseFor(ms) 
 
// 输入字符串
typewriter.typeString(string) 
 
// Paste输出字符串
typewriter.pasteString(string) 
 
// 删除所有字符串
typewriter.deleteAll() 
 
// 删除一定数量的字符
typewriter.deleteChars(number) 
 
// 回调
typewriter.callFunction(cb); 
 
// 改变删除速度
typewriter.changeDeleteSpeed(speed); 
 
// 改变延迟
typewriter.changeDelay(delay);

用于自定义打字动画的所有配置选项。

var typewriter = new Typewriter(demo, {
    strings: ['Strings', 'To', 'Type'],
    cursor: '|',
    delay: 'natural', // 'natural' or Number
    loop: false, // infinite loop
    autoStart: false,
    devMode: false,
    wrapperClassName: 'Typewriter__wrapper',
    cursorClassName: 'Typewriter__cursor',
});

官方网站:https://github.com/tameemsafi/typewriterjs

相关热词: typewriterjs文字动画

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库