Floating Text Background Animation

An angular 10 directive for floating text background animation

Demo

• Stackblitz

Installation

1. run this:

   npm i ngx-sbz-text-animation

2. go to app.module and add this:

   import {NgxSbzTextAnimationModule} from 'ngx-sbz-text-animation';
      
   @NgModule({
       imports: [
           NgxSbzTextAnimationModule
       ]
   })

3. 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"
           ],
           ...
         },
         ...
       },
     }

4. use like this:

   <div sbzTextAnimation></div>

5. 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)

License

• You can find the license here: License