为WordPress右下角注入活力:增添弹簧人物

由于在日常的使用过程中,时不时就会有访客询问本博客右下角那个可爱的人物是如何添加的,鉴于此,在这里还是为大家详细地稍微介绍一下具体的操作方法吧。其实呢,这个出现在博客右下角的人物是来自一个开源的项目哦。这个开源项目有着诸多的优点,使用起来真的是非常简单便捷。如果正在阅读的你使用的是广受欢迎的 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 文件下载到本地。这样操作之后,加载速度可能会得到显著提升。

效果展示

为WordPress右下角注入活力:增添弹簧人物

悄悄告诉你哦,这个弹簧人物还有一个非常有趣的小秘密呢!当你轻轻点击它的底座时,还可以切换不同的人物形象哦!是不是感觉特别新奇和有趣呢?快来试试吧!
阅读剩余
十月 29

本站历史上的今天

    "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~"
提示:本文最后更新于2024年10月29日,如有错误或者已经失效,请留言告知。
THE END
赶紧收藏我们,查看更多心仪的内容?按Ctrl+D收藏我们 或 发现更多