html如何设置滚动动画,JavaScript 实现页面滚动动画

在做前端 UI 效果时，让元素根据滚动位置实现动画效果是一个非常流行的设计，通常我们会使用第三方插件或库来实现。在本教程中，我将教大家使用纯 JavaScript 和 CSS 来实现。

先预览一下实现的效果：

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

创建布局

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

This animation fades in from the top.

添加 CSS 样式

先来一个简单的淡入动画效果：

.js-scroll {

opacity: 0;

transition: opacity 500ms;

}

.js-scroll.scrolled {

opacity: 1;

}

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

用 JavaScript 操作元素

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

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

获取页面上所有 js-scroll 元素

使这些元素默认淡出不可见

检测元素是否在视窗内

如果元素在视窗内则分配 scrolled 类名

获取目标元素

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

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

默认淡出所有目标元素

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

scrollElements.forEach((el) => {

el.style.