Text Typing / Deleting Animations In Native JavaScript – Native Typed

Category: Animation , Javascript , Text | December 9, 2016
Author:Genert
Views Total:2,006 views
Official Page:Go to website
Last Update:December 9, 2016
License:MIT

Preview:

Text Typing / Deleting Animations In Native JavaScript – Native Typed

Description:

Native Typed is a zero-dependency JavaScript library used to generatetext typing / deleting animation mimicking human typing behavior.

Supports loop mode which enables you to generate a text rotator for looping through an array of text you specify.

How to use it:

Install the Native Typed via NPM:

npm install native-typed --save

Or directly include the JavaScript file in your document.

<script src="dist/native-typed.js"></script>

Define an array of text you want to print in the container ‘#demo’.

<div id="demo"></div>
new NTyped(document.querySelector('#demo'), {
    strings: ['JavaScript', 'CSS And CSS3', 'HTML5'],
});

Config the animation with the following settings.

new NTyped(document.querySelector('#demo'), {
    strings: ['This is a typing animation!', 'You can also add your own sentences', 'So go do it!'],
    // show cursor
    showCursor: true,
    cursorChar: '|',
    // infinite loop
    loop: true,
    // animation options
    startDelay: 500,
    backDelay: 500,
    typeSpeed: 0,
    deleteSpeed: 0,
    // CSS classes
    classes: {
      cursor: 'title__cursor'
    }
    
});

 

You Might Be Interested In:


Leave a Reply