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 hone开发者_如何学Cstly 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!
in Pure 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>
In jQuery, I'd do something like this:
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>
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.
加载中,请稍侯......
精彩评论