如何用JavaScript制作网页滚动动画效果？

本文共计2222个文字，预计阅读时间需要9分钟。

目录 + 创建布局 + 添加 + CSS + 样式 + 使用 + JavaScript + 操作元素 + 获取目标元素 + 默认淡出所有元素 + 检测元素是否在视窗内 + 给元素添加类名 + 完善示例 + 利用节流提高性能 + 在做前端 + UI + 效果时，让元素

目录

• 创建布局
• 添加 CSS 样式
• 用 JavaScript 操作元素
• 获取目标元素
  
• 默认淡出所有目标元素
  
• 检测元素是否在视窗内
  
• 给元素添加类名
  
• 完善示例
• 利用节流阀提高性能

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

先预览一下实现的效果：

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

创建布局

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