Efect de FADE-IN pt text.

Georgess · Mesajde **Georgess** » Joi Iul 03, 2003 1:13 am

Cum se poate creea efectul de FADE-IN pt un text ? :roll:

iepurec · Mesajde **iepurec** » Joi Iul 03, 2003 9:56 am

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Text Fade Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
background-color : white;
width : 100%;
height : 100%;
}
.text {
margin-left : auto;
margin-right : auto;
text-align : center;
font-size : 24px;
}
</style>

<script>

var varInterval;
var RedColor = 255;
var BlueColor = 255;
var GreenColor = 255;
var red2 = 0;
var green2 = 0;
var blue2= 0;

function fnNextColor(color1, color2) {
if (color1 > color2)
{
//code for decreasing color channel here
NextColor = color1 - 1;

} else
{
//code for increasing color channel here
NextColor = color1 + 1;
}
return NextColor;
}

function fnToHex(color) {
var strHex;
strHex = color.toString(16)
if (strHex.length == 1)
{
strHex = "0" + strHex;
};
return strHex;
}

function fnTextFade() {

var RedHex, GreenHex, BlueHex;

//calculate next color value
if (RedColor != red2)
{
RedColor = fnNextColor(RedColor, red2);
};

if (GreenColor != green2)
{
GreenColor = fnNextColor(GreenColor, green2);
};

if (BlueColor != blue2)
{
BlueColor = fnNextColor(BlueColor, blue2);
};

// generate hexvalues for color hexstring
RedHex = fnToHex(RedColor);
GreenHex = fnToHex(GreenColor);
BlueHex = fnToHex(BlueColor);

// create color hexstring
strColor = "#" + RedHex + GreenHex + BlueHex

//retrieve object to change style;
varTextObj = document.getElementById("text_holder");

//set style for object
varTextObj.style.color = strColor;
if (RedColor == red2 && GreenColor == green2 && BlueColor == blue2)
{
window.clearInterval(varInterval);
}

}

function fnCycleFade(varTime) {

varInterval = window.setInterval("fnTextFade()", varTime);

}
</script>

</head>

<body onload="fnCycleFade(5);">
<div class="text">
I see <span id="text_holder" style="color : white;">ghosts</span> in the room!
</div>
</body>
</html>

:!:

Alte exemple gasesti la: http://javascript.internet.com/

Efect de FADE-IN pt text.

Efect de FADE-IN pt text.

Cine este conectat