Ngx-sbz-text-animation NPM

Floating Text Background Animation

demo-gif

An angular 10 directive for floating text background animation

Demo

Stackblitz

Installation

run this:
```
npm i ngx-sbz-text-animation
```

go to app.module and add this:

import {NgxSbzTextAnimationModule} from 'ngx-sbz-text-animation';

@NgModule({
    imports: [
        NgxSbzTextAnimationModule
    ]
})

add the css, you can do it in 2 ways:

add the import to the start of the main styles file inside the src folder (styles.css / styles.scss):
```
@import "../node_modules/ngx-sbz-text-animation/styles/ngx-sbz-text-animation.css";
```

add the style to the styles array inside the angular.json file:

"architect": {
  "build": {
    ...
    "options": {
      ...
      "styles": [
        "src/styles.scss",
        "node_modules/ngx-sbz-text-animation/styles/ngx-sbz-text-animation.css"
      ],
      ...
    },
    ...
  },
}

use like this:
```
<div sbzTextAnimation></div>
```
Enjoy :)

Inputs to customize to animation

Input	Type	Default	Description
maxFontSize	number	20	max font size of the text
colorSchemeArray	string[]	Rainbow colors	colors of the text
position	'left', 'right'	'right'	position of the flying text on the screen
percentOfScreen	number	30	percent of the text on the screen
zIndex	number	-1	z-index of the text.

Contribution

Want to contribute? Great! It's open source. 1. Fork it 2. Create your feature branch (git checkout -b my-new-feature) 3. Commit your changes (git commit -am 'Added some feature') 4. Push to the branch (git push origin my-new-feature) 5. Create new Pull Request

Thank you

this directive is an updated version of g1eb's work. he made this directive for angularJS. I just updated it for Angular 10 (and added a few features)