Parallax × 3D Transform

纵深实验室

四个用途不同的网页,都只用原生 CSS 3D 变换和少量 JavaScript 实现纵深感。把指针移到卡片上预览视差,点击打开完整页面。

活动落地页

英仙座之夜

流星雨观测夜的报名页。三层星空随鼠标和滚动以不同速率移动,首屏是可随视角倾斜的 3D 轨道仪。

多层背景视差preserve-3d 轨道卡片倾斜
产品介绍页

K68 分层结构

机械键盘的爆炸视图。粘性舞台里,滚动进度直接映射为六个图层之间的 Z 轴间距和观察角度。

滚动驱动 translateZsticky 舞台图层联动清单
作品集 / 影展

海岸线十帧

摄影作品挂在一条 3D 走廊两侧,滚动就是沿 Z 轴向前走。画面里的天空和前景也有各自的微视差。

摄像机推进距离淡入淡出画内双层视差
品牌叙事页

雾山茶事

剪纸风格的群山层层叠叠,标题夹在山与山之间。工序卡片像立体书一样立起,茶盒可以拖动旋转。

剪纸层视差立体书翻折可拖动 3D 盒

所有页面都支持手机宽度,并在系统开启“减少动态效果”时停用持续动画。