This easy-to-use directive applies a (customisable) typed effect to text within an HTML element.
-
Install with Bower using
bower install angularjs-typed-effect --save
or clone this repository. -
Include dist/typed-effect.min.js and dist/typed-effect.min.css in your application.
-
Add
angularJSTypedEffect
as a dependency for your AngularJS module:
angular.module('yourAppModule', ['angularJSTypedEffect']);
Insert the typed-effect
and text
attributes in to the required HTML element(s):
<p typed-effect text="'hi there, I use a typed effect ...'"></p>
You also have the option of setting:
- delay ( default: 0 ) - apply a time delay (in milliseconds) before typing begins.
- speed ( default: 100 ) - set the typing speed (in milliseconds).
- cursor ( default: | ) - choose the cursor to use.
- blink ( default: true ) - specify if the cursor should remain and continue to blink after typing has finished.
- callback ( default: n/a ) - provide a callback function to be triggered after typing has finished.
<p typed-effect text="'hi there'" delay="500" speed="50" cursor="░" blink="false" callback="vm.typed()"></p>
Take a look at this demo of the typed effect and optional settings.