A parallax directive for Angular 2+, now with Universal support!
See an example here: https://tyrantwave.github.io/ng2-parallaxscroll/
- Install from npm:
npm install --save ng2-parallaxscroll
- Clone from git:
git clone https://github.com/TyrantWave/ng2-parallaxscroll
Reference the directive in the main module:
import { ParallaxScrollModule } from 'ng2-parallaxscroll';Then in your base module:
imports: [
ParallaxScrollModule,
]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%;
}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%;
}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% |
MIT