https://github.com/hollowman6/staggered-mouse-balls

Staggered balls that follow mouse moves. (多小球蹒跚跟随鼠标移动)
https://github.com/hollowman6/staggered-mouse-balls

mouse-tracking react staggered

Last synced: about 2 months ago
JSON representation

Staggered balls that follow mouse moves. (多小球蹒跚跟随鼠标移动)

• Host: GitHub
• URL: https://github.com/hollowman6/staggered-mouse-balls
• Owner: HollowMan6
• License: gpl-3.0
• Created: 2020-11-06T09:32:22.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-03-07T07:55:21.000Z (over 5 years ago)
• Last Synced: 2025-06-10T10:51:57.256Z (about 1 year ago)
• Topics: mouse-tracking, react, staggered
• Language: JavaScript
• Homepage: http://practice.hollowman.ml/%F0%9F%94%B5%E2%9A%AA%F0%9F%94%B4%20Staggered%20Mouse%20Balls/StaggeredMouse/
• Size: 885 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# Staggered Mouse Balls

[![last-commit](https://img.shields.io/github/last-commit/HollowMan6/Staggered-Mouse-Balls)](../../graphs/commit-activity)

[![release-date](https://img.shields.io/github/release-date/HollowMan6/Staggered-Mouse-Balls)](https://github.com/HollowMan6/Staggered-Mouse-Balls/releases)

![Node.js Package](https://github.com/HollowMan6/Staggered-Mouse-Balls/workflows/Node.js%20Package/badge.svg)

[![Followers](https://img.shields.io/github/followers/HollowMan6?style=social)](https://github.com/HollowMan6?tab=followers)

[![watchers](https://img.shields.io/github/watchers/HollowMan6/Staggered-Mouse-Balls?style=social)](../../watchers)

[![stars](https://img.shields.io/github/stars/HollowMan6/Staggered-Mouse-Balls?style=social)](../../stargazers)

[![forks](https://img.shields.io/github/forks/HollowMan6/Staggered-Mouse-Balls?style=social)](../../network/members)

[![Open Source Love](https://img.shields.io/badge/-%E2%9D%A4%20Open%20Source-Green?style=flat-square&logo=Github&logoColor=white&link=https://hollowman6.github.io/fund.html)](https://hollowman6.github.io/fund.html)

[![GPL Licence](https://img.shields.io/badge/license-GPL-blue)](https://opensource.org/licenses/GPL-3.0/)

[![Repo-Size](https://img.shields.io/github/repo-size/HollowMan6/Staggered-Mouse-Balls.svg)](../../archive/master.zip)

[![Total alerts](https://img.shields.io/lgtm/alerts/g/HollowMan6/Staggered-Mouse-Balls.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/HollowMan6/Staggered-Mouse-Balls/alerts/)

[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/HollowMan6/Staggered-Mouse-Balls.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/HollowMan6/Staggered-Mouse-Balls/context:javascript)

(English version is down below.)

多小球蹒跚跟随鼠标移动。

此项目改编自 https://github.com/chenglou/react-motion#staggeredmotion-

[项目依赖](../../network/dependencies)

[示例网页](StaggeredMouse/index.html) 预览效果：http://practice.hollowman.ml/🔵⚪🔴%20Staggered%20Mouse%20Balls/StaggeredMouse/

观看在我的主页上的应用效果：https://hollowman6.github.io/ 

## 使用

请参考[示例网页](StaggeredMouse/index.html)来将[Staggered-Mouse-Balls.js](StaggeredMouse/StaggeredMouse/Staggered-Mouse-Balls.js)嵌入到你的网战中。

这里另外提供经过压缩后的js：[Staggered-Mouse-Balls.min.js](https://github.com/HollowMan6/HollowMan6.github.io/blob/master/js/Staggered-Mouse-Balls.min.js)

## 编译

* 安装依赖：执行 `npm install`

* 热编译（慢）：执行 `npm start`

然后在浏览器中直接访问 http://127.0.0.1:3000 查看实时编译效果。

* 直接编译：执行 `npm run build`

然后在`StaggeredMouse`目录下会另外生成一个`StaggeredMouse`文件夹，里面存放着编译好的`Staggered-Mouse-Balls.js`文件。这时你可以直接用浏览器打开`StaggeredMouse/index.html`查看效果。

# Staggered Mouse Balls

Staggered balls that follow mouse moves.

This project is derived from https://github.com/chenglou/react-motion#staggeredmotion-

[Project Dependencies](../../network/dependencies)

[Example Page](StaggeredMouse/index.html) real-time watching: http://practice.hollowman.ml/🔵⚪🔴%20Staggered%20Mouse%20Balls/StaggeredMouse/

Watch the effect on my Home Page: https://hollowman6.github.io/ 

## Usage

Please refer to the [Example Page](StaggeredMouse/index.html) to insert [Staggered-Mouse-Balls.js](StaggeredMouse/StaggeredMouse/Staggered-Mouse-Balls.js) into your website.

Here I provide the js that has been deflated：[Staggered-Mouse-Balls.min.js](https://github.com/HollowMan6/HollowMan6.github.io/blob/master/js/Staggered-Mouse-Balls.min.js)

## Compile

* Install Dependencies: run `npm install`

* Hot reloading (slow): run `npm start`

Then visit http://127.0.0.1:3000 to check hot reloading result.

* Direct Compile(faster): run `npm run build`

Then a `StaggeredMouse` folder will be produced under `StaggeredMouse` directory, where the successfully compiled `Staggered-Mouse-Balls.js` will be stored. Then you can open `StaggeredMouse/index.html` to check the result.