Circle Follower

一个简单优雅的鼠标跟随效果插件。【附赠平滑滚动插件】

鼠标跟随插件

使用方式

方式一：通过 script 标签直接引入

<script src="https://unpkg.com/circle-follower@latest/index.js"></script>
<script>
  // 创建实例
  const follower = new Follower({
    size: 30,
    borderColor: "#00c569",
    borderWidth: 2,
  });
</script>

方式二：在模块化项目中使用

npm install circle-follower

import Follower from "circle-follower";

// 创建实例
const follower = new Follower();

配置选项

创建实例时可以传入配置对象，所有配置项都是可选的：

const follower = new Follower({
  // 以下是默认值
  size: 30, // 圆环默认大小
  bgColor: "transparent", // 背景色
  borderColor: "#00c569", // 边框颜色
  borderWidth: 2, // 边框宽度
  backdropFilter: "", // 背景滤镜效果，例如：'blur(5px)'
  hoverSize: 60, // hover时圆环大小
  hoverBgColor: "rgba(0, 255, 0, 0.3)", // hover时背景色
  hoverBackdropFilter: "", // hover时的背景滤镜效果
  speed: 0.15, // 跟随速度(0-1之间)
});

配置项说明

| 参数 | 说明 | 类型 | 默认值 | | ------------------- | -------------------------------- | ------ | ---------------------- | | size | 圆环默认大小（像素） | Number | 30 | | bgColor | 背景色 | String | 'transparent' | | borderColor | 边框颜色 | String | '#00c569' | | borderWidth | 边框宽度（像素） | Number | 2 | | backdropFilter | 背景滤镜效果 | String | '' | | hoverSize | 鼠标悬停时圆环大小（像素） | Number | 60 | | hoverBgColor | 鼠标悬停时背景色 | String | 'rgba(0, 255, 0, 0.3)' | | hoverBackdropFilter | hover 时的背景滤镜效果 | String | '' | | speed | 跟随速度，范围 0-1，越大跟随越快 | Number | 0.15 |

实例方法

destroy()

销毁实例，移除事件监听和 DOM 元素：

const follower = new Follower();
// ... 使用一段时间后
follower.destroy(); // 销毁实例

平滑滚动插件【赠品】

使用方式

<script src="https://unpkg.com/circle-follower@latest/smoothScroller.js"></script>
<script>
  // 实例化平滑滚动插件
  new SmoothScroller({
    friction: 0.9,
    sensitivity: 0.12,
  });
</script>

Demo

• demo

License

MIT © JasonBai