如何使用 JavaScript 和 CSS 制作滚动动画

您是否见过基本上每个很酷的公司网站，并注意到当您滚动到它时文本会向上滑动？ （参见苹果网站）因为它太常见了，你会认为这个问题会有很多答案，对吗？但是，在浏览了许多在线教程后，我找不到出现在滚动上的动画，所以我自己制作了。

HTML（当当当！！！）

HTML 相当简单。只需创建一个元素

一些文字

并附上课程>

完整的 HTML（请注意，您可以更改元素。为了简单起见，我使用了

。）：

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

这是怎么回事？ .animate-scroll 类声明动画。这是实际制作动画的代码。您可以制作另一个动画，但我制作了一个上滑淡入动画，因为这是我见过的最常见的动画。然而，.animate-scroll.visible 显示动画结束时元素的状态。如果您更改 .animate-scroll，您也应该更改它。例如，如果要更改大小，则应输入 size:100%;或者什么的。但是，如果您只是想要一个有关如何执行此操作的简单教程，那么请不要更改任何内容。

JavaScript

复制这个简单的 JavaScript：

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

哇！这是很多代码！发生什么事了！让我们一步一步地分解它。
首先， document.addEventListener('DOMContentLoaded', () => 正在检测内容是否已加载。这只是运行“函数”。
const elements = document.querySelectorAll('.animate-scroll');这样就找到了类。如果您要更改 HTML 和 CSS 的类，也请更改此设置。
constobserver = new IntersectionObserver((entries) => {entries.forEach(entry =>;这会检测元素是否在视口中。如果不在视口中，则不会对其进行动画处理。
if (entry.isIntersecting) {entry.target.classList.add('visible');} 这会检测动画是否结束。如果是，则会将 .visible 添加到 CSS 中。这就是它存在的原因！
阈值：0.9 这会计算动画之前页面上的内容量。 0 是像素一到达页面。 1 是当它位于页面上方大约 25% 时。 2 约为 50%...我喜欢将其保持在 0.9 左右，以便用户看到动画而不会隐藏文本太久。
elements.forEach(element => {observer.observe(element); 这只是观察元素。解释起来毫无意义。它在页面上吗???这可以处理这个问题。

最终代码...

你懒得看我精彩的解释吗？这是全部代码。

HTML：

<p>



</p><p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript：

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

就是这样！我希望你喜欢这个深入探讨。如果您有任何问题、意见或只是想与写此文章的名人交谈，请发表评论。我很乐意看到您的建议！

感谢您的阅读，CodeMonster

以上是如何使用 JavaScript 和 CSS 制作滚动动画的详细内容。更多信息请关注PHP中文网其他相关文章！