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

Category: Javascript , Recommended , Slider | January 7, 2017
Author: luisvinicius167
Views Total: 277
Official Page: Go to website
Last Update: January 7, 2017
License: MIT

Preview:

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

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
});

Show/hide the cursor.

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

Enable/disable infinite looping:

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

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;
}
}