2014-09-04
307
Анимация, выглядящая как одновременное движение символов, образующих текстовую надпись.
<html lang="ru">
<head>
<title>Анимационные эффекты | Текст, прилетающий по частям</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
{
font: bold 16px "Times New Roman", serif;
}
#ID_ANIMATE SPAN
{
position: relative;
z-index: 1;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle">
<DIV ID="ID_ANIMATE"></DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nDevX = 300;
var nDevY = 300;
var strText = "Прилетающий по частям текст";
// --
var nCount = strText.length;
var oAnimate = document.getElementById("ID_ANIMATE");
var aoChars = new Array();
var nTimerID = null;
// --
function UpdateSpanPos(nNumber)
{
aoChars[nNumber].style.top = Math.round(aoChars[nNumber].m_fX).toString(10) + "px";
aoChars[nNumber].style.left = Math.round(aoChars[nNumber].m_fY).toString(10) + "px";
}
function OnTimer()
{
var bStop = true;
for(var i = 0; i < nCount; i++)
{
aoChars[i].m_fX += aoChars[i].m_fDX;
aoChars[i].m_fY += aoChars[i].m_fDY;
if((Math.abs(aoChars[i].m_fX) < 1) &&
|
|
|
(Math.abs(aoChars[i].m_fY) < 1))
{
aoChars[i].m_fX = 0;
aoChars[i].m_fY = 0;
aoChars[i].m_fDX = 0;
aoChars[i].m_fDY = 0;
}
else
bStop = false;
UpdateSpanPos(i);
}
if(bStop)
window.clearInterval(nTimerID);
}
// --
for(var i = 0; i < nCount; i++)
{
var oSpan = document.createElement("SPAN");
oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));
oAnimate.appendChild(oSpan);
aoChars[i] = oSpan;
aoChars[i].m_fX = Math.random() * 2 * nDevX - nDevX;
aoChars[i].m_fY = Math.random() * 2 * nDevY - nDevY;
aoChars[i].m_fDX = -aoChars[i].m_fX / nDevX;
aoChars[i].m_fDY = -aoChars[i].m_fY / nDevY;
UpdateSpanPos(i);
}
// --
nTimerID = window.setInterval(OnTimer, 20);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html> /17/.
