rfx-parallax

RfxParallax - parallax made easy

Usage no npm install needed!

<script type="module">
  import rfxParallax from 'https://cdn.skypack.dev/rfx-parallax';
</script>

README

RfxParallax

Parallax made easy

Features

  • Apply directive to your component and enjoy
  • Image automatically adapts into its container
  • Compatible with custom scrollbars
  • Disable / enable parallax
  • Disable / enable parallax container overflow
  • Configurable image scroll percentage, z-index and zoom position
  • Best performance with translate3d
  • Asynchronous browser scrolling disabled for better performance (Coming soon)

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();
}

and if you have a custom scrollbar component you can pass the nativeElement to the initListeners() function like this:
WARNING: use ngAfterViewInit instead of ngOnInit otherwise your nativeElement may not be defined

<custom-scrollbar #scrollbar>
  <!-- Your page here -->
</custom-scrollbar>
@ViewChild('scrollbar') public scrollbarElement: ElementRef;

public ngAfterViewInit(): void {
  this.rfxParallaxService.initListeners(this.scrollbarElement.nativeElement);
}

Usage

just apply libRfxParallax to your container and pass the image url

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

Configuration

parallaxPercentage: number

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

positionPercentage: number

(default value: 50)
image zoom position in percentage, e.g. 50% will zoom to the center

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

forceFullWidth: boolean

(default value: false)
force image to be the same width as container. usefull when you have visibleOverflow set to true


Missing configuration parameter?
Request it here: https://github.com/RedFoxxo/RFXLibrary/issues


Demo

https://demo.redfoxxo.dev/rfx-parallax

License

This project is licensed under the MIT License