vue-mouse-parallax - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "vue-mouse-parallax",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
@@ -5,0 +5,0 @@ "serve": "vue-cli-service serve",

README.md

@@ -1,29 +0,83 @@
-# v1
+# vue-mouse-parallax
 
-## Project setup
+[![npm](https://img.shields.io/npm/v/vue-mouse-parallax.svg) ![npm](https://img.shields.io/npm/dm/vue-mouse-parallax.svg)](https://www.npmjs.com/package/vue-mouse-parallax)
+[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
+
+An easy to use Mouse Parallax Component - Made with Vue.js
+
+## Demo
+
+[vuejs mouse parallax](https://aminerman.com/playground/vuejs-mouse-parallax/)
+
+
+# Installation
+
 ```
-npm install
+npm install --save vue-mouse-parallax
 ```
 
-### Compiles and hot-reloads for development
+## Default import
+
+Install all the components:
+
+```javascript
+import Vue from 'vue'
+import VueMouseParallax from 'vue-mouse-parallax'
+
+Vue.use(VueMouseParallax)
 ```
-npm run serve
-```
 
-### Compiles and minifies for production
+Use specific components:
+
+```javascript
+import Vue from 'vue'
+import { ParallaxContainer, ParallaxElement } from 'vue-mouse-parallax'
+
+Vue.component('parallax-container', ParallaxContainer)
+Vue.component('parallax-element', ParallaxElement)
 ```
-npm run build
-```
 
-### Run your tests
+## Browser
+
+```html
+<script src="vue.js"></script>
+<script src="vue-mouse-parallax/dist/vue-mouse-parallax.common.js"></script>
 ```
-npm run test
-```
 
-### Lints and fixes files
+
+# Usage
+
+In order for the effect to work, the `<parallax-element />` should be contained within `<parallax-container />`
+
+Options can then be passed to `<parallax-element />` like so :
+
+```html
+<parallax-container tag="div" easing="linear">
+    <parallax-element :parallaxStrength="-5" type="translation" tag="div">
+        <h2>Put your content here</h2>
+     </parallax-element>
+</parallax-container>
 ```
-npm run lint
-```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## Props
+
+### parallax-container
+
+| Prop   |      Type      |  Default Value | Description
+|----------|:-------------:|------|------|
+| animationDuration |  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 |
+| perspective |  Number   | 1000 | Effective for the 'depth' parallax type |
+
+### parallax-element
+| Prop   |      Type      |  Default Value | Description
+|----------|:-------------:|------|------|
+| parallaxStrength |  Number | 10 | Strength of the Parallax Effect |
+| type |  String   | 'translation' | 'translation' - 'rotation' - 'depth' |
+| tag |  String   | div | Takes any valid html tag |
+
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

722671

increased by0.26%

Number of lines in readme file

84

increased by180%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes