helgajijka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
h3 {
margin: 30px auto;
text-align: center;
font-family: Courier;
font-size: 48px;
background-color: #66FFCC;
font-style: italic;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var message = ["Приветствую на нашем сайте", "желаем хорошего дня"],
$h3 = $("#text");
function gradient(from, to, num) {
var arr = [];
num--;
for (var i = 0; i <= num; i++) {
var color = [],
l = from.length;
for (var k = 0; k < l; k++) {
color[k] = (to[k] - from[k]) * (i / num) + from[k];
k < 3 && (color[k] = Math.round(color[k]))
}
arr[i] = "rgb" +
(l == 4 ? "a(" : "(") + color + ")"
}
return arr
}
function randomRGBComponent() {
return Math.round(Math.random() * 255)
}
function randomRGBColor() {
return [randomRGBComponent(), randomRGBComponent(), randomRGBComponent()]
}
function show() {
var text = message.shift(),
from = randomRGBColor(),
to = randomRGBColor(),
color = [255 - from[0], 255 - from[1], 255 - from[2]];
message.push(text);
$h3.html("").css({
"background-color": "rgb(" + color + ")"
});
var base = gradient(from, to, text.length);
$.each(base, function(indx, el) {
$("<span/>", {
text: text.charAt(indx),
css: {
"color": el
}
}).appendTo($h3)
});
$h3.fadeIn(800, hide)
}
function hide() {
$h3.delay(3E3).fadeOut(300, show)
}
show()
});
</script>
</head>
<body>
<h3 id="text">Приветствую на нашем сайте</h3>
</body>
</html>
ну можно конечно попроще
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
h3 {
margin: 30px auto;
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var message = ['Приветствую на нашем сайте', 'желаем хорошего дня'], $h3 = $('#text');
function show()
{ var text = message.shift();
message.push(text)
$h3.text(text).fadeIn(500, hide);
}
function hide()
{
$h3.delay(1500).fadeOut(300, show)
}
show()
});
</script>
</head>
<body>
<h3 id="text">Приветствую на нашем сайте</h3>
</body>
</html>
