vue-proximity-feedback
v1.0.0
Published
change item animation speed based on mouse proximity
Downloads
4
Maintainers
Readme
Vue Proximity Feedback
Installation
npm install vue-proximity-feedback --save
Usage
register the component.
window.Vue = require('vue') Vue(ProximityFeedback, require('vue-proximity-feedback'))
create a css animation
@keyframes pulse { to { transform: scale(1.4); } } .pulse { animation: pulse 0.25s ease infinite alternate; }
usage
<proximity-feedback ref="pfb" tag="div" animation-class="pulse" :distance="{min: 10, max: 400}" :divide-by="125" @click.native="doSomthing()"> <i class="fa-search"></i> </proximity-feedback>
- you can conditionaly start / stop the mouse tracking through
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 |
- you can conditionaly start / stop the mouse tracking through
TODO
- fix frame stutter when animation speed change.