rfx-parallax

RfxParallax

Parallax made easy

Features

• Apply directive to your component and enjoy
• Image automatically adapts into its container
• Disable / enable parallax
• Disable / enable parallax container overflow
• Configurable image scroll percentage and z-index

Installation

Install the npm package:

npm install rfx-parallax

Import module:

import { RfxParallaxModule } from 'rfx-parallax';

@NgModule({
  imports: [
    RfxParallaxModule
  ]
})

Initialize parallax

In your app.component.ts initialize parallax listeners inside ngOnInit

import { RfxParallaxService } from 'rfx-parallax';

constructor(private rfxParallaxService: RfxParallaxService) {}

public ngOnInit(): void {
  this.rfxParallaxService.initListeners();
}

Usage

just apply libRfxParallax to your container and pass the image url

<div libRfxParallax imageUrl="<image-path>"></div>

Configuration

parallaxPercentage: number

(default value: 20)
percentage of image scrolling, e.g. 30% will scroll 30% of the image

imageZIndex: number

(default value: -1)
z-index property of the image

visibleOverflow: boolean

(default value: false)
container overflow

isDisabled: boolean

(default value: false)
is parallax disabled

Demo

TODO

License

This project is licensed under the MIT License