当前位置:主页 > JavsScript库 > 动画 >

通过动画实现文本加载效果 - letterloading.js
栏目分类:动画   发布日期:2021-08-17   浏览次数:

letterloading.js 是一个普通的 JavaScript 库,通过对文本字符串数组进行动画处理来模拟文本加载效果。

也可用于创建类似打字机的文本输入效果或创建文本旋转器,其中文本逐字符键入。

letterloading.js使用:

1. 使用 NPM 安装包并将其letterloading作为 ES 模块导入。

# NPM
$ npm i letterloading --save
import LetterLoading from 'letterloading';

2. 或者letterloading.js在文档中包含脚本。

<script src="library/letterloading.js"></script>

3. 初始化库并在您指定的容器中定义要动画化的字符串数组。

new LetterLoading('#myContainer', {
    strings: [
      "内容 1",
      "内容 2",
      "内容 3"
    ],
});

4. 设置动画速度。默认值:9。

new LetterLoading('#myContainer', {
    loadspeed: 8
});

5. 设置动画开始前的等待时间。默认值:2500 毫秒。

new LetterLoading('#myContainer', {
    delay: 3000
});

6. 判断是否循环播放动画。默认值:true。

new LetterLoading('#myContainer', {
    loop: false
});

7. 判断是否以随机顺序打印字符串。默认值:true

new LetterLoading('#myContainer', {
    randomizeEl: false
});

8. 在显示之前隐藏并用自定义字符替换您的文本。

new LetterLoading('#myContainer', {
    char: "***",
    hideChaar: false
});

9、设置光标类型:line | block | underscore

new LetterLoading('#myContainer', {
    cursorType: "line"
});

10. 确定是否启用光标。

new LetterLoading('#myContainer', {
    cursor: true
});

11. 确定字母加载模拟:Liga 或 Typed。

new LetterLoading('#myContainer', {
    simulate: "typed"
});



官方网站:https://github.com/kelvinsekx/letterloading

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