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

[LeeReamond]

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

比如这个项目https://codepen.io/J_Enrique/pen/ypgvLN

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

[liyang5945]

animate.css

[g1f9]

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

[LeeReamond]

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

[liyang5945]

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

[autoxbc]

https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

[g1f9]

@LeeReamond https://github.com/Jesus-E-Rodriguez/cityscapes-landing-page/blob/master/js/astonish.js 看一下这文件，我不知道为啥 codepen 没有，但是仓库是有的

[frank553000]

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

[g1f9]

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

[des]

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

[lanny666]

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