JavaScript 实现页面滚动动画

在做前端 UI 效果时，让元素根据滚动位置实现动画效果是一个非常流行的设计，通常我们会使用第三方插件或库来实现。在本教程中，我将教大家使用纯 JavaScript 和 CSS 来实现。先预览一下实现的效果：我们使用 CSS 来实现动画，用 JavaScript 来处理触发所需的样式。创建布局我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面的 JavaScript 通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名 js-scroll，HTML 代码如下：添加 CSS 样式先来一个简单的淡入动画效果：页面上的所有 js-scroll 元素都会被隐藏，不透明度为 0。当滚动到该元素区域时，给它加上 .scrolled 类名让它显现出来。在这种情况下，如果元素已经按 scrollOffset 的数量滚动到页面中，该函数返回 true。