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

显示带有加扰效果的文本 - shuffle-letters.js
栏目分类:动画   发布日期:2021-09-14   浏览次数:

shuffle-letters.js 是一个文本动画 JavaScript 库,用于在显示之前对文本进行混洗/加扰。

使用:

1. 使用 NPM 安装并导入 shuffle-letters。

# NPM
$ npm i shuffle-letters --save
import shuffleLetters from 'shuffle-letters';

2. 或者从 CDN 加载 shuffle-letters.js。

<script src="shuffle-letters.js"></script>

3.在目标元素上初始化shuffle-letters。就是这样。

<h1>shuffle-letters.js 演示</h1>
shuffleLetters(document.querySelector('h1'));

4.您还可以将文本动画化为另一个...

shuffleLetters(document.querySelector('h1'), {
  text: '又一个标题',
});

5. 动画完成后触发一个函数。

shuffleLetters(document.querySelector('h1'), {
  onComplete: el => {
    // ...
  }
});

6. 配置加扰效果。

shuffleLetters(document.querySelector('h1'), {
 
  // 字符将被打乱的次数
  iterations: 8,
 
  // 每秒帧数
  fps: 30,
   
});

7. 清除乱码。

clearShuffleLetters()



官方网站:https://github.com/georapbox/shuffle-letters

相关热词: 文本文本效果

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