2014-09-04
289
<html lang="ru">
<head>
<title>Анимационные эффекты | Волнообразно движущийся текст, эффект 2</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
{
height: 1px;
color: black;
white-space: nowrap;
font: normal 16px "Courier New", monotype;
}
#ID_ANIMATE SPAN
{
position: relative;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle"><DIV ID="ID_ANIMATE"></DIV></TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nPeriod = 2; // количество периодов синусоиды
var nAmplitude2 = 32; // половина амплитуды синусоиды
var nKPhase = 16; // коэффициэнт фазового сдвига на каждой итерации
var strText = "Волнообразно движущийся текст"; // текст надписи
// --
var fPhase = 0.0;
var aoChars = new Array();
var nSteps = strText.length;
var fStep = (2 * Math.PI * nPeriod / nSteps);
var oAnimate = document.getElementById("ID_ANIMATE");
// --
function OnTimer()
{
for(var i = 0; i < nSteps; i++)
{
var nPos = Math.ceil(Math.sin(fStep * i + fPhase) * nAmplitude2);
aoChars[i].style.top = nPos.toString(10) + "px";
}
fPhase -= fStep / nKPhase;
|
|
|
}
// --
for(var i = 0; i < nSteps; i++)
{
var oSpan = document.createElement("SPAN");
oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));
oSpan.style.zIndex = 1;
oAnimate.appendChild(oSpan);
aoChars[i] = oSpan;
}
// --
OnTimer();
window.setInterval(OnTimer, 20);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html>
