The angular-typewriter from cortesdev

angular-typewriter's Introduction

#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 ..." ];
}]);

Recommend Projects