JS动画文本答案

【问题标题】：JS Animation textJS动画文本
【发布时间】：2021-03-03 12:07:00
【问题描述】：

我需要帮助！我想制作标题动画，当您打开页面时，文本应该从“无处”出现。有人可以给我代码吗？我在谷歌上找到的任何东西，都只是为了点击和显示，没有什么比你在网站上输入的，文字从无处出现的东西，比如淡出但没有点击，只需在网站上输入。

<h1 class="titlu"> Creative Ideas </h1>

【问题讨论】：

【解决方案1】：

对于简单的淡入，您可以使用带有过渡的 CSS 类，并让 javascript 在页面加载时将该类添加到您的 h1。默认情况下，不透明度设置为 0（使 h1 不可见）。还设置了一个过渡，因此它会在 1 秒内逐渐变化。在页面加载时，它会将不透明度设置为 1，从而产生淡入淡出效果。

function fadeInTitle() {
  const h1Ele = document.querySelector(".titlu");
  h1Ele.classList.add("fadeIn");
}

.titlu {
  opacity: 0;
  transition: opacity 1s ease;
}

.fadeIn {
  opacity: 1;
}

<body onload="fadeInTitle();">
  <h1 class="titlu">Creative Ideas</h1>
</body>

将来当您遇到更复杂的动画时，GSAP 是一个很棒的库。有许多教程可以帮助您入门。

【讨论】：