Floating Text Background Animation In Angular

Author: blakazulu
Official Page: Go to website
Publish Date: November 2, 2020
License: MIT

Description:

An Angular directive to create a floating text background animation in app.

How to use it:

1. Install and import the directive.

# NPM
$ npm i ngx-sbz-text-animation --save
import {NgxSbzTextAnimationModule} from 'ngx-sbz-text-animation';
@import "../node_modules/ngx-sbz-text-animation/styles/ngx-sbz-text-animation.css";
@NgModule({
  imports: [
    NgxSbzTextAnimationModule
  ]
})

2. Apply a floating text background animation to an element as follows:

<div sbzTextAnimation></div>

3. Config the animation with the following options.

  • position: ‘left’, or ‘right’
  • maxFontSize: max font size
  • colorSchemeArray: an array of colors
<div sbzTextAnimation [position]="position" [maxFontSize]="20" [colorSchemeArray]="colorArray"></div>

Preview:

Floating Text Background Animation In Angular


You Might Be Interested In:

Add Comment