〽️ 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 ??
<alter-list>
<alter-line>Hello</alter-line>
<alter-line>World</alter-line>
</alter-list>