Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-kinesis
Advanced tools
Easily create complexe interactive animations with Vue.js
Weekly downloads
Readme
Easy to use Vue.js components for creating interactive animations
npm install --save vue-kinesis@next
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");
npm install --save vue-kinesis
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)
<script src="vue.js"></script>
<script src="vue-kinesis.min.js"></script>
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 |
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 |
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 |
Migration from vue-mouse-parallax is quite easy:
FAQs
Easily create complexe interactive animations with Vue.js
The npm package vue-kinesis receives a total of 4,625 weekly downloads. As such, vue-kinesis popularity was classified as popular.
We found that vue-kinesis demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.