https://github.com/ctf0/vue-proximity-feedback
https://github.com/codrops/ProximityFeedback/ "not exactly"
https://github.com/ctf0/vue-proximity-feedback
Last synced: over 1 year ago
JSON representation
https://github.com/codrops/ProximityFeedback/ "not exactly"
- Host: GitHub
- URL: https://github.com/ctf0/vue-proximity-feedback
- Owner: ctf0
- License: mit
- Created: 2018-08-17T22:03:24.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:06:21.000Z (over 3 years ago)
- Last Synced: 2024-10-11T12:18:54.847Z (over 1 year ago)
- Language: Vue
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue Proximity Feedback
## Installation
```bash
npm install vue-proximity-feedback --save
```
## Usage
- register the component.
```js
window.Vue = require('vue')
Vue.component(ProximityFeedback, require('vue-proximity-feedback').default)
```
- create a css animation
```css
@keyframes pulse {
to {
transform: scale(1.4);
}
}
.pulse {
animation: pulse 0.25s ease infinite alternate;
}
```
- usage
```html
```
- you can conditionaly start / stop the mouse tracking through
```vue
this.$refs.pfb.stop()
this.$refs.pfb.start()
```
| prop | required | type | default | description |
|----------------|--------------------|--------|--------------------|----------------------------------------|
| tag | :x: | string | span | |
| animationClass | :white_check_mark: | string | | |
| distance | :x: | object | {min: 0, max: 100} | |
| divideBy | :x: | number | 100 | proximity / divideBy = animation speed |
## TODO
- fix frame stutter when animation speed change.