alternation
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-beta.0 • Public • Published

〽️ 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>

Package Sidebar

Install

npm i alternation

Weekly Downloads

0

Version

1.0.0-beta.0

License

none

Unpacked Size

165 kB

Total Files

30

Last publish

Collaborators

  • inovative