npm promotes metadefinitions

    typewriting

    1.2.8 • Public • Published

    TypeWriting.js npm version

    https://unsplash.com/photos/E0Spm6XXn2Y

    If you want to make the typing effect, this is what you need.

    TypeWriting DEMO

    Note: TypeWriting.js doesn't depend on jQuery since version 1.2. If you want to keep the old version, please check another branch - jQuery-v1.1.3.


    Installation

    Just clone or download the zip of this repository

    or via npm:

    # npm install --save typewriting 
    $ yarn add typewriting

    Setup

    <!-- just typewriting.js or .min.js -->
    <script src='path/to/typewriting.min.js'></script>

    or

    // import in your .js file
    import TypeWriting from 'typewriting';

    TypeWriting()

    • targetElement: HTML element required
      Your element
    • inputString: String required
      Your text
    • typingInterval: Int
      Interval between each character
    • blinkInterval: String
      Interval of the cursor blinks
    • cursorColor: String
      Color of the cursor

    I use the height of targetElement to set the cursor height. You could use its line-height to control cursor height.

    Second parameter is the function after typing effect.

    const typeWriting = new TypeWriting({
        targetElement   : document.getElementsByClassName('terminal')[0],
        inputString     : 'Hello, world.',
        typingInterval  : 130,
        blinkInterval   : '1s',
        cursorColor     : '#00fd55',
    }, () => console.log('END'));

    rewrite()

    You could use this function to do the same effect but different text at same element.

    typeWriting.rewrite('Welcome to TypeWriting.js', () => {
        console.log('Rewrite() is finished');
    });

    Install

    npm i typewriting

    DownloadsWeekly Downloads

    33

    Version

    1.2.8

    License

    MIT

    Unpacked Size

    22.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • eddiewen