vue-kinesis

    1.3.3 • Public • Published

    vue-kinesis

    npm vue2 vue2

    Easy to use Vue.js components for creating interactive animations

    Demo

    Kinesis Demo

    Vue3 - Installation

    npm install --save vue-kinesis@next
    

    Vue3 - Default import

    Install all the components:

    import { createApp } from "vue";
    import App from "./App.vue";
    import VueKinesis from "vue-kinesis";
    
    const app = createApp(App);
    app.use(VueKinesis);
    
    app.mount("#app");

    Vue2 - Installation

    npm install --save vue-kinesis
    

    Vue2 - Default import

    Install all the components:

    import Vue from 'vue'
    import VueKinesis from 'vue-kinesis'
    
    Vue.use(VueKinesis)

    Use specific components:

    import Vue from 'vue'
    import { KinesisContainer, KinesisElement } from 'vue-kinesis'
    
    Vue.component('kinesis-container', KinesisContainer)
    Vue.component('kinesis-element', KinesisElement)

    Browser

    <script src="vue.js"></script>
    <script src="vue-kinesis.min.js"></script>

    Usage

    How to use

    Props

    kinesis-container

    Prop Type Default Value Description
    active Boolean true To enable or disable the interactions
    duration Number 1000 Speed of the parallax animation in ms
    easing String "cubic-bezier(0.23, 1, 0.32, 1)" Easing of the parallax animation
    tag String div Takes any valid html tag
    event String "move" Event to which the container will react. Possible values are "move" and "scroll"
    perspective Number 1000 Effective for the 'depth' parallax type
    audio String Path towards an audio file
    playAudio Boolean Start/Stop the attached audio file

    kinesis-element

    Prop Type Default Value Description
    strength Number 10 Strength of the motion effect
    type String "translate" translate - rotate - scale - scaleX - scaleY - depth - depth_inv
    tag String "div" Takes any valid html tag
    transformOrigin String "center" Similar to the CSS transform-origin property
    originX Number 50 The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side.
    originY Number 50 The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side.
    axis String null Constrain the movement to one axis. Possible values: "x" - "y"
    maxX Number null Limit the maximum range of the movement on the X axis
    maxY Number null Limit the maximum range of the movement on the Y axis
    minX Number null Limit the minimum range of the movement on the X axis
    minY Number null Limit the minimum range of the movement on the Y axis
    cycle Number 0 How many times the movement will repeat

    kinesis-audio

    Prop Type Default Value Description
    audioIndex Number 50 To which frequency to react, on a range of integer values that goes from 0 to 127.
    strength Number 10 Strength of the motion effect
    type String "translate" translate - rotate - scale - scaleX - scaleY - depth - depth_inv
    tag String "div" Takes any valid html tag
    transformOrigin String "center" Similar to the CSS transform-origin property
    originX Number 50 The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side.
    originY Number 50 The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side.
    axis String null Constrain the movement to one axis. Possible values: "x" - "y"
    maxX Number null Limit the maximum range of the movement on the X axis
    maxY Number null Limit the maximum range of the movement on the Y axis
    minX Number null Limit the minimum range of the movement on the X axis
    minY Number null Limit the minimum range of the movement on the Y axis
    cycle Number 0 How many times the movement will repeat

    Migrating from vue-mouse-parallax

    Migration from vue-mouse-parallax is quite easy:

    Components

    • parallax-container -> kinesis-container
    • parallax-element -> kinesis-element

    Props

    • parallaxStrength -> strength
    • animationDuration -> duration

    Prop values

    • translation -> translate
    • rotation -> rotate

    License

    MIT

    Install

    npm i vue-kinesis

    DownloadsWeekly Downloads

    1,689

    Version

    1.3.3

    License

    none

    Unpacked Size

    112 kB

    Total Files

    11

    Last publish

    Collaborators

    • aminerman