请教实现此网页的特效应该掌握的技术栈有哪些

[zazalu]

[效果如下网页所示] ：
https://christmasexperiments.com/about

[我的问题] ：
1. 在前端工程师圈中，这种效果的术语(或者说术语集)应该叫什么？

我目前只知道是 Three.js ，WebGL，从开发者工具的 resource 目录分析出，还用到了 Node.js

但是我没法区分真正实现这种效果需要哪些技术就够用了，希望前辈们指点

2. 这种效果是否可以通过简单的移植方式，移植到一些静态 html 页面上

我以前使用某类 js 特效的时候，往往直接引入一个 js 文件，然后指定一个 div 去初始化这个特效，就完事。

但是我发现这次不同，这个效果的实现貌似背后的依赖关系比较复杂，所以我猜测其无法进行简单的移植。

如果无法简单移植，那么就回归了正题，我该掌握哪些技术栈去自我实现这个特效。

希望可以得到各位前辈的帮助。

[尾]
我问此问题前使用了多次 google 来希望可以得到不错的答案。但是也许是我没有 get 到关键字，所以毫无收获。

在 V2EX 中也没有类似问题的回答。

故发此问题来求助

一名野生程序员敬上。

[ztmqg]

parallax.js

[momocraft]

先学图形学...然后你才知道 3.js 能做什么，css 3d transform 能做什么

[agdhole]

原生 js + css 能做，不过性能不好优化

[davin]

一般叫做视差滚动吧

[dixeran]

css translate3d

[wunonglin]

这种用 js 监听鼠标移动，然后设置 transform 就行了，不过是不很建议用 transform，直接上 canvas 会更好，要是页面不复杂的话用什么都行

[zazalu]

@davin 恩，是的，谢谢

[zazalu]

@ztmqg 感谢，是我想要的可插拔式的 js，非常感谢！

[zazalu]

@wunonglin 谢谢回复！你说的应该没错！不过我前端这块不熟所以不敢多言。不过一楼的答案是非常不错的一个实现方案，是我想要的东西！

[zazalu]

总结一下：
parallax.js 是个不错的项目，可插拔，移植简单，做到了一定的视差滚动。
不过 https://christmasexperiments.com/about 的效果不是单纯的视差滚动，还带有一定的 3d 立体感（会感觉字体是漂浮在空中的那种感觉）不知道那是怎么实现的

[agdhole]

@zazalu 给背景的 div 创建一个随着 transformY 向上滚动，然后字体漂浮抖动的感觉要写一个根据鼠标偏移而偏移的事件，曾经写过一个小 demo： https://codepen.io/agdholo/pen/xeOjPv