JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

CSS

* {
  margin: 0px;
  padding: 0px;
}

p {
  font-size: 15px;
}

JavaScript

$(document).ready(function() {

  function changeText(cont1, cont2, speed) {
    var text = cont1;
    var content = text.split("");
    var i = 0;
    
    var timer = setInterval(function() {
      if (i < content.length) {
        cont2.append(content[i]);
        i = i + 1;
      }
      else {
        clearInterval(timer);
      }
    }, speed);   
    
  }
  

  var arrContentText = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a erat mauris. Duis luctus malesuada ullamcorper.',
    'Maecenas sollicitudin dui in purus maximus varius. Cras maximus, magna et vestibulum tincidunt, lacus metus dapibus augue, sit amet condimentum libero purus ac mi.',
    'Duis euismod, elit at varius bibendum, est libero hendrerit arcu, ut mattis mi magna pellentesque elit. Integer tempor velit non orci facilisis, ac volutpat ex rutrum. Mauris sit amet felis nibh.',
    'Nam in pellentesque nulla, quis aliquet velit. Morbi porta lacinia imperdiet. Fusce vel quam in diam euismod fringilla et et metus. Sed nec massa quam. Nullam eu justo varius leo vulputate viverra.',
    'Pellentesque quis orci at quam molestie consequat aliquam non ex. Ut auctor quam sed erat mattis, eget semper est gravida. Aliquam finibus maximus porttitor.',
    'Curabitur condimentum orci sit amet malesuada sagittis. Nulla efficitur justo et augue tempor egestas. Fusce eleifend, urna sit amet lobortis scelerisque, augue eros maximus enim, nec faucibus ligula neque id lacus.'
  ];

  console.log(arrContentText.length);

  var speedPrinted = 5;

  setTimeout(function() {
    changeText(arrContentText[0], $(".p1"), speedPrinted);
  }, 0);
  setTimeout(function() {
    changeText(arrContentText[1], $(".p2"), speedPrinted);
  }, 1000);
  setTimeout(function() {
    changeText(arrContentText[2], $(".p3"), speedPrinted);
  }, 2200);
  // clearInterval(timer);
});