javascript - Dynamic word swapping animation

I'm trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, "This is cool," but I want "cool" to be replaced every few seconds by "neat/awesome/groovy/etc".

I'm honestly not sure the best way to go about this (in terms of what technology to use) and I can't find a blurb of code that works with modern browsers. Help is greatly appreciated!

Share Improve this question edited May 3, 2018 at 5:33 fjahr 4795 silver badges25 bronze badges asked Aug 29, 2011 at 19:59 Shawn Farner 652 silver badges7 bronze badges

Ahh don't you just love Mistborn :) – Blindy Commented Aug 29, 2011 at 20:02

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

in Pure JS

http://jsfiddle/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>

In jQuery, I'd do something like this:

http://jsfiddle/6SRaB/1/

<script type="text/javascript" src="https://ajax.googleapis./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>

The key is to use a SPAN tag with an ID that you can pick out quickly.

This question is quite old but it showed up in a google search for me. In 2018 you can easily implement this behavior with CSS Animations without the need for any additional JavaScript code.

The following should give you what you need:

<!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>

Note that this is just an example with vertical sliding. There are basically endless possibilities with CSS in terms of animations/transitions.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dynamic word swapping animation - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)