Wondering what’s next for npm?Check out our public roadmap! »

    tiny-typewriter

    1.0.4 • Public • Published

    tinyTypewriter.js

    tinyTypewriter.js is just a small (1kb) piece of vanilla javascript that generates a typewriter effect.

    How to use

    CDN

    <head>
      <script src="https://unpkg.com/browse/tiny-typewriter@latest/dist/tinyTypewriter.min.js"></script>
    </head>;
    ...
    <h1>tiny<span id="typewritter">Your fallback text</span></h1>
    const typewritter = document.querySelector("#typewriter");
    tinyTypewriter(typewritter, {
      items: ['Size', 'Typewriter.js']  
    });

    NPM

    npm install tiny-typewriter
    
    import tinyTypewriter from 'tiny-typewriter';
    
    const typewritter = document.querySelector("#typewriter");
    tinyTypewriter(typewritter, {
      items: ['Size', 'Typewriter.js']  
    });

    Options

    Option Default
    items []
    typeSpeed 500
    deleteSpeed 50
    delayBetweenItems 2000
    loop true
    startDelay 0
    startsAtIndex 0
    cursorChar "|"
    cursorCharBlinkSpeed 500
    cursorCharBlinkTransitionSpeed 0.15
    startOnView true
    startOnViewOffset 0

    Example

    tinyTypewriter(el, {
      items: ['Size', 'Typewritter.js'],
      typeSpeed: 100,
      deleteSpeed: 50,
      delayBetweenItems: 2000,
      loop: true,
      startDelay: 0,
      startsAtIndex: 0,
      cursor: true,
      cursorChar: "|",
      cursorCharBlinkSpeed: 500,
      cursorCharBlinkTransitionSpeed: 0.15,
      startOnView: true,
      startOnViewOffset: 0,
    });
    

    Install

    npm i tiny-typewriter

    DownloadsWeekly Downloads

    7

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar