vue-proximity-feedback

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

TODO

• fix frame stutter when animation speed change.