https://github.com/phucbm/cursor-effects

A series of cursor effects.
https://github.com/phucbm/cursor-effects

cursor effects frontend gsap javascript jquery mouse mousemove

Last synced: 2 months ago
JSON representation

A series of cursor effects.

• Host: GitHub
• URL: https://github.com/phucbm/cursor-effects
• Owner: phucbm
• License: mit
• Created: 2021-06-26T01:12:02.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-07T03:03:13.000Z (about 3 years ago)
• Last Synced: 2023-03-10T02:06:35.608Z (almost 2 years ago)
• Topics: cursor, effects, frontend, gsap, javascript, jquery, mouse, mousemove
• Language: JavaScript
• Homepage: https://phucbm.github.io/cursor-effects
• Size: 3.8 MB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Cursor Effects](https://phucbm.github.io/cursor-effects/)

In this repository, you will find a several interesting effects which interact with mouse cursor.

Each effect has a demo, and the source code is open to use for everyone.

## Mouse Follower

![Mouse Follower](assets/images/mouse-follower-demo.gif "Mouse Follower")

This effect is rather simple. We will update an element's position based on the mouse's coordinates on the screen.

See demo at [/mouse-follower](https://phucbm.github.io/cursor-effects/mouse-follower) or check

the [source code](https://github.com/phucbm/cursor-effects/tree/main/mouse-follower)

## Magnetic Button

![Magnetic Button](assets/images/magnetic-button-demo.gif "Magnetic Button")

We will need a bit more of mathematics to get to know the way this effect works. See the chart below:

![Chart](assets/images/magnetic-button-chart.jpeg "Magnetic Button Chart")

We will create a virtual area around the element, whenever the mouse get into that area, the element will stick with the

mouse. To know when the mouse is designated zone, we will use a simple formula that we've learned from high school.

```js

OA = sqrt(pow(x, 2) + pow(y, 2));

```

See demo at [/magnetic-button](https://phucbm.github.io/cursor-effects/magnetic-button) or check

the [source code](https://github.com/phucbm/cursor-effects/tree/main/magnetic-button)

## Custom Cursor

![Custom Cursor](assets/images/custom-cursor-demo.gif "Custom Cursor")

This one is the most complex one in the series. The original code was from OsuBlake, you can check it out

on [CodePen](https://codepen.io/osublake/pen/3170174f4ce844f78c7789a279f8e50e). I've created a plugin-like function so

that we can reuse it anywhere. Go check the options table below:

|Option|Type|Default|Description|

|---|---|---|---|

|`targetClass`|`string`|'custom-cursor'|Create element with this class.|

|`wrapper`|`jQuery`|$('body')|Cursor will be appended to this element.|

|`speed`|`number`|.1|1 for fast, 0 for slow.|

|`movingDelay`|`number`|300|Stop turns true after delay of milliseconds.|

|`hasHover`|`boolean`|false|Turn on hover events.|

|`hoverTarget`|`jQuery`|$('a[href], button')|Elements that able to be hovered.|

|`touchDevices`|`boolean`|false|Show custom cursor on touch devices.|

See demo at [/custom-cursor](https://phucbm.github.io/cursor-effects/custom-cursor) or check

the [source code](https://github.com/phucbm/cursor-effects/tree/main/custom-cursor)