为你的作品集创建炫酷的打字动画

许多网站，尤其是作品集，都使用了很酷的打字效果。这是在网站上自我介绍的好方法。使用强大的 Greensock 库，实现起来非常简单。

那么，让我们开始吧！我创建了一个空白的 Codepen，只包含 Greensock 库作为依赖项。强烈建议您跟着我一起操作。文章末尾会附上完整的 Codepen。

让我们开始吧

让我们创建一些文本，我将要使用的文本Hello, my name is Paul Ryan放入 Codepen 中的 HTML 块中并将其放在两个p标签之间。

<p class="text-description type-me">Hi, my name is Paul Ryan</p>

type-me我们还给它赋予了和一类text-description。

让我们添加一些样式，让我们的文本看起来更好一些。

body {
    display: flex;
    justify-content: center;
    font-family: Courier;
}

.text-description {
  width: 870px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 3.8em;
}

上面的内容width非常重要，因为这是我们在执行 JavaScript 时动画的最大长度。我基本上只是将 设置width为与一行文本长度匹配的值。当我们进入 JavaScript 部分时，这会更有意义。

让我们添加 JavaScript，我们要做的第一件事是创建一个新的实例TimelineMax

const tl = new TimelineMax()

让我们使用我们的tl来创建动画。

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "870px", /* same as text-description width*/
}, 0);

因此上面只是说以类为目标type-me并将其宽度设置为0并将宽度设置为动画870px并将持续时间设置为5秒。

由此得出以下内容。

这没问题，但并没有完全满足我们的需求。我们需要使用SteppedEaseGreensock 提供的动画效果，它能提供更丰富的步进动画效果。

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "870px", /* same as text-description width */
  ease:  SteppedEase.config(24)
}, 0); 

我们传递值config的方法，因为这就是我们的字符串中有多少个字符。SteppedEase24

这给了我们想要的打字动画，如下所示。

瞧，这就是您创建打字效果/动画的方式。

这是完整笔的链接。

希望你喜欢这篇文章，它能让你更清楚地了解情况。我经常在 Instagram 上发布我正在做的事情和正在创作的内容，所以一定要关注我。我正在尝试在 Instagram 上发布更多科技内容，还有谁厌倦了那些健身房和美食的照片吗？