这是一个创建于 1311 天前的主题，其中的信息可能已经有所发展或是发生改变。
在 codepen 经常看到类似的项目，具体表现是只有当用户把滚动条拉到指定位置的时候某个元素才会出现
比如这个项目https://codepen.io/J_Enrique/pen/ypgvLN
它是怎么实现的，scss 源码太复杂了看不懂
 |
1
liyang5945 2021-04-18 18:41:51 +08:00
animate.css
|
 |
2
g1f9 2021-04-18 20:17:56 +08:00
js 做的吧，绑定 scroll，到指定位置就应用 css 动画
|
 |
3
LeeReamond OP @g1f9 看完你说的我仔细看了一下脚本，看起来没有 js，不过似乎加到依赖里面去了。不过 js 的话，主要问题是你怎么知道位置呢，比如判断滚动条这种的，屏幕大小不一样滚动条长度也是不一样的
|
|
4
liyang5945 2021-04-18 20:39:18 +08:00
我又看了一下，是有引入其他 js 的，大概看了下，就是滚动到某个位置给某个元素添加个 className https://rawgit.com/Jesus-E-Rodriguez/cityscapes-landing-page/master/js/astonish.js
|
 |
5
autoxbc 2021-04-18 20:41:19 +08:00
|
|
6
g1f9 2021-04-18 20:55:42 +08:00
@LeeReamond https://github.com/Jesus-E-Rodriguez/cityscapes-landing-page/blob/master/js/astonish.js 看一下这文件，我不知道为啥 codepen 没有，但是仓库是有的
|
 |
7
frank553000 2021-04-18 21:02:03 +08:00  1
简单点就 wow.js： https://www.dowebok.com/131.html
复杂点就 gsap+ScrollMagic |
|
8
g1f9 2021-04-18 21:04:23 +08:00
@LeeReamond 用 scrollTop 和 offset top 之类的对比下，就能判断是否滚动元素范围内了吧
|
 |
10
lanny666 2021-04-19 10:29:40 +08:00
@LeeReamond js 监听窗口的滚动事件，监听判断如果（文档窗口的高度+滚动条距离顶部的距离>要添加动画的 div 区域距离文档上方的高度）那么添加对应的 class
|
Select Language