NASA Planetary Mission

    v-shine

    1.2.1 • Public • Published

    v-shine

    A Vue directive that creates a shine effect on any element.

    Installation

    npm i v-shine
    

    Registering 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>

    Demo

    https://codepen.io/jacobgibellini/pen/zVqLLd

    Install

    npm i v-shine

    DownloadsWeekly Downloads

    0

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    392 kB

    Total Files

    18

    Last publish

    Collaborators

    • jacobgibellini