2014-09-04
300
<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>
<!--
HTML, BODY
{
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
BODY
{
background-color: black;
}
a
{
color: green;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/* -- */
table.c
{
width: 100%;
height: 100%;
border: none;
}
table.c td
{
text-align: center;
font: 14px "Courier New", Courier;
}
-->
</style>
</head>
<body onselectstart="return false">
<table class="c">
<tr>
<td valign="middle"><a
href="https://codeguru.ru"
alt="Исходники, статьи по программированию, скрипты"
title="Исходники, статьи по программированию, скрипты"
>https://codeguru.ru</a></td>
</tr>
</table>
<script type="text/javascript">
<!--
// Code by Victor V. Vakchturov (https://codeguru.ru)
// Настройки
var nStarCount = 128; // Количество звезд
var nMinSpeed = 1; // Минимальная скорость
var nMaxSpeed = 5; // Максимальная скорость
var nMinSize = 1; // Минимальный размер "звезд"
var nMaxSize = 3; // Максимальный размер "звезд"
// --
var aStars = new Array(nStarCount);
var nWidth = screen.width;
var nHeight = screen.height;
function N2ByteHexStr(n)
{
var str = (n & 0x0000FF).toString(16);
if(str.length < 2)
str = '0' + str;
return str;
}
function RGB_Str(r, g, b)
{
return '#' +
N2ByteHexStr(r) +
N2ByteHexStr(g) +
N2ByteHexStr(b);
}
function UpdateStarPos(i)
{
var oDiv = aStars[i];
oDiv.style.top = oDiv.y.toString() + "px";
oDiv.style.left = oDiv.x.toString() + "px";
}
function ResetStar(i, x)
{
var oDiv = aStars[i];
if(x < 0)
x = Math.round(Math.random() * nWidth);
oDiv.x = x;
oDiv.y = Math.round(Math.random() * nHeight);
// Можно было и не округлять скорость, а округлять координату x.
// Однако, при таком подходе (когда скорость - целое число), визуально
// можно выделить группы звезд, движущихся с одинаковой скоростью.
// Субъективно, это создает бОльший эффект перспективы, чем при
// использовании действительных значений скорости.
oDiv.nSpeed = Math.round(Math.random() * (nMaxSpeed - nMinSpeed)) + nMinSpeed;
oDiv.style.backgroundColor = RGB_Str(Math.round(Math.random() * 0xFF),
Math.round(Math.random() * 0xFF),
Math.round(Math.random() * 0xFF));
var nSize = Math.round(Math.random() * (nMaxSize - nMinSize)) + nMinSize;
oDiv.style.width = nSize.toString(10) + "px";
oDiv.style.height = oDiv.style.width;
UpdateStarPos(i);
}
function MoveStars()
{
for(var i = 0; i < nStarCount; i++)
{
aStars[i].x += aStars[i].nSpeed;
if(aStars[i].x > nWidth)
ResetStar(i, 0);
else
UpdateStarPos(i);
}
}
function GenerateStars()
{
var d = document;
var b = d.body;
for(var i = 0; i < nStarCount; i++)
{
var oDiv = aStars[i] = d.createElement("DIV");
b.appendChild(oDiv);
oDiv.style.overflow = "hidden";
oDiv.style.position = "absolute";
ResetStar(i, -1);
}
}
GenerateStars();
window.setInterval(MoveStars, 30);
// -->
</script>
</body>
</html>
