JS动画文字

Question

我需要帮助！我想制作标题动画，当您打开页面时，文本应该从“无处”出现。有人可以给我代码吗？我在 google 上找到的任何内容都只是为了点击并显示，完全不像，你在网站上输入，文本从任何地方出现，就像淡出但没有点击，只是在网站上输入。

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

Answer 1

对于简单的淡入，您可以只使用 CSS classes 进行过渡，并使 javascript 在页面加载时将 class 添加到您的 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。有许多教程可以帮助您入门。

JS Animation text