Динамическая анимация обмена словами - PullRequest
Новая
       6

Динамическая анимация обмена словами

1 голос
/ 29 августа 2011

Я пытаюсь создать анимацию для текста на странице, которая каждые несколько секунд заменяет одно слово другим словом из списка. Пример: у меня есть заголовок, который говорит: «Это круто», но я хочу, чтобы «круто» заменялось каждые несколько секунд на «аккуратный / удивительный / groovy / etc».

Честно говоря, я не уверен, что это лучший способ (с точки зрения того, какую технологию использовать), и я не могу найти ни одного кода, который работает с современными браузерами. Помощь очень ценится!

Ответы [ 3 ]

3 голосов
/ 30 августа 2011

в чистом JS

http://jsfiddle.net/M5gxH/3/

<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>
2 голосов
/ 30 августа 2011

В jQuery я бы сделал что-то вроде этого:

http://jsfiddle.net/6SRaB/1/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
    changer();
});

function changer() {
    var words = ["nifty","groovy","far out"]; // add as many as you like
    var idx = Math.floor(words.length * Math.random());  // randomizer
    $('#change').text(words[idx]); // replaces the contents of "change"
    var time = Math.floor(5000 * Math.random() + 3000);  // in milliseconds
    setTimeout(changer,time);  // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>

Ключ должен использовать тег SPAN с идентификатором, которыйВы можете выбрать быстро.

0 голосов
/ 03 мая 2018

Этот вопрос довольно старый, но он появился в поиске Google для меня.В 2018 году вы можете легко реализовать это поведение с помощью анимации CSS без необходимости в дополнительном коде JavaScript.

Следующее должно дать вам то, что вам нужно: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animated{
        display: inline;
        text-indent: 8px;
      }

      .animated span{
        animation: topToBottom 12.5s linear infinite 0s;
        -ms-animation: topToBottom 12.5s linear infinite 0s;
        -webkit-animation: topToBottom 12.5s linear infinite 0s;
        color: red;
        opacity: 0;
        overflow: hidden;
        position: absolute;
      }

      .animated span:nth-child(2){
        animation-delay: 2.5s;
        -ms-animation-delay: 2.5s;
        -webkit-animation-delay: 2.5s;
      }

      .animated span:nth-child(3){
        animation-delay: 5s;
        -ms-animation-delay: 5s;
        -webkit-animation-delay: 5s;
      }

      .animated span:nth-child(4){
        animation-delay: 7.5s;
        -ms-animation-delay: 7.5s;
        -webkit-animation-delay: 7.5s;
      }

      .animated span:nth-child(5){
        animation-delay: 10s;
        -ms-animation-delay: 10s;
        -webkit-animation-delay: 10s;
      }

      @-moz-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -moz-transform: translateY(-50px); }
        10% { opacity: 1; -moz-transform: translateY(0px); }
        25% { opacity: 1; -moz-transform: translateY(0px); }
        30% { opacity: 0; -moz-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
      @-webkit-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -webkit-transform: translateY(-50px); }
        10% { opacity: 1; -webkit-transform: translateY(0px); }
        25% { opacity: 1; -webkit-transform: translateY(0px); }
        30% { opacity: 0; -webkit-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
      @-ms-keyframes topToBottom{
        0% { opacity: 0; }
        5% { opacity: 0; -ms-transform: translateY(-50px); }
        10% { opacity: 1; -ms-transform: translateY(0px); }
        25% { opacity: 1; -ms-transform: translateY(0px); }
        30% { opacity: 0; -ms-transform: translateY(50px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
      }
    </style>
  </head>

  <body>
    <h2>CSS Animations are
      <div class="animated">
        <span>cool.</span>
        <span>neat.</span>
        <span>awesome.</span>
        <span>groovy.</span>
        <span>magic.</span>
      </div>
    </h2>
  </body>
</html>

Обратите внимание, что это простопример с вертикальным скольжением.У CSS в основном есть бесконечные возможности с точки зрения анимации / переходов.

...