前端网页，滚动到指定位置时显示动画是什么原理？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1306 天前的主题，其中的信息可能已经有所发展或是发生改变。

在 codepen 经常看到类似的项目，具体表现是只有当用户把滚动条拉到指定位置的时候某个元素才会出现

它是怎么实现的，scss 源码太复杂了看不懂

10 条回复 • 2021-04-19 10:29:40 +08:00

liyang5945

2021-04-18 18:41:51 +08:00

animate.css

g1f9

2021-04-18 20:17:56 +08:00

js 做的吧，绑定 scroll，到指定位置就应用 css 动画

LeeReamond

2021-04-18 20:27:31 +08:00 via Android

@g1f9 看完你说的我仔细看了一下脚本，看起来没有 js，不过似乎加到依赖里面去了。不过 js 的话，主要问题是你怎么知道位置呢，比如判断滚动条这种的，屏幕大小不一样滚动条长度也是不一样的

liyang5945

2021-04-18 20:39:18 +08:00

我又看了一下，是有引入其他 js 的，大概看了下，就是滚动到某个位置给某个元素添加个 className https://rawgit.com/Jesus-E-Rodriguez/cityscapes-landing-page/master/js/astonish.js

autoxbc

2021-04-18 20:41:19 +08:00

g1f9

2021-04-18 20:55:42 +08:00

frank553000

2021-04-18 21:02:03 +08:00

简单点就 wow.js： https://www.dowebok.com/131.html
复杂点就 gsap+ScrollMagic

g1f9

2021-04-18 21:04:23 +08:00

@LeeReamond 用 scrollTop 和 offset top 之类的对比下，就能判断是否滚动元素范围内了吧

des

2021-04-18 22:20:31 +08:00

@g1f9 不是很建议用 offset，可以试试 IntersectionObserver

lanny666

2021-04-19 10:29:40 +08:00

@LeeReamond js 监听窗口的滚动事件，监听判断如果（文档窗口的高度+滚动条距离顶部的距离>要添加动画的 div 区域距离文档上方的高度）那么添加对应的 class