mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<html><head>
|
|
<!-- MOZ_INSERT_CONTENT_HOOK -->
|
|
<title>DOM, CSS and Fonts - Sample Code: Animating Fonts with DOM</title>
|
|
<script>
|
|
|
|
var count = 0;
|
|
el=0; // Index of the element.
|
|
anicounter=0; // Frame counter.
|
|
colorvalue=255; // Aux color value.
|
|
|
|
var startTime;
|
|
function mzDhtmlStart()
|
|
{
|
|
startTime = Date.now();
|
|
fadein();
|
|
}
|
|
|
|
function fadein()
|
|
{
|
|
// This is a 20-steps animation procedure.
|
|
if (anicounter < 20)
|
|
{
|
|
anicounter++;
|
|
currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);
|
|
currentSpace+=.2;
|
|
document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";
|
|
if(anicounter > 10)
|
|
colorvalue-=25;
|
|
|
|
document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")";
|
|
posleft=parseInt(document.getElementById("text"+el).style.left);
|
|
posleft-=1;
|
|
document.getElementById("text"+el).style.left=posleft+"px";
|
|
setTimeout("fadein()", 0);
|
|
}
|
|
else
|
|
{
|
|
anicounter=0;
|
|
ge_valopacity=0;
|
|
fadeout();
|
|
}
|
|
}
|
|
|
|
function fadeout()
|
|
{
|
|
if (anicounter < 20)
|
|
{
|
|
anicounter++;
|
|
currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);
|
|
currentSpace+=.2;
|
|
document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";
|
|
if(anicounter>10)
|
|
colorvalue+=25;
|
|
|
|
document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")";
|
|
posleft=parseInt(document.getElementById("text"+el).style.left);
|
|
posleft-=2;
|
|
document.getElementById("text"+el).style.left=posleft+"px";
|
|
setTimeout("fadeout()", 0);
|
|
}
|
|
else
|
|
{
|
|
anicounter=0;
|
|
colorvalue=255;
|
|
el++;
|
|
|
|
if (el < 5)
|
|
fadein();
|
|
else
|
|
tpRecordTime(Date.now() - startTime);
|
|
}
|
|
}
|
|
|
|
</script></head>
|
|
<body onload="mzDhtmlStart();" bgcolor="white">
|
|
|
|
<div id="text0" style="position: absolute; top: 0px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 40px;">Netscape Communications</div>
|
|
<div id="text1" style="position: absolute; top: 50px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 90px;">Gecko - Link Different</div>
|
|
<div id="text2" style="position: absolute; top: 100px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 140px;">Cool Demos and Fades </div>
|
|
<div id="text3" style="position: absolute; top: 150px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 190px;">Dynamic Font Spacing</div>
|
|
<div id="text4" style="position: absolute; top: 200px; font-size: 16pt; letter-spacing: 9px; color: rgb(255,255,255); left: 240px;">Cool Gecko Technology</div>
|
|
|
|
</body></html> |