Text animation Loop --- True

by Santosh Thakur

HTML

<div>
  <p class="pn" id="rotateTxt">
    <span>1st text </span>
    <span>2st text </span>
    <span>3st text </span>
  </p>
</div>

CSS

@keyframes textanim {
  from {
    opacity: 0;
  }
}

.pn {
  position: relative;
  top: 50px;
  font: italic bold 5em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  animation: textanim 7s infinite;
}

JavaScript

//var rotateTxt = $('#rotateTxt');
var valueArray = [];
var a = $('#rotateTxt').children();

for (var j = 0; j < a.length; j++) {
  valueArray[j] = a[j].textContent;
  console.log(a[j]);
}

var i = 1;
$('#rotateTxt').text(valueArray[0]);
if (valueArray.length == 1) {
  $('#rotateTxt').css({
    'animation': 'textanim 7s'
  });
} else if (valueArray.length > 1) {
  var intervalHandle = setInterval(changeImage, 7000);
}

function changeImage() {
  if (i <= valueArray.length - 1) {
    $('#rotateTxt').text(valueArray[i]);
    i++;
  } else {
    $('#rotateTxt').text(valueArray[0]);
    i = 1;
  }
};