为WordPress博客添加动态弹簧人物效果：Sakana模拟器教程

开始前你需要知道的事

相信大家浏览很多博客的时候都能看到一个弹簧人物

如图：

这两个大家应该是常见了哈

今天就来说一下wordpress怎么添加，这是GitHub上sakana大佬的开源项目：https://github.com/itorr/sakana

添加弹簧人物的步骤

wordpress博客，找到主题编辑器，在 footer.php 添加如下代码即可

<div class="sakana-box"></div>
 
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
    // 启动
    const sakana = Sakana.init({
      el:         '.sakana-box',     // 启动元素 node 或 选择器
      scale:      .5,                // 缩放倍数
      canSwitchCharacter: true,      // 允许换角色
      inertia:    0.01,              // 惯性
      decay:      0.97,              // 衰减
      r:          -20,                // 启动角度
      y:          10,                // 启动高度
      scale:      0.5,                 // 缩放倍数
      translateY: 0,                 // 位移高度
    });
</script>
 
<style>
    html .sakana-box{
        z-index: 80;
        position: fixed;
        right: 0;
        bottom: 0;
        transform-origin: 100% 100%; /* 从右下开始变换 */
    }
</style>

如果弹簧人物加载缓慢，可以将 js 文件下载到本地。

这些参数我是稍微调了一下的，官方给的参数弹的太厉害了，当然你可以调整一些你喜欢的参数