跳到正文
网页珍奇柜Web Curio

位移图悬停切换

WebGL Distortion Hover Effects (hover-effect)，Robin Delaporte，2018 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

本柜的现场复刻：按原作的技术思路从零编写，不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步两张图片和一张灰度位移贴图作为 uniform 传入
  2. 第 2 步progress 从 0 到 1 由悬停触发缓动
  3. 第 3 步第一张图按 位移值×progress 偏移 UV，第二张反向偏移
  4. 第 4 步按 progress 混合两张图

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Create a full-quad ShaderMaterial with two image textures and a grayscale displacement texture. On hover, tween a progress uniform from 0 to 1 with an easing curve. In the fragment shader read the displacement value d, sample image A at uv offset by d*progress*intensity and image B at uv offset by -(1-progress)*d*intensity, then mix them by progress. Ship several displacement maps (stripes, clouds, cracks) so each card can have its own personality.

定制成完整的实现提示词

档案

交互

能不能拿来用

原作以 MIT 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Repo has MIT licence; Codrops demo link from README returns 403 to automated fetch.