Pure JS Text Rotator With Typing / Deleting Effects – iTyped.js

Preview:

Description:

iTyped.js is a lightweight, dependency-free JS library that allows you to rotate a sequence of strings with text typing / erasing effects just like a typewriter.

How to use it:

Create an inline element in which you want to place the text rotator.

<span id="ityped" class="ityped"></span>

Import the main JavaScript file ‘iTyped.js’ in the document.

<script src="src/ityped.js"></script>

Initialize the iTyped and define an array of text strings you want to rotate through.

ityped.init('#ityped', {
  strings: ['Put you string here...', 'and Enjoy!']
});

Config the animations:

ityped.init('#ityped', {
  strings: ['Put you string here...', 'and Enjoy!'],
  typeSpeed: 100,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 500
});

Customize the cursor character.

ityped.init('#ityped', {
  cursorChar: '|'
});

Show/hide the cursor.

ityped.init('#ityped', {
  strings: ['Put you string here...', 'and Enjoy!'],
  showCursor: true
});

Enable/disable back typing.

ityped.init('#ityped', {
  disableBackTyping: false
});

Enable/disable infinite looping:

ityped.init('#ityped', {
  strings: ['Put you string here...', 'and Enjoy!'],
  loop: true
});

Execute a function when the typing animation is finished.

ityped.init('#ityped', {
  onFinished: function () { }
});

Style the cursor in the CSS.

.ityped-cursor {
  font-size: 2.2rem;
  opacity: 1;
  -webkit-animation: blink 0.3s infinite;
  -moz-animation: blink 0.3s infinite;
  animation: blink 0.3s infinite;
  animation-direction: alternate;
}
@keyframes 
blink {  100% {
 opacity: 0;
}
}
 @-webkit-keyframes 
blink {  100% {
 opacity: 0;
}
}
 @-moz-keyframes 
blink {  100% {
 opacity: 0;
}
}

Changelog:

v1.0.3 (09/20/2018)

• Fixed bugs
• Added more configs