» » Огненный текст

Огненный текст

Увидела в сети код Огненного текста. Сперва не представляла куда его можно приспособить, но пригляделась и поняла, что он отлично подойдёт для поздравления с 9 Мая. Текст можно добавить в гаджет или на страницу статьи. Выглядит в боковой панели надпись так:
Текст к 9 Мая

Текст к 9 Мая

Вживую посмотреть как будет выглядеть оформление можно на тестовом блоге. 
А теперь сам код:
<div class="flame" id="fire">9 Мая! С днём Победы!</div>
<style>
.flame {
font-size: 50px; 
padding: 20px 0 10px 20px;
width: 600px;
font-weight: bold;
background: scroll 0% 0% rgb(0, 0, 0);
color: rgb(50, 50, 50);
text-shadow: -1px 2px rgb(255, 255, 0),
2px -3px 3px rgb(255, 204, 0),
2px -5px 6px rgb(255, 153, 0),
-3px -7px 8px rgb(255, 102, 0),
1px -15px 30px rgb(255, 51, 0),
3px -30px 55px rgb(255, 0, 0);</style>
<script>
var lever = false;
var textBrightness = 80; // Яркость текста
var fireCount = 10; // Величина пламени
var fireDelta = new Array();
var step = 10; // Шаг колебаний
var angle = 1; // Угол колебаний
var radius = 10;
function animate()
{
fireDelta[fireCount - step] = Math.random() * 2 - 1;
var e = document.getElementById("fire");
var s = "";
for (var i = 0; i < fireCount; i++) { if (s) s += ", ";
s += Math.round(fireDelta[(i + fireCount - step) % fireCount] * i) + "px " + (-2 * i -1) + "px " + (2 + i) + "px ";
s += "rgb(255, " + (255 - i * Math.floor(255 / (fireCount - 1))) + ", 0)";
}
e.style.textShadow = s;
e.style.color = "rgb(" +
(textBrightness + step % 2) + ", " +
textBrightness + ", " +
textBrightness + ")";
step = (step + 1) % fireCount;
angle -= 0.8;

if (angle <= 0) angle = Math.PI * 2; var e = document.getElementById("rgb");
var s = Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #0F0";
e.style.textShadow = s;
e.style.color = "rgb(" + (255 - step % 2) + ", 255, 255)";
}

function toggleAnimation()
{
for (var i = 0; i < fireCount; i++) fireDelta[i] = Math.random() * 2 - 1; if (lever)
{
window.clearInterval(lever);
lever = false;
}
else
lever = window.setInterval(function() { animate(); }, 100);
return false;
}
toggleAnimation();
</script>
Красным выделены изменения, которые можно сделать с огнём.
Зелёным — ваш текст
Синим — размер текста
Фиолетовым размер блока, где находится текст

А может вы придумаете другое применение для надписи.

Ваши комментарии:

Комментарии со спамом удаляются.