您是否见过基本上每个很酷的公司网站，并注意到当您滚动到它时文本会向上滑动？ （参见苹果网站）因为它太常见了，你会认为这个问题会有很多答案，对吗？但是，在浏览了许多在线教程后，我找不到出现在滚动上的动画，所以我自己制作了。
HTML 相当简单。只需创建一个元素
一些文字
完整的 HTML（请注意，您可以更改元素。为了简单起见，我使用了
。）：
<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：
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>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>
<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中文网其他相关文章！
