NgxSmoothParallax

DEMO

Get started:

Install:

npm i ngx-smooth-parallax

Import module

import { NgxSmoothParallaxModule } from 'ngx-smooth-parallax';

@NgModule({
    imports: [...
        NgxSmoothParallaxModule
    ],
    ...
})
export class AppModule {}

User directive with overflow:hidden wrapper:

<div class="scroll-element" style="height: 200vh">
  <div class="parallax-wrapper" style="overflow:hidden">
    <ngx-smooth-parallax [startOffsetParallax]="300">
      <img
        style="height:200px"
        [parallax]="true"
        src="https://picsum.photos/1000/300"
      />
    </ngx-smooth-parallax>
  </div>
  <div>
    Content
  </div>
</div>

Options

| Name | Description | | ------------- | ------------- | | parallax | type:boolean : True to enable parallax effect, otherwise false to turn it off. Default: true | | startOffsetParallax |type: number Offset top to start parallax Default: 0 | | scrollVelocity |type: number The parallax velocity, value from 0 - 10 Default: 0 |