ScrambleText

gsap.registerPlugin(ScrambleTextPlugin) 

gsap.to(element, {
  duration: 1, 
  scrambleText: "THIS IS NEW TEXT"
});

描述​

使用随机字符对 DOM 元素中的文本进行打乱（默认为大写字符，但您可以定义小写字符或一组自定义字符），在一定时间间隔内不断刷新这些随机字符，同时在整个补间过程中逐渐显示您的新文本（或原始文本）（默认从左到右）。视觉效果看起来就像计算机在解码一串文本。非常适合悬停效果。

配置对象​

您可以直接传递一个字符串作为scrambleText，它将使用默认设置来展示文本，或者您可以通过使用包含以下任一属性的通用对象来自定义设置：

属性

描述

• text

  字符串- 应替换 DOM 元素中现有文本的内容。如果省略（或者设为"{original}"），则会使用原始文本。

• chars

  字符串- 随机插入到文本打乱部分中的字符。您可以使用"upperCase", "lowerCase", "upperAndLowerCase"，或者一个自定义字符字符串，例如"XO"或者"TMOWACB"，或者"jompaWB!^"等。默认值："upperCase".

• tweenLength

  Boolean- 如果替换后的文本长度不同于原始文本，则差值将会逐渐过渡，以防止长度突然变化。例如，如果原始文本是 50 个字符，而替换文本是 100 个字符，在补间过程中字符数将从 50 逐渐增加到 100，而不是立即跳转到 100。但是如果您希望立即跳转，请设置tweenLength设置为false。默认值：true.

• revealDelay

  数字- 如果您希望推迟新文本的显示（解密）过程，让打乱的文本完全可见一段时间后才开始展示，请使用 revealDelay 来定义揭示开始前需要等待的时间。例如，如果补间持续时间为 3 秒，但您希望在补间的前 1 秒内始终显示打乱的文本，则可以将revealDelay设置为1。默认值：0.

• newClass

  字符串- 如果您希望新文本应用某个特定类名（使用标签将其包裹），请使用newClass: "YOUR_CLASS_NAME"。这样可以方便地为新文本创建独特的外观。默认值：null.

• oldClass

  字符串- 如果您希望为原始文本应用某个特定类名（使用标签将其包裹），请使用oldClass: "YOUR_CLASS_NAME"。这样可以方便地为旧文本创建独特的外观。默认值：null.

• speed

  数字- 控制打乱字符的刷新频率。默认值为1，但您也可以通过设置如0.2这样的值来降低刷新速度（或其他数字）。默认值：1.

• delimiter

  字符串- 默认情况下，每个字符逐个替换，但如果您希望按单词逐步显示，可以将分隔符设为" "（空格）。默认值："".

• rightToLeft

  Boolean- 如果true文本将从右向左显示。默认值：false.

用法​

//use the defaults
gsap.to(element, {duration: 1, scrambleText: "THIS IS NEW TEXT"});//or customize things:

gsap.to(element, {
  duration: 1, 
  scrambleText: {
    text: "THIS IS NEW TEXT", 
    chars: "XO", 
    revealDelay: 0.5, 
    speed: 0.3, 
    newClass: "myClass"
  }
});

示例演示​

查看完整系列的文本动画演示在 CodePen 上。