ngx-parallaxs-scroll

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

Demo

Example application: https://ngx-parallax-scroll.stackblitz.io


StackBlitz example: https://stackblitz.com/edit/ngx-parallax-scroll

Installation

Install from npm:

npm i ngx-parallax-scroll --save

Importing

Reference the directive in the main module:

import { NgxParallaxScrollModule } from 'ngx-parallax-scroll';

Then in your base module:

@NgModule({
imports: [
...,
NgxParallaxScrollModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})

Using

$3

Use the component, providing content for parallax effect, and config.

In template:

In component:

import { Component } from '@angular/core';
import { IParallaxScrollConfig } from 'ngx-parallax-scroll';

@Component({
...
})
export class AppComponent {
ngParallaxConf: IParallaxScrollConfig = {
parallaxSpeed: 1,
parallaxSmoothness: 1,
parallaxDirection: 'reverse',
parallaxTimingFunction: 'ease-in',
parallaxThrottleTime: 80
};
}

$3

Use the directive, providing properties:

class="parallax-img"
alt="parallax-img"
ngxParallaxScroll
[parallaxSpeed]='1'
[parallaxSmoothness]='1'
[parallaxDirection]='"straight"'
[parallaxTimingFunction]='"linear"'
[parallaxThrottleTime]='0'>

or providing config:

class="parallax-img"
alt="parallax-img"
ngxParallaxScroll
[config]="ngParallaxConf">

Expected properties

| Attribute | Type | Optinal | Default | Description |
| ---------------------- | ------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| parallaxSpeed | number | no | - | Set scroll-speed behavior on scroll event |
| parallaxSmoothness | number | no | - | Set smooth effect (css transition time) |
| parallaxDirection | string | yes | straight | Set element movement direction
('straight' or 'reverse') |
| parallaxTimingFunction | string | yes | linear | Set css timing-function.
Accept timing-function |
| parallaxThrottleTime | number | yes | 0 | Set throttling for scroll event |

License

MIT