Пылающий заголовок

Здравствуйте уважаемые веб-мастера.

Ещё одно шикарное украшение для вашего сайта на чистом javascript.

Пылающий заголовок

Доступные настройки скрипта я указал в комментариях.

Идея с сайта htmlweb.ru

HTML

<div class="flame" id="fire">Пылающий заголовок</div>

CSS

.flame {
	font-size: 30px; 
	padding: 20px 0 10px 20px; 
	width: 350px; 
	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);

Javascript

<script>
var lever = false; // Тумблер
var textBrightness = 80; // Яркость текста
var fireCount = 9;		// Величина пламени
var fireDelta = new Array();
var step = 10;			// Шаг колебаний
var angle = 0;			// Угол колебаний
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>

В WordPress скрипт и html устанавливается прямо на страницу, если для одной страницы.

Если для всего сайта, то в файлы header.php или foonter.php/

CSS соответственно в style.css.

Желаю творческих успехов.

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *