最近做了一个轻量级的网页小组件：Little People Widget。

它可以在网页中展示一排会移动、会跳动、会冒气泡的小人动画，适合放在导航页、个人站、博客、产品展示页、活动页，作为一个有记忆点的小互动区域。

Demo 地址：

https://java.li/little-people/

image-vkmyzbxf.png

这个组件能做什么

它本质上是一个静态前端组件，只需要引入：

  • little-people.css
  • little-people.js
  • 对应的人物雪碧图素材

然后在页面里调用：

LittlePeople.init("#little-people", {
  sprite: "/little-people/sprite-programmer.png",
  rows: 5,
  cols: 14,
  people: 18,
  speedMultiplier: 1
});

就可以把动画横幅加到页面中。

当前支持的效果

Demo 里目前做了几套风格：

  • 程序员版
  • Open Peeps 版
  • 动物版
  • 基础版仅展示

并且支持实时调整：

  • 人物密度
  • 移动速度
  • 气泡文字
  • 气泡点击跳转
  • 程序员胸牌文字
  • 不同素材的展示比例

比如气泡跳转可以这样配置：

messages: [
  "欢迎回来",
  "今天也要摸鱼吗",
  { text: "点击跳转到官网", url: "https://example.com" }
],
bubbleChance: 0.35

字符串只显示气泡文字；对象形式可以设置点击跳转。

适合哪些项目

这个组件不依赖 Vue、React，也不需要后端服务，所以比较适合直接接入这些场景：

  • 普通 HTML 单页
  • Hexo 博客
  • Halo 主题
  • 个人导航页
  • 产品展示页
  • 静态活动页

把资源文件放到网站静态目录里，然后引入即可。

关于素材和灵感

组件的表现形式受到一些网页底部人物动画氛围的启发。当前 Demo 中的可交付素材主要是自制版本、Open Peeps 版本和动物版本。

其中 Open Peeps 素材来自 Pablo Stanley 的 Open Peeps，授权说明随资源包一同提供。

Demo 中的基础版只作为效果对照展示，不作为客户交付素材分发。

在线预览

可以直接打开这个地址体验：

https://java.li/little-people/

页面里也放了普通 HTML、Hexo、Halo 的接入示例，以及常用配置说明。