ngx-parallax-mousemove - npm Package Compare versions

Comparing version 0.0.0 to 1.0.0

bundles/ngx-parallax-mousemove.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common'], factory) :
-	(factory((global['ngx-parallax-mousemove'] = {}),global.ng.core,global.ng.common));
-}(this, (function (exports,core,common) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('parallax-js')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', 'parallax-js'], factory) :
+	(factory((global['ngx-parallax-mousemove'] = {}),global.ng.common,global.ng.core,global['parallax-js']));
+}(this, (function (exports,common,core,Parallax) { 'use strict';
 
-var HeaderComponent = (function () {
-    function HeaderComponent() {
+Parallax = Parallax && Parallax.hasOwnProperty('default') ? Parallax['default'] : Parallax;
+
+var LayerDirective = (function () {
+    /**
+     * @param {?} element
+     */
+    function LayerDirective(element) {
     }
@@ -13,11 +18,13 @@ /**
      */
-    HeaderComponent.prototype.ngOnInit = function () {
+    LayerDirective.prototype.ngOnInit = function () {
+        // depth is required in parallax.js
+        if (!this.depth) {
+            throw new Error('depth is required');
+        }
     };
-    return HeaderComponent;
+    return LayerDirective;
 }());
-HeaderComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'app-header',
-                template: "\n    <h1>\n      <ng-content></ng-content>\n      <hr>\n    </h1>\n  ",
-                styles: ["\n    h1 {\n      color: red;\n      text-align: center;\n    }\n  "]
+LayerDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: '[parallaxLayer]'
             },] },
@@ -28,9 +35,77 @@ ];
  */
-HeaderComponent.ctorParameters = function () { return []; };
-var HeaderModule = (function () {
-    function HeaderModule() {
+LayerDirective.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+]; };
+LayerDirective.propDecorators = {
+    'depth': [{ type: core.Input }, { type: core.HostBinding, args: ['attr.data-depth',] },],
+};
+var WrapperDirective = (function () {
+    /**
+     * @param {?} document
+     */
+    function WrapperDirective(document) {
+        this.document = document;
     }
-    return HeaderModule;
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngOnInit = function () {
+        if (!this.id) {
+            throw new Error('id is required');
+        }
+    };
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngAfterViewInit = function () {
+        console.log('this.id-------------------------' + this.id);
+        var /** @type {?} */ container = this.document.getElementById(this.id);
+        this.parallaxInstance = new Parallax(container, this.parallaxOptions);
+    };
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngOnDestroy = function () {
+        this.parallaxInstance.disable();
+    };
+    return WrapperDirective;
 }());
-HeaderModule.decorators = [
+/*
+set parallaxOptions(parallaxOptions: ParallaxProperties) {
+  this._parallaxOptions = parallaxOptions;
+  const keys = Object.keys(parallaxOptions);
+  for (const key in keys) {
+    if (keys[key]) {
+      this._parallaxOptions = Object.assign(this[key] !== undefined ? {[key]: this[key]} : {});
+    }
+  }
+ this._parallaxOptions = Object.keys(parallaxOptions).reduce((acc, key) =>
+       Object.assign(acc, this[key] !== undefined ? {[key]: this[key]} : {}),
+     {});
+}
+
+get parallaxOptions(): ParallaxProperties {
+  return this._parallaxOptions;
+}*/
+WrapperDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: '[parallaxWrapper]'
+            },] },
+];
+/**
+ * @nocollapse
+ */
+WrapperDirective.ctorParameters = function () { return [
+    { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] },] },
+]; };
+WrapperDirective.propDecorators = {
+    'id': [{ type: core.Input },],
+    'parallaxOptions': [{ type: core.Input },],
+};
+var ParallaxMousemoveModule = (function () {
+    function ParallaxMousemoveModule() {
+    }
+    return ParallaxMousemoveModule;
+}());
+ParallaxMousemoveModule.decorators = [
     { type: core.NgModule, args: [{
@@ -40,6 +115,4 @@ imports: [
                 ],
-                declarations: [HeaderComponent],
-                exports: [
-                    HeaderComponent // <-- this!
-                ]
+                declarations: [WrapperDirective, LayerDirective],
+                exports: [WrapperDirective, LayerDirective]
             },] },
@@ -50,6 +123,7 @@ ];
  */
