UNPKG

ngx-parallax-scroll

Version:

This is a simple angular plugin, that allows us to implement parallax effect for some element in page

2 lines 5.39 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@angular/core")):"function"==typeof define&&define.amd?define("ngx-parallax-scroll",["exports","@angular/common","rxjs","rxjs/operators","@angular/core"],t):t(e["ngx-parallax-scroll"]={},e.ng.common,e.rxjs,e.rxjs.operators,e.ng.core)}(this,function(e,t,r,a,n){"use strict";var i=(o.prototype.ngOnInit=function(){t.isPlatformServer(this.platformId)||(this.initParallax(),this.setParallaxElTransform(),this.setParallaxTransition())},o.prototype.ngOnChanges=function(e){var t=e.parallaxSpeed&&e.parallaxSpeed.currentValue||e.config&&e.config.currentValue.parallaxSpeed,r=e.parallaxSmoothness&&e.parallaxSmoothness.currentValue||e.config&&e.config.currentValue.parallaxSmoothness,a=e.parallaxDirection&&e.parallaxDirection.currentValue||e.config&&e.config.currentValue.parallaxDirection,n=e.parallaxTimingFunction&&e.parallaxTimingFunction.currentValue||e.config&&e.config.currentValue.parallaxTimingFunction,i=e.parallaxThrottleTime&&e.parallaxThrottleTime.currentValue||e.config&&e.config.currentValue.parallaxThrottleTime;this.setParallaxSpeed(t),this.setParallaxSmoothness(r),this.setParallaxDirection(a),this.setParallaxTimingFun(n),this.setParallaxThrottleTime(i)},o.prototype.ngAfterViewInit=function(){},o.prototype.ngOnDestroy=function(){this.scrollSubscribtion&&this.scrollSubscribtion.unsubscribe()},o.prototype.initParallax=function(){var e=this;this.scrollSubscribtion=r.fromEvent(window,"scroll").pipe(a.throttleTime(this.prlxThrottleTime)).subscribe(function(){e.setParallaxElTransform()})},o.prototype.setParallaxElTransform=function(){var e=window.pageYOffset;this.renderer.setStyle(this.elem.nativeElement,"transform","translateY("+e*this.prlxSpeed+"px) translateZ(0)")},o.prototype.setParallaxTransition=function(){this.renderer.setStyle(this.elem.nativeElement,"transition","transform "+this.prlxSmoothness+"s "+this.prlxTimingFun)},o.prototype.setParallaxSpeed=function(e){this.validateParallaxSpeed(e,"parallaxSpeed","number")&&(this._parallaxSpeedVal=e)},o.prototype.setParallaxSmoothness=function(e){this.validateParallaxSmoothness(e,"parallaxSmoothness","number")&&(this._parallaxSmoothnessVal=e)},o.prototype.setParallaxDirection=function(e){e&&this.isTypeOf(e,"string","parallaxDirection")&&"reverse"===e&&(this._parallaxSpeedVal*=-1)},o.prototype.setParallaxTimingFun=function(e){e&&this.isTypeOf(e,"string","parallaxTimingFunction")&&(this._parallaxTimingFunVal=e)},o.prototype.setParallaxThrottleTime=function(e){e&&this.isTypeOf(e,"number","parallaxThrottleTime")&&(this._parallaxThrottleTime=e)},Object.defineProperty(o.prototype,"prlxSpeed",{get:function(){return this._parallaxSpeedVal},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"prlxSmoothness",{get:function(){return this._parallaxSmoothnessVal},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"prlxTimingFun",{get:function(){return this._parallaxTimingFunVal},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"prlxThrottleTime",{get:function(){return this._parallaxThrottleTime},enumerable:!0,configurable:!0}),o.prototype.isProvided=function(e,t){if((null==e||""===e)&&n.isDevMode())throw new Error(this.directiveName+": @Input ["+t+"] is required, but was not provided");return!0},o.prototype.isTypeOf=function(e,t,r){if(typeof e!==t&&n.isDevMode())throw new Error(this.directiveName+": @Input ["+r+"] is expected to be of type '"+t+"', but type '"+typeof e+"' was provided");return!0},o.prototype.isPositive=function(e,t){if("number"==typeof e&&!(0<=e)&&n.isDevMode())throw new Error(this.directiveName+": @Input ["+t+"] is expected to be positive value, but negative '"+e+"' value was provided");return!0},o.prototype.validateParallaxSpeed=function(e,t,r){return this.isProvided(e,t)&&this.isTypeOf(e,r,t)&&this.isPositive(e,t)},o.prototype.validateParallaxSmoothness=function(e,t,r){return this.isProvided(e,t)&&this.isTypeOf(e,r,t)&&this.isPositive(e,t)},o.decorators=[{type:n.Directive,args:[{selector:"[ngxParallaxScroll]"}]}],o.ctorParameters=function(){return[{type:n.ElementRef},{type:n.Renderer2},{type:Object,decorators:[{type:n.Inject,args:[n.PLATFORM_ID]}]}]},o.propDecorators={config:[{type:n.Input}],parallaxSpeed:[{type:n.Input}],parallaxSmoothness:[{type:n.Input}],parallaxDirection:[{type:n.Input}],parallaxTimingFunction:[{type:n.Input}],parallaxThrottleTime:[{type:n.Input}]},o);function o(e,t,r){this.elem=e,this.renderer=t,this.platformId=r,this._parallaxTimingFunVal="linear",this._parallaxThrottleTime=0,this.directiveName=this.constructor.name}var l=(s.prototype.ngOnInit=function(){},s.decorators=[{type:n.Component,args:[{selector:"ngx-parallax-scroll",template:'\n <div class="parallax-container" ngxParallaxScroll [config]="config">\n <ng-content></ng-content>\n </div>\n ',styles:["\n .parallax-container display: inline-block;\n "]}]}],s.ctorParameters=function(){return[]},s.propDecorators={config:[{type:n.Input}]},s);function s(){}var p=(c.decorators=[{type:n.NgModule,args:[{declarations:[l,i],imports:[],exports:[l,i]}]}],c);function c(){}e.ParallaxScrollDirective=i,e.NgxParallaxScrollComponent=l,e.NgxParallaxScrollModule=p,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-parallax-scroll.umd.min.js.map