typing animated text

by

A simple approach:

const elsTyper = document.querySelectorAll("[data-typer]");
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const typer = (el) => {
  const text = el.dataset.typer;
  const tot = text.length;
  let ch = 0;

  (function typeIt() {
    if (ch > tot) return;
    el.textContent = text.substring(0, ch++);
    setTimeout(typeIt, rand(60, 300));
  }());
};

elsTyper.forEach(typer);
/* PULSATING CARET */
[data-typer]:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span>
<h3 data-typer="This is another typing animated text"></h3>

So basically get the data-typer string of your element, insert character by character using a random min-max timeout. The pulsating “caret” is nothing by a CSS3 animated :after pseudo element of that same SPAN.

See also: Generate random number between two numbers in JavaScript

More Related Contents:

  1. Using .text() to retrieve only text not nested in child tags
  2. How can I create a “Please Wait, Loading…” animation using jQuery?
  3. How can I find elements by text content with jQuery?
  4. Find text string using jQuery?
  5. How to Use slideDown (or show) function on a table row?
  6. Find a string of text in an element and wrap some span tags round it
  7. How can I animate multiple elements sequentially using jQuery?
  8. How can I change the text color with jQuery?
  9. jQuery using append with effects
  10. Append text to input field
  11. How do I change the background image using jQuery animation?
  12. How do you make an element “flash” in jQuery
  13. auto resize text (font size) when resizing window?
  14. jQuery if div contains this text, replace that part of the text
  15. Chaining jQuery animations that affect different elements
  16. How can I execute multiple, simultaneous jquery effects?
  17. Remove all HTMLtags in a string (with the jquery text() function)
  18. How can I create a “Please Wait, Loading…” animation using jQuery?
  19. jQuery Animation – Smooth Size Transition
  20. jQuery toggle animation
  21. jQuery animate height
  22. CSS3 equivalent to jQuery slideUp and slideDown?
  23. jQuery animate() and browser performance
  24. How to delay jquery animation?
  25. What is alternative to use after jQuery 1.9 removed .toggle(function,function)?
  26. jQuery how to find an element based on a data-attribute value?
  27. How do I check/uncheck all checkboxes with a button using jQuery?
  28. Reload table data in Django without refreshing the page
  29. jquery validation not waiting for remote validation to return true, considers form valid
  30. Selecting a jQuery Tab using a parameter in the URL

Leave a Comment