GoodVibe
登录
返回网站样式 · WebGL

丝带卷边:边缘扭曲 + 彩虹折射

滚动时视口边缘卷边 + 彩虹色散

Details
v1.02026-06-05

Overview

把整页当成一张纸:横向滚动时,只有视口左右两条边缘像被卷起一样扭曲,并折射出彩虹色散(chromatic aberration),中间区域保持平直。整页内容先画进一张离屏 canvas 当纹理,再用一个全屏片元着色器在屏幕空间做边缘变形。

How to Use

作品集、产品页等想要强记忆点滚动体验的整页效果

改脚本顶部的 PANELS 数组配置每屏内容;整页画进离屏 canvas 当纹理