angular-typed
the angularjs typing tool module, that helps you with typing animation
DEMO
Getting started:
Download the package from GitHub.
git clone https://github.com/codekraft-studio/angular-typed.git
or using npm:
npm install angular-typed
Or use it from the GitHub CDN wich point to the last updated file:
<script type="text/javascript" src="https://cdn.rawgit.com/codekraft-studio/angular-typed/master/dist/angular-typed.min.js"></script>
Add angular-typed to your module dependencies:
angular.module('app', ['angular-typed'])
and you can start using the typed directive in your app!
How it works
There are two main ways to use the typed directive:
Method 1: as a element. Write some text in the typed element and it will be typed when the page is loaded.
<typed>You can make it type what you want..</typed>
Method 2: as a attribute. Place the typed attribute where you want and it will type what is inside the element.
<div typed>..this text will be typed when the page is loaded..</div>
Customizations
You can pass all of this extra attributes in the element that contain the typed directive.
- type-speed: The typing animation speed (in millis) // default 0
- back-speed: The backspace animation speed (in millis) // default 0
- html-mode: Enable the html parse mode // default false
- start-line: The line to start typing // default 0
- start-timeout: The start timeout delay // default 0
- remove-line: Delete each line after is been typed // default true
- remove-last: Delete the last line when the typing animation ends // default false
- loop: Enable the loop at the end of the strings // default false
Development
For the development mode, go to the project folder, install all the dependencies by typing:
npm install
Than the gruntfile is preconfigured with two basic tasks:
grunt watch // watch file changes and rebuild
grunt build // build the dist package