博客右下角添加弹簧人物角色 – Sakana开源项目教程

刷到一些个人博客的时候，右下角会有一只会晃来晃去的小角色，点击底座还能切换不同人物，看着挺有意思。仔细看了一下，这个效果来自一个叫Sakana的开源项目，作者是@itorr，托管在GitHub上，完全免费。

很多博主想给自己的博客也加上这个效果，但不知道怎么动手。这篇文章就来讲清楚具体的实现方法。

Sakana是什么

Sakana是一个Web动效开源项目，主要功能是在网页右下角放置一个会弹簧式摆动的人物角色。用户鼠标划过或者点击的时候，角色的姿势和方向会跟着变化，有点像在逗一只活蹦乱跳的小宠物。

项目特点：

• 完全开源，免费使用
• 自带多个人物角色可切换
• 接入简单，不需要写复杂JS
• 支持自定义缩放倍数、摆动幅度、惯性参数

WordPress网站添加方法

第一步：找到footer.php文件

进入WordPress后台，点左侧菜单”外观”→”主题文件编辑器”。在右侧找到并点击打开当前主题的footer.php文件，这个文件控制页面底部的结构。

第二步：添加HTML挂载点

在footer.php的标签之前，插入下面这行代码，作为角色的挂载点：

<div class="sakana-box"></div>

第三步：引入JS文件

紧跟在上面那行代码后面，插入JS脚本：

<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
const sakana = Sakana.init({
  el: '.sakana-box',
  scale: 0.5,
  canSwitchCharacter: true,
  inertia: 0.01,
  decay: 0.97,
  r: -20,
  y: 10,
  translateY: 0,
});
</script>

其中scale参数控制角色大小，数值越大角色越大；canSwitchCharacter设为true表示允许访客点击切换不同人物；inertia和decay控制摆动的惯性，手感好不好主要就靠这两个参数调。

第四步：添加CSS样式

在同一个footer.php文件里，或者在主题的自定义CSS里加入以下样式：

html .sakana-box {
  z-index: 80;
  position: fixed;
  right: 0;
  bottom: 0;
  transform-origin: 100% 100%;
}

这几句CSS的意思是把角色固定在页面右下角，z-index设为80保证它浮在大多数页面元素之上，不会被其他内容遮挡。

注意事项

加载慢的解决办法

jsDelivr是公共CDN，部分地区访问可能会偏慢。如果角色显示不出来或者加载要好几秒，建议把sakana.js这个文件下载到本地，然后把自己的本地路径填到script src里。

摆动幅度太大怎么办

默认参数下角色晃得比较厉害，看久了眼睛容易疲劳。把scale调小一点可以缓解，另外把inertia调低、decay调高能让动作变得更稳。

其他建站系统能不能用

Sakana本身是纯Web项目，不挑框架。Hexo、Hugo、Typecho这些静态博客或者任何写HTML的网站，只要能把代码埋到页面底部，都能用这套方法。

效果演示

这个角色除了自动晃之外，还有几个交互细节：鼠标滑过的时候方向会跟着变，点击底座会在不同人物之间切换，不同人物的形象和动作节奏都不一样，算是小小的彩蛋。

加了这个角色之后，博客会显得更有活力，不那么死板。适合个人技术博客或者作品集类型的网站，公司官网就算了，可能会显得不够正式。