创意编码——120 天中的第 2 天

嘿。 今天，我更深入地研究动画并使用了一个名为 GSAP .我不会说谎；我希望我早点发现它。掌握这些概念很容易，而且我喜欢动画的流畅性。

我今天创造了什么？

今天我学习了如何做文本过渡和分割文本动画。最终的项目看起来像这样。

你可以找到 GitHub 存储库 这里 .

演示版本可用 这里 .

我是怎么找到这个项目的？

这是另一个项目 终极 JavaScript 动画课程 经过 开发版 .因为喜欢第一个项目，所以继续关注课程内容。您可以了解有关本课程的更多信息，并查看我的创意编码第一天 这里 .

课程有偿；但是，如果您想了解 GSAP 的文本动画和过渡，您可以在 Dev Ed 的 youtube 频道上观看此视频—— https://www.youtube.com/watch?v=sN93DRYkCO8 .它提供了带有文本和页面转换的完整演练。

我从这个项目中学到了什么？

对我来说最令人兴奋的部分是动画徽标。我喜欢 Dev Ed 如何展示您可以使用的 GSAP 库；但是，由于购买它们需要额外的成本，他自己创建了拆分文本动画，使用 GSAP 和香草 javascript。这很简单，结果看起来很棒。

我了解了更多关于 GSAP 库，文本分割和动画文本在不同的时间间隔。

代码结构

Dev Ed 提供带有基本样板模板的入门材料，其中包括带有链接的样板 HTML 文件以及空的 JS 和 CSS 文件。他还添加了一个免费的图片来自 像素 网站。

大约花了一个小时来关注内容并创建动画效果。

HTML

HTML 文档中的代码非常简单。

HTML file structure — https://github.com/sintija/text-animation

英雄文本被分成不同的 h2 块用于文本动画。

我注意到里面使用了标签

.经过一番研究，我发现这样写是可以的，而且 HTML 验证器 也不会抱怨这个。

我使用了 Pexels 网站上的不同图像文件来为横幅添加更自然的外观。

CSS

CSS — https://github.com/sintija/text-animation

我已经按照样式教程进行操作；但是，我做了一些小的调整。

• 我没有使用主文本的填充来分隔字母，而是使用了 flexbox gap 属性。使用 padding 或 flex box gap 没有区别；这只是我的偏好。

  .cta-文本 { 显示：弯曲； 字体大小：2rem； 间隙：12px； }

• 我还调整了文本阴影，最初看起来边缘有点刺眼。另外，我认为需要进行调整，因为我使用了与教程中不同的英雄图像。

  .cta-文本跨度 { 显示：块； 文本阴影：2px 2px 3px rgba(0, 0, 0, 0.2); }

我没有过多强调响应式设计，并注意到在调整各种移动屏幕尺寸上的文本时需要进行一些调整。

JS

我最喜欢这部分。我一直在谈论 GSAP 库 ，但我不能强调它的力量。 好吧，到目前为止，我已经创建了简单的动画；让我们看看当它变得更复杂时我的感受。

JS — https://github.com/sintija/text-animation

Dev ED 介绍了这里使用的每个函数；但是，这是我的一些发现。

• 可能是一个愚蠢的，但我想知道为什么 常量 用于每个变量而不是 让 .我想这里的主要原因是这个项目的规模比较小，分配的变量不会被重新分配或改变。我也找到了讨论 这里 关于 const 和 let，这非常有见地。

作为任何语言的经验法则，只要有可能，我会说总是使用 const/final/readonly/whatever 它在你的语言中被调用。原因很简单；当很明显什么可以改变和不能改变时，对代码的推理要容易得多。

• 我了解到使用 GSAP 交错 **** 功能。

  gsap.fromTo('.letter', {y:'100%'}, {y:0, delay: 2, stagger: 0.05, ease: 'back.out(3)'})

• 我找到了 GSAP 备忘单，非常方便—— https://greensock.com/cheatsheet/ .

概括

这是一个令人愉快的项目。该教程引人入胜且易于理解。我也觉得我学到了很多关于文字动画的知识。构建这个英雄部分很有趣，我喜欢它的外观和动画。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12154/35330411