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	❌	string	span
  animationClass	✅	string
  distance	❌	object	{min: 0, max: 100}
  divideBy	❌	number	100	proximity / divideBy = animation speed

TODO

• fix frame stutter when animation speed change.