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

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

The HTML (Dun dun dun!!!)

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

` 一些文本 `

并将类“id="animate-scroll"”附加到它。请注意，您可以随时更改类，只需确保也更改 HTML、CSS 和 JS 类引用即可！

完整的 HTML（请注意，您可以更改元素。我使用了` ` 出于简单的原因。）：

CSS

现在来看看 CSS。这部分很简单。复制以下代码：

.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 的类，也请更改此项。

`const observer = new IntersectionObserver((entries) => { entrys.forEach(entry =>` 这会检测元素是否在视口中。如果不在，则不会为其设置动画。

`if (entry.isIntersecting) { entry.target.classList.add('visible');}` 这会检测动画是否结束。如果是，则会将 `.visible` 添加到 CSS。这就是它存在的原因！

`threshold: 0.9` 这个值计算的是动画开始之前页面上有多少内容。0 表示像素一到达页面就到达。1 表示像素到达页面上方约 25%。2 表示像素到达页面约 50%... 我喜欢将它保持在 0.9 左右，以便用户有机会看到动画，而不会将文本隐藏太久。

`elements.forEach(element => { observer.observe(element);` 这只是观察元素。解释起来毫无意义。它在页面上吗？？？这可以处理这个问题。

最终的代码...

您是否懒得阅读我这些精彩的解释？以下是全部代码。

HTML：

Your text here

样式表：

.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的：

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');
            }
        });
    }, {
        //The amount of screen displayed before animated. 0 is as soon as it appears on the page. 1 is a bit. 2 is...
        threshold: 0.9
    });

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