Duang

专题

前端实验室

能直接操作的浏览器实验，以及背后的实现代码。

0 篇

文字逐字浮现：完整可运行代码 把整行文字拆成一个个独立元素，然后给每个元素一个递增的 delay。后面所有变体都建立在这一步上。零依赖。
磁吸按钮与光标跟随：一个公式的四种接法 把鼠标与元素中心的距离乘上强度，再用 lerp 平滑到位。同一公式接到位移、双层视差、CSS 高光和 3D 倾斜上。
滚动叙事长页：平滑、固钉、视差和进度 用零依赖演示拆开滚动叙事页的四种手法：平滑滚动、固钉横向推进、视差分层，以及滚动驱动数字。文末对照 GSAP 与 Lenis 的写法。
用原生 WebGL 跑 24,000 个粒子 把粒子的初始数据交给 GPU，再用顶点着色器完成每一帧的位置计算。文章里嵌入了可以直接操作的完整演示。