https://github.com/mystroken/mouse-explorer
:mouse2: Browse along a section clipped into a viewport using a mouse.
https://github.com/mystroken/mouse-explorer
interaction mouse mousemove sliding
Last synced: 8 months ago
JSON representation
:mouse2: Browse along a section clipped into a viewport using a mouse.
- Host: GitHub
- URL: https://github.com/mystroken/mouse-explorer
- Owner: mystroken
- License: mit
- Created: 2020-02-21T12:56:02.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-23T13:45:15.000Z (about 6 years ago)
- Last Synced: 2025-03-02T05:32:10.509Z (about 1 year ago)
- Topics: interaction, mouse, mousemove, sliding
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :mouse2: mouse-explorer
[](https://github.com/mystroken/mouse-explorer/issues)
Browse along a section clipped into a viewport using a mouse.
Vanilla Js - No dependencies - ~987B minified and gzipped
## Installation
```bash
npm install @mystroken/mouse-explorer
```
## Usage
Look at the sources files for more information.
```javascript
import createMouseExplorer from '@mystroken/mouse-explorer';
const viewport = document.querySelector('#viewport');
const section = document.querySelector('#container');
const explorer = createMouseExplorer({ viewport, section });
explorer.on(({ x, y }) => {
section.style.transform = `translate3d(${x},${y},0)`;
});
```
## Parameters
```javascript
const explorer = createMouseExplorer({
ease: 0.21,
viewport: document.querySelector('#viewport'),
section: document.querySelector('#container'),
center: true,
});
```
#### viewport
Determines the viewport that clips the section.
| Default | Type | Required |
| -------- | ------------- | -------- |
| `Window` | `HTMLElement` | **No** |
#### section
Determines the section to be explored.
| Default | Type | Required |
| ------- | ------------- | -------- |
| `null` | `HTMLElement` | **Yes** |
#### ease
Set the ease of movement (section moving inside the viewport).
| Default | Type | Required |
| ------- | -------- | -------- |
| `0.21` | `Number` | **No** |
#### center
Tells the explorer to center or not the section on start.
| Default | Type | Required |
| ------- | --------- | -------- |
| `false` | `Boolean` | **No** |
## Methods
#### on(callback)
Add a callback to be called on each mouse move on the section.
#### off(callback)
Remove a callback.
#### positionAt(x, y)
Get position (in pixel) for a given [-1,1] coordinates.
| Argument | Types | Info | Required |
| -------- | -------- | ------------------------------------- | -------- |
| x | `Number` | The given x-axis position (in pixel). | Yes |
| y | `Number` | The given y-axis position (in pixel). | Yes |
```javascript
const explorer = createMouseExplorer({ viewport, section });
// Position at center
explorer.positionAt(0, 0);
// Returns corresponding
// amount of pixels to slide in order
// to place the section in
// the middle of the viewport.
// { x: 284, y: 97 }
```