1 ztmqg 2019-06-21 11:52:58 +08:00 ![]() 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 shakaraka PRO 这种用 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 |