技术解析

请教实现此网页的特效应该掌握的技术栈有哪些
0
2021-08-30 20:29:05
idczone
[效果如下网页所示] :
https://christmasexperiments.com/about

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

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

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

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

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

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

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

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

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

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

故发此问题来求助

一名野生程序员敬上。
parallax.js

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

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

一般叫做视差滚动吧

css translate3d

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

恩,是的,谢谢

感谢,是我想要的可插拔式的 js,非常感谢!

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

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

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

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服