2014-09-04
364
<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>
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
#ID_ANIMATE
{
position: relative;
width: 420px;
height: 256px;
overflow: hidden;
background: black;
}
#ID_ANIMATE DIV
{
position: absolute;
width: 1px;
height: 1px;
font-size: 0px;
z-index: 1;
}
#ID_ANIMATE #ID_LOGO
{
font: normal 14px "Courier New", monotype;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle">
<DIV ID="ID_ANIMATE">
<TABLE>
<TR>
<TD align="center" valign="middle" ID="ID_LOGO">
<span style="color: red;">Скрипт, создающий эффект фейерверка.<br>
Он может использоваться для размещения блоков поздравлений
или праздничных объявлений на сайте.</span>
<a style="color: blue;" href="https://codeguru.ru">codeguru.ru</a>
</TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
// Code by Victor V. Vakchturov (https://codeguru.ru)
// Настройки
var nStarCount = 256; // Количество звезд фейерверка
|
|
|
var nMinSpeed = 2; // Минимальная скорость звезд
var nMaxSpeed = 4; // Максимальная скорость звезд
var nMinLive = 32; // Минимальное время жизни элемента
var nMaxLive = 42; // Максимальное время жизни элемента
var fDSpeed = 0.1; // Величина уменьшения скорости элементов
// --
var nTimerID = 0;
var aStars = new Array(nStarCount);
var oAnimate = document.getElementById("ID_ANIMATE");
var nWidth = oAnimate.offsetWidth;
var nHeight = oAnimate.offsetHeight;
// Еще настройки
var nMinX = Math.round(nWidth / 4);
var nMaxX = Math.round(nWidth / 4 * 3);
var nMinY = Math.round(nHeight / 4);
var nMaxY = Math.round(nHeight / 4 * 3);
function UpdateStarPos(i)
{
var oDiv = aStars[i];
oDiv.style.top = Math.round(oDiv.y).toString() + "px";
oDiv.style.left = Math.round(oDiv.x).toString() + "px";
}
function UpdateStarBgColor(i)
{
var oDiv = aStars[i];
oDiv.style.backgroundColor = "RGB(" +
Math.round(Math.random() * 0xFF).toString() + "," +
Math.round(Math.random() * 0xFF).toString() + "," +
Math.round(Math.random() * 0xFF).toString() + ")";
}
function ResetStar(i, x, y)
{
var oDiv = aStars[i];
oDiv.x = x;
oDiv.y = y;
oDiv.fSpeed = Math.random() * (nMaxSpeed - nMinSpeed) + nMinSpeed;
oDiv.fCos = Math.random() * 2 - 1;
oDiv.fSin = Math.random() * 2 - 1;
oDiv.nLive = Math.round(Math.random() * (nMaxLive - nMinLive) + nMinLive);
UpdateStarPos(i);
UpdateStarBgColor(i);
}
function MoveStars()
{
var bEndShow = true;
for(var i = 0; i < nStarCount; i++)
{
var oDiv = aStars[i];
if(oDiv.nLive)
{
oDiv.x += oDiv.fSpeed * oDiv.fCos;
oDiv.y += oDiv.fSpeed * oDiv.fSin;
oDiv.fSpeed -= fDSpeed;
if(oDiv.fSpeed < 0)
oDiv.fSpeed = 0;
UpdateStarPos(i);
UpdateStarBgColor(i);
oDiv.nLive--;
if(!oDiv.nLive)
oDiv.style.backgroundColor = "black";
bEndShow = false;
}
}
if(bEndShow)
{
window.clearInterval(nTimerID);
window.setTimeout(StartFireShow, 1500);
}
}
function StartFireShow()
{
var x = Math.round(Math.random() * (nMaxX - nMinX)) + nMinX;
var y = Math.round(Math.random() * (nMaxY - nMinY)) + nMinY;
for(var i = 0; i < nStarCount; i++)
ResetStar(i, x, y);
nTimerID = window.setInterval(MoveStars, 40);
}
function GenerateStars()
{
for(var i = 0; i < nStarCount; i++)
{
var oDiv = aStars[i] = document.createElement("DIV");
oDiv.style.width = "1px";
oDiv.style.height = "1px";
oDiv.style.overflow = "hidden";
oDiv.style.position = "absolute";
oAnimate.appendChild(oDiv);
}
}
GenerateStars();
StartFireShow();
|
|
|
// -->
</script>
</body>
</html>
