[前端问题]像苹果官网那种滚到一个页面，放一些动画的效果怎么做的？

2021-01-21 09:34:55 +08:00
 JCZ2MkKb5S8ZX9pq

这东西有没有现成的轮子？请高手给指个路。

4735 次点击
所在节点    前端优化
14 条回复
LiuJiang
2021-01-21 09:36:04 +08:00
问得好，我也想问。
lanjidechao
2021-01-21 09:44:12 +08:00
盲猜是 scrollbar 的事件，codepen 上看到过类似的，可以找找看。
acthtml
2021-01-21 09:44:50 +08:00
search: 全屏滚动 js
fullPage.js 能做到上面的效果
happyeveryday
2021-01-21 09:45:01 +08:00
fullpage.js
xxpandxxp
2021-01-21 09:48:49 +08:00
这个 b 站好像有教程，b 站或 u2b 搜 codeStartUp
sixi712
2021-01-21 09:51:14 +08:00
b 站有个 up 主讲过。纯 css 实现。https://www.bilibili.com/video/BV1fD4y197NL
ccraohng
2021-01-21 09:58:08 +08:00
gsap 自带的 scrollTrigger 或者配合 scrollMagic
subpo
2021-01-21 10:00:05 +08:00
现在当真学什么都上 b 站
caocong
2021-01-21 10:16:45 +08:00
滚动部分的动画就是 js 监听滚动条往 html 里 style 动态写入 css 变量
再根据变量 calc()计算值放进 transform 里变化

个人真心不太喜欢视频这种教程
1 分钟可以看完的文章 视频要做 10 分钟 而且不方便索引跳转
agdhole
2021-01-21 11:36:25 +08:00
https://greensock.com/
yaphets666
2021-01-21 13:14:30 +08:00
实现这个简单 就监控 scroll 然后操作 dom 就行了 再润色下过度啥的 主要是里头那些动画是最难的
freakJacker
2021-01-21 13:15:12 +08:00
监听 scrollTop
imjamespond
2021-01-21 13:24:06 +08:00
这个专业术语叫 parallax 效果
zzm88
2021-06-28 16:08:58 +08:00
@agdhole 这个很好

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/746894

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX