Angular Parallax (SSR)

Simple way to Use parallax effect with Angular 16-17 compatible universal (SRR) (standalone and ngModule)

1- Install @yoozly/ngx-parallax package

npm i @yoozly/ngx-parallax
yarn i @yoozly/ngx-parallax

2- Import in your project

With Angular 17, you have 2 ways to import the directive (standalone or ngModule)

2.a- With standalone component

import { ParallaxStandaloneDirective } from '@yoozly/ngx-parallax';

@Component({
  selector: 'my-standalone-component',
  standalone: true,
  imports: [
    ...
    ParallaxStandaloneDirective
  ]
})
export class MyStandaloneComponent implements OnInit {
...
}

2.b- With ngModule

import { NgxParallaxModule } from '@yoozly/ngx-parallax';

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

3- Add the directive "ngx-parallax" in the angular component HTML template

<div class="image">
  <img src="./some-image.jpg" ngx-parallax />
</div>

Here you apply a css transform with translate3d on Y axis, if you want the famous parallax effect you can add this following css :

.image {
  height: 500px;
  position: relative;
  overflow: hidden;
}

.image > img {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  object-fit: cover;
}

Parameters to custom our directive

Change transform properties

<div class="image">
  <img
    src="./some-image.jpg"
    alt=""
    ngx-parallax
    property="transform"
    propertyValue="rotate"
    [speed]="50"
  />
</div>

Change CSS properties

<div class="image">
  <img
    src="./some-image.jpg"
    alt=""
    ngx-parallax
    [speed]="0.3"
    property="opacity"
  />
</div>

Negative number

<div class="image" ngx-parallax [speed]="-70">
  <img src="assets/1.jpg" alt="" />
</div>

Stop reactively parralax

<div class="image" ngx-parallax [active]="false">
  <img src="assets/1.jpg" alt="" />
</div>

<div class="image" ngx-parallax [active]="boolean$ | async">
  <img src="assets/1.jpg" alt="" />
</div>

API

| Name parameter | default value | custom value | usage | | -------------- | ------------- | ------------------------------------ | ---------------------------------- | | speed | 20 | a numeric value | play with the parallax sensitivity | | active | true | false | active or not parallax | | property | transform | all css property (opacity, width...) | to change the parallax usage | | propertyValue | translate3d | scale, rotate | add some other transformations | | axe | y | x | to change the transform axe |