2014-09-04
272
Эффект 1
Анимация текстовой надписи, выглядящей как волнообразное движение
<html lang="ru">
<head>
<title>Анимационные эффекты | Волнообразно движущийся текст, эффект 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
#ID_ANIMATE
{
color: black;
white-space: nowrap;
font: normal 0px "Times New Roman", serif;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle"><span ID="ID_ANIMATE"></span></TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nPeriod = 2; // количество периодов синусоиды
var nMaxSize = 64; // максимальный размер шрифта
var nMinSize = 12; // минимальный размер шрифта
var strText = "Волнообразно движущийся текст"; // текст надписи
// --
var fPhase = 0.0;
var aoChars = new Array();
var nSteps = strText.length;
var fStep = 2 * Math.PI * nPeriod / nSteps;
var nDy = (nMaxSize + nMinSize) / 2;
var nAmp = (nMaxSize - nMinSize) / 2;
// --
function OnTimer()
{
for(var i = 0; i < nSteps; i++)
{
var nSize = Math.ceil(Math.sin(fStep * i + fPhase) * nAmp + nDy);
aoChars[i].style.fontSize = nSize.toString(10) + "px";
|
|
|
}
fPhase += fStep;
}
// --
for(var i = 0; i < nSteps; i++)
{
var oSpan = document.createElement("SPAN");
oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));
document.getElementById("ID_ANIMATE").appendChild(oSpan);
aoChars[i] = oSpan;
}
// --
OnTimer();
window.setInterval(OnTimer, 100);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html>