-HeaderModule.ctorParameters = function () { return []; };
+ParallaxMousemoveModule.ctorParameters = function () { return []; };
 
-exports.HeaderModule = HeaderModule;
-exports.ɵa = HeaderComponent;
+exports.ParallaxMousemoveModule = ParallaxMousemoveModule;
+exports.ɵb = LayerDirective;
+exports.ɵa = WrapperDirective;
 
@@ -56,0 +130,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

bundles/ngx-parallax-mousemove.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(e["ngx-parallax-mousemove"]={},e.ng.core,e.ng.common)}(this,function(e,n,o){"use strict";var t=function(){function e(){}return e.prototype.ngOnInit=function(){},e}();t.decorators=[{type:n.Component,args:[{selector:"app-header",template:"\n    <h1>\n      <ng-content></ng-content>\n      <hr>\n    </h1>\n  ",styles:["\n    h1 {\n      color: red;\n      text-align: center;\n    }\n  "]}]}],t.ctorParameters=function(){return[]};var r=function(){return function(){}}();r.decorators=[{type:n.NgModule,args:[{imports:[o.CommonModule],declarations:[t],exports:[t]}]}],r.ctorParameters=function(){return[]},e.HeaderModule=r,e.ɵa=t,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("parallax-js")):"function"==typeof define&&define.amd?define(["exports","@angular/common","@angular/core","parallax-js"],t):t(e["ngx-parallax-mousemove"]={},e.ng.common,e.ng.core,e["parallax-js"])}(this,function(e,t,r,n){"use strict";n=n&&n.hasOwnProperty("default")?n["default"]:n;var o=function(){function e(e){}return e.prototype.ngOnInit=function(){if(!this.depth)throw new Error("depth is required")},e}();o.decorators=[{type:r.Directive,args:[{selector:"[parallaxLayer]"}]}],o.ctorParameters=function(){return[{type:r.ElementRef}]},o.propDecorators={depth:[{type:r.Input},{type:r.HostBinding,args:["attr.data-depth"]}]};var a=function(){function e(e){this.document=e}return e.prototype.ngOnInit=function(){if(!this.id)throw new Error("id is required")},e.prototype.ngAfterViewInit=function(){console.log("this.id-------------------------"+this.id);var e=this.document.getElementById(this.id);this.parallaxInstance=new n(e,this.parallaxOptions)},e.prototype.ngOnDestroy=function(){this.parallaxInstance.disable()},e}();a.decorators=[{type:r.Directive,args:[{selector:"[parallaxWrapper]"}]}],a.ctorParameters=function(){return[{type:undefined,decorators:[{type:r.Inject,args:[t.DOCUMENT]}]}]},a.propDecorators={id:[{type:r.Input}],parallaxOptions:[{type:r.Input}]};var i=function(){return function(){}}();i.decorators=[{type:r.NgModule,args:[{imports:[t.CommonModule],declarations:[a,o],exports:[a,o]}]}],i.ctorParameters=function(){return[]},e.ParallaxMousemoveModule=i,e.ɵb=o,e.ɵa=a,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-parallax-mousemove.umd.min.js.map

ngx-parallax-mousemove.d.ts

@@ -5,2 +5,3 @@ /**
 export * from './public_api';
-export { HeaderComponent as ɵa } from './src/app/modules/header/header.component';
+export { LayerDirective as ɵb } from './src/app/parallax-mousemove/layer.directive';
+export { WrapperDirective as ɵa } from './src/app/parallax-mousemove/wrapper.directive';

ngx-parallax-mousemove.es5.js

@@ -1,5 +0,9 @@
-import { Component, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-var HeaderComponent = (function () {
-    function HeaderComponent() {
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Directive, ElementRef, HostBinding, Inject, Input, NgModule } from '@angular/core';
+import Parallax from 'parallax-js';
+var LayerDirective = (function () {
+    /**
+     * @param {?} element
+     */
+    function LayerDirective(element) {
     }
@@ -9,11 +13,13 @@ /**
      */
-    HeaderComponent.prototype.ngOnInit = function () {
+    LayerDirective.prototype.ngOnInit = function () {
+        // depth is required in parallax.js
+        if (!this.depth) {
+            throw new Error('depth is required');
+        }
     };
-    return HeaderComponent;
+    return LayerDirective;
 }());
-HeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-header',
-                template: "\n    <h1>\n      <ng-content></ng-content>\n      <hr>\n    </h1>\n  ",
-                styles: ["\n    h1 {\n      color: red;\n      text-align: center;\n    }\n  "]
+LayerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[parallaxLayer]'
             },] },
