index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Typed.js - Type your heart out</title>
    <!-- <script src="dist/typed.umd.js"></script> -->
    <link href="assets/demos.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"
    />
  </head>
  <body>
    <div class="wrap">
      <h1 class="title">Typed.js</h1>

      <div class="links">
        <a href="https://github.com/mattboldt/typed.js">GitHub</a> |
        <a href="http://www.mattboldt.com/typed.js/docs">Documentation</a> |
        <a href="http://www.mattboldt.com/demos/typed-js">View original demo</a>
        | <a href="http://www.mattboldt.com">View mattboldt.com</a>
      </div>

      <hr />

      <h2 id="basic">Basic Demo</h2>
      <div class="type-wrap">
        <div id="typed-strings">
          <span>Typed.js^500 is a <strong>JavaScript</strong> library.</span>
          <span>It <em>types</em> out sentences.</span>
          <span>`And` `then` `deletes` `them`.</span>
          <span>Try it out!</span>
        </div>
        <span id="typed" style="white-space: pre">Typed</span>
      </div>
      <button class="toggle">Toggle</button>
      <button class="start">Start</button>
      <button class="stop">Stop</button>
      <button class="reset">Reset</button>
      <button class="destroy">Destroy</button>
      <button class="loop">Toggle Loop</button>

      <pre>
    <code class="javascript">
  var typed = new Typed("#typed", {
    stringsElement: '#typed-strings',
    typeSpeed: 0,
    backSpeed: 0,
    backDelay: 500,
    startDelay: 1000,
    loop: false,
    onBegin: function(self) { prettyLog('onBegin ' + self) },
    onComplete: function(self) { prettyLog('onCmplete ' + self) },
    preStringTyped: function(pos, self) { prettyLog('preStringTyped ' + pos + ' ' + self); },
    onStringTyped: function(pos, self) { prettyLog('onStringTyped ' + pos + ' ' + self) },
    onLastStringBackspaced: function(self) { prettyLog('onLastStringBackspaced ' + self) },
    onTypingPaused: function(pos, self) { prettyLog('onTypingPaused ' + pos + ' ' + self) },
    onTypingResumed: function(pos, self) { prettyLog('onTypingResumed ' + pos + ' ' + self) },
    onReset: function(self) { prettyLog('onReset ' + self) },
    onStop: function(pos, self) { prettyLog('onStop ' + pos + ' ' + self) },
    onStart: function(pos, self) { prettyLog('onStart ' + pos + ' ' + self) },
    onDestroy: function(self) { prettyLog('onDestroy ' + self) }
  });
    </code>
  </pre>

      <hr />

      <h2 id="fade">Fade Out</h2>
      <div class="type-wrap">
        <span id="typed2" style="white-space: pre"></span>
      </div>
      <button class="loop2">Toggle Loop</button>

      <pre>
    <code class="javascript">
  var typed2 = new Typed('#typed2', {
    strings: ['Some &lt;i&gt;strings&lt;/i&gt; with', 'Some &lt;strong&gt;HTML&lt;/strong&gt;', 'Chars &amp;times; &amp;copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    fadeOut: true,
    loop: true
  });
    </code>
  </pre>

      <hr />

      <h2 id="smartBack">Smart Backspace</h2>
      <div class="type-wrap">
        <span id="typed3"></span>
      </div>

      <pre>
    <code class="javascript">
  var typed3 = new Typed('#typed3', {
    strings: ['My strings are: &lt;i&gt;strings&lt;/i&gt; with', 'My strings are: &lt;strong&gt;HTML&lt;/strong&gt;', 'My strings are: Chars &amp;times; &amp;copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    smartBackspace: true, // this is a default
    loop: true
  });
    </code>
  </pre>

      <hr />

      <h2 id="input">In an input</h2>
      <div class="type-wrap">
        <input id="typed4" type="text" style="padding: 10px" />
      </div>

      <pre>
    <code class="javascript">
  var typed4 = new Typed('#typed4', {
    strings: ['Some strings without', 'Some HTML', 'Chars'],
    typeSpeed: 0,
    backSpeed: 0,
    attr: 'placeholder',
    bindInputFocusEvents: true,
    loop: true
  });
    </code>
  </pre>

      <hr />

      <h2 id="shuffle">Shuffled</h2>
      <div class="type-wrap">
        <span id="typed5" style="white-space: pre"></span>
      </div>

      <pre>
    <code class="javascript">
  var typed5 = new Typed('#typed5', {
    strings: ['1 Some &lt;i&gt;strings&lt;/i&gt; with', '2 Some &lt;strong&gt;HTML&lt;/strong&gt;', '3 Chars &amp;times; &amp;copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    cursorChar: '_',
    shuffle: true,
    smartBackspace: false,
    loop: true
  });
    </code>
  </pre>

      <hr />

      <h2 id="bulk">Bulk Typing</h2>
      <div class="type-wrap" style="height: 50px">
        <span id="typed6" style="white-space: pre"></span>
      </div>

      <pre>
    <code class="javascript">
  var typed6 = new Typed('#typed6', {
    strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
    typeSpeed: 40,
    backSpeed: 0,
    loop: true
  });
    </code>
  </pre>
    </div>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11539016-1']);
      _gaq.push(['_trackPageview']);

      (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src =
          ('https:' == document.location.protocol
            ? 'https://ssl'
            : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();
    </script>

    <!-- <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> -->
    <script src="dist/typed.umd.js"></script>
    <script src="assets/demos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
  </body>
</html>