我用 Vibe Coding，把个人网站改成了前端特效实验场

蔡坨坨2023-08-192026-08-10

你好，我是测试蔡坨坨。

最近我又给个人网站做了一轮前端特效和交互优化。不是那种大改版，而是把一些原本「能用但不够顺」的地方，一点点改成更像自己的东西。

这篇不讲建站基础，也不展开主题安装配置，只记录这次 Vibe Coding 过程中改了哪些效果、踩了哪些坑，以及平时可以去哪里找特效灵感。

首页标题改成了更有个人识别度的一行字：

蔡坨坨💩

效果上参考了 SplitText 那类文字拆分动画：每个字符单独进场，有一点 3D 翻转的感觉。这里没有额外引入 GSAP，而是用模板把标题拆成单个字符，再通过 CSS 控制延迟和动画。

有个细节需要注意：如果标题里有 emoji，不能直接按字符串下标拆，否则 emoji 可能会被拆坏。更稳妥的方式是用 Array.from() 处理字符序列。

之前首页随机背景图切换时，是直接改 background-image。问题是图片还没加载完，背景就已经切过去了，所以偶尔会闪一下。

这次改成了双层背景 crossfade：

1	预加载下一张图 -> 放到隐藏层 -> opacity 渐变 -> 切换 active 层

这样图片先加载，加载完成后再淡入，视觉上会顺很多。这个优化不复杂，但对首页观感提升很明显。

首页副标题没有继续走随机一句话接口，而是改成从站内「坨坨瞎叭叭」内容里取。

我更喜欢这种方式，因为它不是外部随机文案，而是自己写过的碎碎念。首页每次刷新看到的内容，也更像是这个网站自己长出来的一部分。

右下角加了一个 AI 入口，点击后弹出聊天窗口。这个功能主要做了这些交互：

这里最容易踩坑的是事件绑定。如果页面用了 PJAX，DOM 会被重新替换，普通 querySelector(...).onclick = ... 很容易失效。最后我改成了事件委托，让点击逻辑挂在 document 上，再通过 closest() 判断是不是 AI 入口。

之前文章卡片整张都能点，虽然省事，但不够精确。比如我只是想点封面看大图，结果直接进了文章。

这次把交互拆开了：

这种改法更符合直觉，也减少误触。个人网站很多体验问题，其实不是功能缺失，而是默认点击范围太粗。

文章页顶部接入了一个动态视觉效果，作为默认 top_img 的替代。它的作用不是展示具体图片，而是让文章首屏更有科技感和流动感。

这里我尝试过两条路：

自己写 Canvas 的好处是完全可控，颜色、球体、背景都能调；缺点也明显：想做到设计工具里的质感，需要花更多时间调 Shader、光影和动效。最后我还是先保留了现成效果，后面如果有精力，再考虑自己实现一版更贴合网站风格的。

我平时找特效灵感，主要看这些地方：

CodePen：适合搜单个小效果，比如 text animation、card hover、canvas background；
Codrops：交互质量很高，适合看菜单、转场、滚动动画；
Awwwards：适合看整体视觉趋势，但实现成本通常比较高；
GSAP Showcase：适合找文字拆分、视差滚动、复杂时间线动画；
Unicorn Studio：适合快速做 3D、Shader、动态背景；
Lusion 和 Bruno Simon：适合看 Three.js 交互网站的上限；
GitHub：搜 blog theme animation、personal website animation、canvas background，能找到不少可落地的实现。