@@ -24,9 +30,77 @@ ];
  */
-HeaderComponent.ctorParameters = function () { return []; };
-var HeaderModule = (function () {
-    function HeaderModule() {
+LayerDirective.ctorParameters = function () { return [
+    { type: ElementRef, },
+]; };
+LayerDirective.propDecorators = {
+    'depth': [{ type: Input }, { type: HostBinding, args: ['attr.data-depth',] },],
+};
+var WrapperDirective = (function () {
+    /**
+     * @param {?} document
+     */
+    function WrapperDirective(document) {
+        this.document = document;
     }
-    return HeaderModule;
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngOnInit = function () {
+        if (!this.id) {
+            throw new Error('id is required');
+        }
+    };
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngAfterViewInit = function () {
+        console.log('this.id-------------------------' + this.id);
+        var /** @type {?} */ container = this.document.getElementById(this.id);
+        this.parallaxInstance = new Parallax(container, this.parallaxOptions);
+    };
+    /**
+     * @return {?}
+     */
+    WrapperDirective.prototype.ngOnDestroy = function () {
+        this.parallaxInstance.disable();
+    };
+    return WrapperDirective;
 }());
-HeaderModule.decorators = [
+/*
+set parallaxOptions(parallaxOptions: ParallaxProperties) {
+  this._parallaxOptions = parallaxOptions;
+  const keys = Object.keys(parallaxOptions);
+  for (const key in keys) {
+    if (keys[key]) {
+      this._parallaxOptions = Object.assign(this[key] !== undefined ? {[key]: this[key]} : {});
+    }
+  }
+ this._parallaxOptions = Object.keys(parallaxOptions).reduce((acc, key) =>
+       Object.assign(acc, this[key] !== undefined ? {[key]: this[key]} : {}),
+     {});
+}
+
+get parallaxOptions(): ParallaxProperties {
+  return this._parallaxOptions;
+}*/
+WrapperDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[parallaxWrapper]'
+            },] },
+];
+/**
+ * @nocollapse
+ */
+WrapperDirective.ctorParameters = function () { return [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] },] },
+]; };
+WrapperDirective.propDecorators = {
+    'id': [{ type: Input },],
+    'parallaxOptions': [{ type: Input },],
+};
+var ParallaxMousemoveModule = (function () {
+    function ParallaxMousemoveModule() {
+    }
+    return ParallaxMousemoveModule;
+}());
+ParallaxMousemoveModule.decorators = [
     { type: NgModule, args: [{
@@ -36,6 +110,4 @@ imports: [
                 ],
-                declarations: [HeaderComponent],
-                exports: [
-                    HeaderComponent // <-- this!
-                ]
+                declarations: [WrapperDirective, LayerDirective],
+                exports: [WrapperDirective, LayerDirective]
             },] },
@@ -46,7 +118,7 @@ ];
  */
-HeaderModule.ctorParameters = function () { return []; };
+ParallaxMousemoveModule.ctorParameters = function () { return []; };
 /**
  * Generated bundle index. Do not edit.
  */
-export { HeaderModule, HeaderComponent as ɵa };
+export { ParallaxMousemoveModule, LayerDirective as ɵb, WrapperDirective as ɵa };
 //# sourceMappingURL=ngx-parallax-mousemove.es5.js.map

ngx-parallax-mousemove.js

@@ -1,27 +0,86 @@
-import { Component, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Directive, ElementRef, HostBinding, Inject, Input, NgModule } from '@angular/core';
+import Parallax from 'parallax-js';
 
