perspective.js - npm Package Compare versions

Comparing version 0.1.7 to 1.0.0

package.json

 {
   "name": "perspective.js",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "description": "Parallax scrolling effect. And more.",
@@ -9,4 +9,4 @@ "main": "lib/perspective.common.js",
     "build:package": "node build/build.js",
-    "build:examples": "node build/examples.js",
-    "dist": "npm run build:package && npm run build:examples",
+    "build:example": "node build/examples.js",
+    "dist": "npm run build:package && npm run build:example",
     "pub": "npm run dist && sh release.sh"
@@ -13,0 +13,0 @@ },

README.md

@@ -9,11 +9,95 @@ # Perspective.js
 
-Working in progress. Please stay tuned.
-
 ## Features
 A standalone Javascript library to make dashing scrolling/hovering effects. Any CSS properties with number values are supported.
 
-## TODO
-- Documentation
-- Examples
-- Publish!
+## Installation
+### npm
+```shell
+npm install perspective.js
+# or
+yarn add perspective.js
+```
+
+Then in your project
+```javascript
+import { Scroll, Hover } from 'perspective.js'
+```
+
+### CDN
+```html
+<script type="text/javascript" src="//unpkg.com/perspective.js/lib/perspective.js"></script>
+```
+Once loaded, Perspective.js will register `perspective` to the `window` object, and it has two attributes: `Scroll` and `Hover`
+
+## Usage
+### Parallax scroll
+```javascript
+// using npm
+import { Scroll } from 'perspective.js'
+
+// using CDN
+const Scroll = perspective.Scroll
+
+new Scroll('#wrap', {
+  stages: [{
+    id: 'basic',
+    scrollNumber: 60,
+    transition: 0,
+    items: [{
+      id: 'slow',
+      effects: [{
+        property: 'transform',
+        start: 'translateY(0px)',
+        end: 'translateY(-50px)'
+      }]
+    }, {
+      id: 'fast',
+      effects: [{
+        property: 'transform',
+        start: 'translateY(0px)',
+        end: 'translateY(-180px)'
+      }]
+    }]
+  }]
+})
+```
+
+### Parallax translate
+```javascript
+// using npm
+import { Hover } from 'perspective.js'
+
+// using CDN
+const Hover = perspective.Hover
+
+new Hover('#wrap', {
+  max: 0,
+  scale: 1.1,
+  perspective: 500,
+  layers: [{
+    multiple: 0.1,
+    reverseTranslate: true
+  }, {
+    multiple: 0.3,
+    reverseTranslate: true
+  }]
+})
+```
+
+### Parallax tilt
+```javascript
+// using npm
+import { Hover } from 'perspective.js'
+
+// using CDN
+const Hover = perspective.Hover
+
+new Hover('#wrap', {
+  max: 400,
+  scale: 1.1,
+  perspective: 500
+})
+```
+
+## Roadmap
 - Mobile support
@@ -20,0 +104,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

173541

increased by3.32%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

110

increased by323.08%

No dependency changes