Showing posts with label ng-teximate. Show all posts
Showing posts with label ng-teximate. Show all posts
<img src="https://camo.githubusercontent.com/40d4ebc40b012bd27d14b1834ae0a63d395bc551/68747470733a2f2f63646e2e7261776769742e636f6d2f4d7572686166536f75736c692f6e672d746578696d6174652f39616362653564642f6173736574732f6c6f676f2e737667" height="300" width="300"></img> <br> ng-teximate


ng-teximate

October 09, 2017


A simple module for CSS3 text animations.

Teximate does 2 things:

  • Creates lines, words and letters elements from a text
  • Animates words or letters using animate.css

Installation

Install it with npm
npm install --save ng-teximate

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-teximate:
 map: {  
  'ng-teximate': 'node_modules/ng-teximate/bundles/ng-teximate.umd.js',  
 }  
Here is a working plunker

Usage

Import TeximateModule in your root module
 import {TeximateModule} from "ng-teximate";  
 @NgModule({  
  imports: [  
   TeximateModule  
  ]  
 }) 
Teximate uses animate.css to animate the words/letters.
Install it npm install animate.css --save and import it in your global style
 /* You can add global styles to this file, and also import other style files */  
 @import '~animate.css';  
Another way is to import it in index.html using the CDN
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>  
Now you can use Teximate component:
 <teximate [text]="text" [effect]="effectOptions" [hover]="hoverOptions"></teximate>  
 export class SomeComponent {  
  text = 'Teximate is working...';  
  effectOptions: TeximateOptions = {  
   type: 'letter',  
   animation: { name: 'zoomInLeft', duration: 1000 },  
   word: { type: TeximateOrder.SHUFFLE, delay: 100 },  
   letter: { type: TeximateOrder.SHUFFLE, delay: 50 }  
  };  
  hoverOptions: TeximateHover = {  
   type: 'letter',  
   in: 'zoomOutUp',  
   out: 'bounceInDown'  
  };  
 }   
Teximate animates the text automatically by changing the inputs.
Moreover, You can manually run an animation using the component reference and then call teximate.runEffect(options).
Example:
 @ViewChild(TeximateComponent) teximate: TeximateComponent;  
 ngOnInit(){  
  const diffOptions: TeximateOptions = {  
   type: 'letter',  
   animation: { name: 'jello', duration: 1000 },  
   word: { type: TeximateOrder.SEQUENCE, delay: 100 },  
   letter: { type: TeximateOrder.SEQUENCE, delay: 50 }  
  };  
  // run a different animation after 2 seconds  
  setTimeout(()=>{  
   this.teximate.runEffect(diffOptions, 'letter');  
  }, 2000);  
 }  

Styling:

Add styles to lines, words and letters of the text by using the classes .line .word .letter
for example:
 /** Add the custom css in the global style, not in the component stylesheet */  
 .letter{  
  text-shadow: 1px 1px 1px rgba(#000, .5);  
 }  
 .word1{  
   background-color: red;  
 }  
 .letter2{  
   color: blue;  
 }  
Note that the css rules should be in the global style.css. otherwise the style won't effect the text if you add them from your component style unless you use encapsulation: ViewEncapsulation.None on it.

Teximate Inputs:

  • text: string text to be displayed
  • effect: TeximateOptions choose animation class and its duration
  •  options: {                  
       type: string             either `'word'` or `'letter'`  
       animation: {   
         name: string           animation class name (animate.css)  
         duration: number         animation duration in ms (setting css animation-duration)  
       },  
       word: {   
         type: string           order (SEQUENCE, REVERSE, SHUFFLE, SYNC)  
         delay: number           delay between each word and the next one in ms  
       },  
       letter: {   
         type: :string           order (SEQUENCE, REVERSE, SHUFFLE, SYNC)  
         delay: number           delay after each letter and the next one in ms  
       }  
     }; 
  • hover: TeximateHover                 choose hover animation classes
  •  options: {                  
       type: string             'word' or 'letter' or 'off'  
       in: string              mouseover in animation class name  
       out: string              mouseover out animation class name  
     };  
    
When mouse is over an animated element it the in animation starts, the out animtion starts after the animation duration.
Note: Special thanks to Murhaf Sousli
Contact: murhafsousli@gmail.com
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.