ng2-parallaxscroll is a parallax directive to implement a parallax scrolling effect on Angular 2+ applications.
An Easy-to-use Mouse Parallax Component for Vue.js
How to make use of it:
Installation:
npm install --save ng2-parallaxscroll
1. Reference the directive in the main module:
import { ParallaxScrollModule } from 'ng2-parallaxscroll';
2. 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>
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 | the initial position in pixels |
| maxValue | maximum value for transform |
| minValue | the 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 the window. |
| parallaxElement | If given, which element should scroll |
| parallaxPivot | The initial offset to use for the scroll defaults to 50% |
parallax directive for angular, ng2-parallaxscroll Plugin/Github
See Demo And Download
Official Website(TyrantWave): Click Here
This superior jQuery/javascript plugin is developed by TyrantWave. For extra advanced usage, please go to the official website.