-class HeaderComponent {
-    constructor() { }
+class LayerDirective {
     /**
+     * @param {?} element
+     */
+    constructor(element) {
+    }
+    /**
      * @return {?}
      */
     ngOnInit() {
+        // depth is required in parallax.js
+        if (!this.depth) {
+            throw new Error('depth is required');
+        }
     }
 }
-HeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-header',
-                template: `
-    <h1>
-      <ng-content></ng-content>
-      <hr>
-    </h1>
-  `,
-                styles: [`
-    h1 {
-      color: red;
-      text-align: center;
+LayerDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[parallaxLayer]'
+            },] },
+];
+/**
+ * @nocollapse
+ */
+LayerDirective.ctorParameters = () => [
+    { type: ElementRef, },
+];
+LayerDirective.propDecorators = {
+    'depth': [{ type: Input }, { type: HostBinding, args: ['attr.data-depth',] },],
+};
+
+class WrapperDirective {
+    /**
+     * @param {?} document
+     */
+    constructor(document) {
+        this.document = document;
     }
-  `]
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (!this.id) {
+            throw new Error('id is required');
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        console.log('this.id-------------------------' + this.id);
+        const /** @type {?} */ container = this.document.getElementById(this.id);
+        this.parallaxInstance = new Parallax(container, this.parallaxOptions);
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.parallaxInstance.disable();
+    }
+}
+/*
+set parallaxOptions(parallaxOptions: ParallaxProperties) {
+  this._parallaxOptions = parallaxOptions;
+  const keys = Object.keys(parallaxOptions);
+  for (const key in keys) {
+    if (keys[key]) {
+      this._parallaxOptions = Object.assign(this[key] !== undefined ? {[key]: this[key]} : {});
+    }
+  }
+ this._parallaxOptions = Object.keys(parallaxOptions).reduce((acc, key) =>
+       Object.assign(acc, this[key] !== undefined ? {[key]: this[key]} : {}),
+     {});
+}
+
+get parallaxOptions(): ParallaxProperties {
+  return this._parallaxOptions;
+}*/
+WrapperDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[parallaxWrapper]'
             },] },
@@ -32,7 +91,13 @@ ];
  */
-HeaderComponent.ctorParameters = () => [];
+WrapperDirective.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] },] },
+];
+WrapperDirective.propDecorators = {
+    'id': [{ type: Input },],
+    'parallaxOptions': [{ type: Input },],
+};
 
