1
ztmqg 2019-06-21 11:52:58 +08:00 1
parallax.js
|
2
momocraft 2019-06-21 11:58:27 +08:00
先学图形学...然后你才知道 3.js 能做什么,css 3d transform 能做什么
|
3
agdhole 2019-06-21 12:06:12 +08:00
原生 js + css 能做,不过性能不好优化
|
4
davin 2019-06-21 12:11:46 +08:00
一般叫做视差滚动吧
|
5
dixeran 2019-06-21 12:12:33 +08:00 via Android
css translate3d
|
6
wunonglin 2019-06-21 12:16:46 +08:00
这种用 js 监听鼠标移动,然后设置 transform 就行了,不过是不很建议用 transform,直接上 canvas 会更好,要是页面不复杂的话用什么都行
|
9
zazalu OP @wunonglin 谢谢回复!你说的应该没错!不过我前端这块不熟所以不敢多言。不过一楼的答案是非常不错的一个实现方案,是我想要的东西!
|
10
zazalu OP 总结一下:
parallax.js 是个不错的项目,可插拔,移植简单,做到了一定的视差滚动。 不过 https://christmasexperiments.com/about 的效果不是单纯的视差滚动,还带有一定的 3d 立体感(会感觉字体是漂浮在空中的那种感觉)不知道那是怎么实现的 |
11
agdhole 2019-06-22 11:49:58 +08:00 via Android
@zazalu 给背景的 div 创建一个随着 transformY 向上滚动,然后字体漂浮抖动的感觉要写一个根据鼠标偏移而偏移的事件,曾经写过一个小 demo: https://codepen.io/agdholo/pen/xeOjPv
|