np
ng2-parallaxscroll
npm i ng2-parallaxscroll
np

ng2-parallaxscroll

Parallax scroll directive for Angular, with support for Universal

by Christopher Johns

2.2.1 (see all)License:MITTypeScript:Built-In
Categories:Angular Parallax
npm i ng2-parallaxscroll
Readme

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:

ValueUse
axisaxis to scroll on, X or Y
speedspeed to scroll at; can be negative to change direction
initialValueinitial position in pixels
maxValuemaximum value for transform
minValueminimum value for transform
cssUnitcss unit to use for transform - px, %, vh, em etc.
scrollerIdif given, used to set the ID of which element is used to track scrolling. Defaults to window.
parallaxElementIf given, which element should scroll

License

MIT

Downloads/wk

43

GitHub Stars

25

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

19
VersionTagPublished
2.2.1
latest
3yrs ago
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate