#angular-typewriter Demo in Codepen
Prerequisites: angular.js
Include the typewriter.js and typewriter.css in the HTML file
In your HTML: Define your angular app & controller
<html ng-app="demoapp">
<body ng-controller="mainCtrl">
...
</body>
</html>With the controller:
Ex:
<span class="typewriter" typewriter type-speed="200" loop=true loop-delay="1000" custom-style=false cursor=true shell=false>Welcome, type-write your message here!</span>Or assign texts in message array
<span class="typewriter" typewriter type-speed="200" loop=true loop-delay="1000" custom-style=false cursor=true shell=false messages="sentences"></span>Options:
{
// The speed of typewriter
type-speed: 100,
// Loop when a sentence ends
loop: false,
// Delay time when the sentence starts over
loopDelay: 2000,
// Use custom style, if true, the background is black, font color is white, font is Courier New
customStyle: false,
// Show cursor
cursor: true,
// Show shell
shell: false,
// Change line for next sentences
newline: false,
// Message box showing sequencely
messages: string array
}In your javascript:
var demoApp = angular.module("demoapp", ["angular.typewriter"]);
demoApp.controller("mainCtrl", ["$scope", function($scope){
$scope.sentences = ["This is the first sentence ...", "This is the second sentence ... ", "This is the third sentence ...", "This is the forth sentence ..." ];
}]);