2014-09-04
307
Перспективное трехмерное изображение надписи
<html lang="ru">
<head>
<title>Анимационные эффекты | Имитация движения текста по кругу в 3D пространстве</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
margin: 0px;
padding: 0px;
background: white;
}
DIV.header
{
margin: 0px;
padding: 0px;
height: 70px;
border: 1px solid #336699;
background: #CCCCCC;
}
#ID_ANIMATE
{
height: 1px;
}
#ID_ANIMATE SPAN
{
position: absolute;
font: bold 14px "Times New Roman", serif;
color: red;
cursor: default;
}
-->
</style>
</head>
<body>
<div class="header"></div>
<div ID="ID_ANIMATE"></div>
<script type="text/javascript">
<!--
var nXPos = 135;
var nYPos = 60;
var nWidth = 120;
var nHeight = 35;
var nFontSizeMin = 3;
var nFontSizeMax = 16;
var strText = 'JavaScrip ';
var fAlpha = 0.0;
var aoChars = new Array();
var nCount = strText.length;
var oAnimate = document.getElementById("ID_ANIMATE");
function OnTimer()
{
var dfAlpha = 360 / nCount;
for(var i = 0; i < nCount; i++)
{
var oSpan = aoChars[i];
var nTop = nYPos + nHeight * Math.sin(fAlpha - i * dfAlpha * Math.PI / 180);
oSpan.style.top = nTop;
oSpan.style.left = nXPos + nWidth * Math.cos(fAlpha - i * dfAlpha * Math.PI / 180);
oSpan.style.fontSize = ((nTop - nYPos + nHeight) / (2 * nHeight)) *
|
|
|
(nFontSizeMax - nFontSizeMin) + nFontSizeMin;
}
fAlpha += 0.02;
}
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;
}
OnTimer();
window.setInterval(OnTimer, 40);
// -->
</script>
</body>
</html> /15/.
Движение фонового рисунка страницы («летящие звезды», «эффект фейерверка», «падающий снег», «часы со стрелками»)
