推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 2018 天前的主题，其中的信息可能已经有所发展或是发生改变。
[效果如下网页所示] ：
https://christmasexperiments.com/about
[我的问题] ：
1. 在前端工程师圈中，这种效果的术语(或者说术语集)应该叫什么？
我目前只知道是 Three.js ，WebGL，从开发者工具的 resource 目录分析出，还用到了 Node.js
但是我没法区分真正实现这种效果需要哪些技术就够用了，希望前辈们指点
2. 这种效果是否可以通过简单的移植方式，移植到一些静态 html 页面上
我以前使用某类 js 特效的时候，往往直接引入一个 js 文件，然后指定一个 div 去初始化这个特效，就完事。
但是我发现这次不同，这个效果的实现貌似背后的依赖关系比较复杂，所以我猜测其无法进行简单的移植。
如果无法简单移植，那么就回归了正题，我该掌握哪些技术栈去自我实现这个特效。
希望可以得到各位前辈的帮助。
[尾]
我问此问题前使用了多次 google 来希望可以得到不错的答案。但是也许是我没有 get 到关键字，所以毫无收获。
在 V2EX 中也没有类似问题的回答。
故发此问题来求助
一名野生程序员敬上。
https://christmasexperiments.com/about
[我的问题] ：
1. 在前端工程师圈中，这种效果的术语(或者说术语集)应该叫什么？
我目前只知道是 Three.js ，WebGL，从开发者工具的 resource 目录分析出，还用到了 Node.js
但是我没法区分真正实现这种效果需要哪些技术就够用了，希望前辈们指点
2. 这种效果是否可以通过简单的移植方式，移植到一些静态 html 页面上
我以前使用某类 js 特效的时候，往往直接引入一个 js 文件，然后指定一个 div 去初始化这个特效，就完事。
但是我发现这次不同，这个效果的实现貌似背后的依赖关系比较复杂，所以我猜测其无法进行简单的移植。
如果无法简单移植，那么就回归了正题，我该掌握哪些技术栈去自我实现这个特效。
希望可以得到各位前辈的帮助。
[尾]
我问此问题前使用了多次 google 来希望可以得到不错的答案。但是也许是我没有 get 到关键字，所以毫无收获。
在 V2EX 中也没有类似问题的回答。
故发此问题来求助
一名野生程序员敬上。
第 1 条附言 · 2019-06-21 15:00:31 +08:00
请在 pc 端浏览器
第 2 条附言 · 2019-06-21 15:00:56 +08:00
查看
 |
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
|
Select Language