Как активно чередовать текст, отображаемый на странице, к определенному времени?

Question

Предпочтительно использовать Jquery(css или html - это хорошо), как мне чередовать текст, отображаемый по длительности? Примером может служить страница PR Groundswell.

Answer 1

Я создал рабочий пример для вас **** ЗДЕСЬ ****, используя jQuery animate() а также setTimeout функции. Если вы хотите добавить больше текста в цикл, просто добавьте новый div с textDiv класс и p тег. Вы также должны изменить maxCount переменная в коде jQuery для количества текстов в цикле.

HTML:

<div class="container">
  <div class="textDiv"><p class="text1"> This is text 1</p></div>
  <div class="textDiv"><p class="text2"> Another text to show how it works</p></div>
</div>

CSS:

* {box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 20px auto;
  background: #d9f9fc;
  text-align: center;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,1);
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}
.text2 {
  opacity:0;
}

JQuery:

$(document).ready(function() {
   var count = 1;
   var maxCount = 2;
   textAnimate(count,maxCount);
});

function textAnimate(count,maxCount) {
    $(".text"+count).animate({
       opacity: '0'
    }, { duration: 300, queue: false });

    count++;
    if (count > maxCount) {count = 1;}

    $(".text"+count).animate({
       opacity: '1'
    }, { duration: 300, queue: false });

    window.setTimeout(function() { textAnimate(count,maxCount) }, 1000);
}