ng2-parallaxscroll

A parallax directive for Angular 2+, now with Universal support!

See an example here: https://tyrantwave.github.io/ng2-parallaxscroll/

Installation

• Install from npm:

npm install --save ng2-parallaxscroll

• Clone from git:

git clone https://github.com/TyrantWave/ng2-parallaxscroll

Importing to your application

Reference the directive in the main module:

import { ParallaxScrollModule } from 'ng2-parallaxscroll';

Then in your base module:

imports: [
    ParallaxScrollModule,
]

Using in your application

Component

Use the component, providing the image URL, styling CSS for size and an optional config:

<ng-parallax img="path/to/img" [config]="someConfig" class="some-class"></ng-parallax>

CSS example:

.some-class {
  height: 300px;
  width: 75%;
}

Directive

Put the directive on any component you have styled for it:

<div parallax class="some-parallax"></div>

CSS:

• Note here you can set the background-size too.

.some-parallax {
  background-image: url('/parallax_img.jpg');
  background-size: 100%;
  height: 300px;
  width: 100%;
}

Customisation

The parallax can accept a [config] value through the template:

<div parallax class='blah' [config]="{axis: X, speed: -.3}">

Or you can import the IParallaxScrollConfig type for linting.

The config gives the following options:

Value	Use
axis	axis to scroll on, X or Y
speed	speed to scroll at; can be negative to change direction
initialValue	initial position in pixels
maxValue	maximum value for transform
minValue	minimum value for transform
cssUnit	css unit to use for transform - px, %, vh, em etc.
scrollerId	if given, used to set the ID of which element is used to track scrolling. Defaults to window.
parallaxElement	If given, which element should scroll
parallaxPivot	Initial offset to use for the scroll, defaults to 50%

License

MIT