1.2.1 • Published 4 years ago
v-shine v1.2.1
v-shine
A Vue directive that creates a shine effect on any element.
Installation
npm i v-shineRegistering the directive in Vue:
// Global Instance - in your main.js file
import shine from 'v-shine';
Vue.use(shine);// Single Instance
import shine from 'v-shine';
new Vue({
directives: { shine }
})Options
| Property | Description | Type | Default |
|---|---|---|---|
| event | The event the animation will react to on the element. | String | 'mouseenter' |
| time | The number of seconds for the shine to complete its animation. | Number | 1.5 |
| ease | The easing function of the shine. | String | 'ease' |
| color | The color of the shine. | String | '#fff' |
| angle | The angle of the shine. This will default to the diagonal length of the element. | Number | |
| blur | The amount of blur applied on the shine element. | Number | 8 |
| delay | Number of seconds before the shine animation starts. | Number | 0 |
| opacity | The opacity of the shine. | Number (0 - 1) | 0.4 |
| shineWidth | The thickness of the shine bar. This will default to a quarter of the main element's size. | Number | |
| fromLeft | Determines if the shine will swipe from the left or from the right. | Boolean | true |
| extraShine | Adds a trailing shine to add more effect. | Boolean | false |
Usage
Shine can be applied onto an element by using "v-shine".
Basic usage example:
<div v-shine></div>Examples
<div v-shine="{ time: 1.2, ease: 'ease-in', color: '#ff0000', opacity: 0.5, fromLeft: false, extraShine: true }"></div><button v-shine="{ time: 0.3, ease: 'linear', blur: 10, delay: 1 }"></button>