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:
;
Then in your base module:
imports:
Using in your application
Component
Use the component, providing the image URL, styling CSS for size and an optional config:
CSS example:
Directive
Put the directive on any component you have styled for it:
CSS:
- Note here you can set the background-size too.
Customisation
The parallax can accept a [config] value through the template:
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 |
License
MIT