〽️ Alternation

ngx image parallax build on top of @angular/animations and @angular/cdk scrollable

npm i alternation --save
or
npm i alternation @angular/cdk @angular/animations --save

import { AlternationModule } from 'alternation';

@NgModule({
  imports: [
    AlternationModule,
  ],
})
export YourModule {}

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ScrollDispatchModule,
  ],
})
export AppModule {}

<alternation src="assets/image.png"></alternation>

alternation {
  height: 256px; // 75vh; 45vw; 12em;
}

  <alternation delay="200" src="assets/image.png"></alternation>

<main cdkScrollable fxLayout fxLayoutAlign="center center">
  <alternation *ngIf="document" [src]="document?.image"></alternation>
  <mat-spinner *ngIf="!document"></mat-spinner>
</main>

plans for 1.0.0

• tests
• demo
• documentation
• vertical scrolling
• optimization ??
• split to component <alter-image src="..."></alter-image> <alter-background src="..."> ... </alter-background>
• better handling of parallax element
• (text) line paralax scorlling ??

<!-- with stagger delay -->
<alter-list>
  <alter-line>Hello</alter-line>
  <alter-line>World</alter-line>
</alter-list>