先预览一下实现效果：

我们使用 CSS 来实现动画，用 JavaScript 来处理触发所需的样式。我们先来创建布局。

创建布局

我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面JavaScript 通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名 js-scroll

HTML代码如下：

丰富的可视化组件库，海量的图片和图标素材，满足各种业务场景，真正实现零代码搭建的模板

添加 CSS 样式

页面上的所有 js-scroll 元素都会被隐藏，不透明度为 0。当滚动到该元素区域时，给它加上 .scrolled 类名让它显现出来。

用 JavaScript 操作元素

有了布局和样式，现在我们需要编写一个 JavaScript 函数，当元素滚动到视图中时，为它们分配类名。

我们来简单分解一下逻辑：

1.获取目标元素

获取页面上所有 js-scroll 元素，使用 document.querySelectorAll() 即可：

const scrollElements = document.querySelectorAll('.js-scroll')

默认淡出所有目标元素

遍历这些元素，使其全部淡出不可见：

2.检测元素是否在视窗内

我们可以通过判断元素距离页面顶部的间距是否小于页面可见部分的高度，来检测元素是否在用户视窗中。

在 JavaScript 中，我们使用 getBoundingClientRect().top 方法来获取元素与页面顶部的距离，使用 window.innerHeight或 document.documentElement.clientHeight来获取视窗的高度。

我们将使用上述逻辑创建一个 elementInView 函数：

然后，再把我们前面的逻辑与 displayScrollElement 函数结合起来，并使用 forEach 方法在所有 js-scroll 元素上调用该函数。

另外，当元素不再在视图中时，需要将其重置为默认状态，我们可以通过定义一hideScrollElement 来实现：

最终handleScrollAnimation 方法代码：

最后，我们将把上面的方法传递到窗口的滚动事件监听中，这样每当用户滚动时它就会运行。

淡入动效

切入顶部动效

从左边切入动效

从右边切入动效

这里我们给不同动效的元素分配了不同的 CSS 类名，下面是这些类对应的 CSS 代码：

虽然加了不同动画元素，但我们不需要修改 JavaScript 代码，因为逻辑保持不变。这意味着我们可以在页面添加任何数量的不同动画，而无需编写新的函数。

每当我们在滚动监听器中绑定一个函数时，每次用户滚动页面，该函数都会被调用。滚动一个 500px 的页面会导致一个函数被调用至少 50 次。如果我们试图在页面上包含很多元素，这会导致我们的页面速度明显变慢。

我们可以通过使用“节流函数(Throttle Function)”来减少函数的调用次数。节流函数是一个高阶函数，它在指定的时间间隔内只调用传入的函数一次。

它对于滚动事件特别有用，因为我们不需要检测用户滚动的每个像素。例如，如果我们有一个定时器为 100ms 的节流函数，那么用户每滚动 100ms，该函数将只被调用一次。

节流函数在 JavaScript 中可以这样实现：

然后我们可以修改 window 对象上的 scroll 事件监听：

现在我们的 handleScrollAnimation 函数在用户滚动时每隔 250ms 就会被调用一次