ng2-parallaxscroll
TypeScript icon, indicating that this package has built-in type declarations

2.2.1 • Public • Published

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

License

MIT

Package Sidebar

Install

npm i ng2-parallaxscroll

Weekly Downloads

17

Version

2.2.1

License

MIT

Unpacked Size

132 kB

Total Files

29

Last publish

Collaborators

  • tyrantwave