JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<p class="step-title">
          <span class="k-row k-row-1">Я из страшной русской сказки, всё равно откуда ты.</span>
          <span class="k-row k-row-2">Не боюсь дневного света, здесь итак хватает мглы.</span>
          <span class="k-row k-row-1">Мир подарит сколько просишь, заберёт, когда не ждёшь.</span>
          <span class="k-row k-row-2">Не играю в твои игры, ты когда-нибудь умрёшь.</span>
        </p>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  font-size: 20px;
  padding: 20px;
}

.k-row-1 {
  color: #fff;
}

.k-row-2 {
  color: #EB5757;
}



.animating-2 {
  transition: all 0.5s ease-out;
}

.animating-2-2 {
  -webkit-animation: blurFadeInOut 3s ease-in forwards;
  animation: blurFadeInOut 3s ease-in forwards;
}



@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
  }

  20%,
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
  }
}

@-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }

  20%,
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
}

JavaScript

$(document).ready(function() {
  function animationText1(step, class1, class2) {
    var rowsLength = step.find(".k-row").length;
    var textContLength;

    // ind - кол-во строчек
    // i - кол-во символов
    var pauseE = 0;
    var timeSym;
    var arrSym = [];
    var ccc = 0;
    step.find(".k-row").each(function(ind, e) {
      var $text = step.find(".k-row").eq(ind);
      // var $text = $(this);
      var textCont = $text.text();
      $text.text('');

      setTimeout(function() {
        textContLength = textCont.length;
        // arrSym.push(textContLength);


        for (var i = 0; i < textContLength; i++) {
          // console.log(i);
          (function(i) {
            setTimeout(function() {

              var span = $('<span></span>').text(textCont[i]).addClass(class1);
              $text.append(span);

              if (class2) {
                setTimeout(function() {
                  span.addClass(class2);
                }, 1000);
              }

              timeSym = 75 * i;
            }, 75 * i);

          }(i));
        }
        // console.log("timeSym: " + timeSym);
        // }, ind * 5000);
        //}, ind * textCont.length * 75);
        console.log("ccc inner: " + ccc);
        // ind 0 
        // ind 1 
        // ind 2 
        // ind 3 
        // }, ind * textCont.length * 150);
      }, ccc * 75);
      // ccc = textCont.length;
      ccc += textCont.length;;
      console.log("ccc: " + ccc);

      // }, arrSym[ind] * 100000);
      // pauseE++;

      //},  10000);



    });
    //console.dir (arrSym);        

  } // end func

  animationText1($('.step-title'), 'animating-2', 'animating-2-2');
});