-class HeaderModule {
+class ParallaxMousemoveModule {
 }
-HeaderModule.decorators = [
+ParallaxMousemoveModule.decorators = [
     { type: NgModule, args: [{
@@ -42,6 +107,4 @@ imports: [
                 ],
-                declarations: [HeaderComponent],
-                exports: [
-                    HeaderComponent // <-- this!
-                ]
+                declarations: [WrapperDirective, LayerDirective],
+                exports: [WrapperDirective, LayerDirective]
             },] },
@@ -52,3 +115,3 @@ ];
  */
-HeaderModule.ctorParameters = () => [];
+ParallaxMousemoveModule.ctorParameters = () => [];
 
@@ -59,3 +122,3 @@ /**
 
-export { HeaderModule, HeaderComponent as ɵa };
+export { ParallaxMousemoveModule, LayerDirective as ɵb, WrapperDirective as ɵa };
 //# sourceMappingURL=ngx-parallax-mousemove.js.map

ngx-parallax-mousemove.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"HeaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"app-header","template":"\n    <h1>\n      <ng-content></ng-content>\n      <hr>\n    </h1>\n  ","styles":["\n    h1 {\n      color: red;\n      text-align: center;\n    }\n  "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"HeaderModule":"./src/app/modules/header/header.module","ɵa":"./src/app/modules/header/header.component"},"importAs":"ngx-parallax-mousemove"}
+{"__symbolic":"module","version":3,"metadata":{"ParallaxMousemoveModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[parallaxWrapper]"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"parallaxOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT"}]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[parallaxLayer]"}]}],"members":{"depth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.data-depth"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"ParallaxMousemoveModule":"./src/app/parallax-mousemove/parallax-mousemove.module","ɵa":"./src/app/parallax-mousemove/wrapper.directive","ɵb":"./src/app/parallax-mousemove/layer.directive"},"importAs":"ngx-parallax-mousemove"}

package.json

@@ -1,1 +0,1 @@
-{"name":"ngx-parallax-mousemove","version":"0.0.0","license":"MIT","scripts":{"ng":"ng","start":"ng serve --aot","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json"},"private":false,"dependencies":{"@angular/animations":"^5.0.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","core-js":"^2.4.1","rxjs":"^5.5.2","zone.js":"^0.8.14"},"devDependencies":{"@angular/cli":"1.5.0","@angular/compiler-cli":"^5.0.0","@angular/language-service":"^5.0.0","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.4.2"},"main":"bundles/ngx-parallax-mousemove.umd.js","module":"ngx-parallax-mousemove.es5.js","es2015":"ngx-parallax-mousemove.js","typings":"ngx-parallax-mousemove.d.ts","metadata":"ngx-parallax-mousemove.metadata.json"}
+{"name":"ngx-parallax-mousemove","version":"1.0.0","license":"MIT","description":"A simple angular lib for creating a parallax effect connected to the mousemove event","scripts":{"ng":"ng","start":"ng serve --aot","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","packagr":"ng-packagr -p ng-package.json"},"private":false,"dependencies":{"@angular/animations":"^5.0.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","core-js":"^2.4.1","rxjs":"^5.5.2","zone.js":"^0.8.14"},"devDependencies":{"@angular/cli":"1.5.0","@angular/compiler-cli":"^5.0.0","@angular/language-service":"^5.0.0","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","parallax-js":"^3.1.0","protractor":"~5.1.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.4.2"},"homepage":"https://github.com/bhebb/ngx-parallax-mousemove","repository":{"type":"git","url":"[e-mail]:bhebb/ngx-parallax-mousemove.git"},"main":"bundles/ngx-parallax-mousemove.umd.js","module":"ngx-parallax-mousemove.es5.js","es2015":"ngx-parallax-mousemove.js","typings":"ngx-parallax-mousemove.d.ts","metadata":"ngx-parallax-mousemove.metadata.json"}

public_api.d.ts

@@ -1,1 +0,1 @@
-export * from './src/app/modules/header/header.module';
+export * from './src/app/parallax-mousemove/parallax-mousemove.module';

README.md

@@ -1,27 +0,41 @@
-# NgxParallaxMousemove
+# ngx-parallax-mousemove
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
+A simple angular module for creating a parallax effect connected to the mousemove event.
 
-## Development server
+The module provides some angular directives wrapper arround parallax-js. 
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Installation
 
-## Code scaffolding
+If you're using npm :
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+`npm i -s ngx-parallax-mousemove`
 
-## Build
+It is also possible to install locally:
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+`npm install --save-dev ngx-parallax-mousemove`
 
-## Running unit tests
+## Usage
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- Add ParallaxMousemoveModule in your app.
 
-## Running end-to-end tests
+There are 2 main directives to use :
+- ParallaxWrapper and parallaxLayer.
+ 
+ ```html
+ <ul parallaxWrapper id="scene" [parallaxOptions]="{scalarX:40, scalarY:20,  frictionX:0.1,  frictionY:0.1, originX:0.4, originY:0.4}">
+      <li parallaxLayer [depth]="0.90" style="position: absolute;min-width: 100%;">
+        <img src="/assets/img/cloud.png" style="width: 960px;height: 300px">
+      </li>
+      <li parallaxLayer [depth]="0.50" style="min-width: 100%;height: auto;">
+        <img src="/assets/img/mountain.png" style="position: absolute;width: 100%;height: auto">
+      </li>
+    </ul>
+  ```
+  
+ - The id attribute in parallaxWrapper element is mandatory for parallax component.
+ - parallaxOptions is a set of parallax properties that can be apply on layers. See [parallax-js](https://github.com/wagerfield/parallax) for more details.
+ - parallaxLayer: Each layer needs a depth attribute corresponding to data-depth in parallax-js. The movement applied to each layer will be multiplied by its depth attribute.  
+  
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+## Licence
+MIT http://rem.mit-license.org

src/typings.d.ts

 /* SystemJS module definition */
 declare var module: NodeModule;
+
 interface NodeModule {
   id: string;
 }
+
+declare var Parallax: any;

New 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

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46974

increased by99.06%

Number of package files

18

increased by5.88%

Lines of code

418

increased by138.86%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

42

increased by50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

21

increased by5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes