AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Анимированая тень с помощью свойства CSS3 text-shadow и javascript

Не работает в IE

Анимированная тень с помощью свойства CSS3 text-shadow на сайте HtmlWeb.ru

Анимированная тень с помощью свойства CSS3 text-shadow на сайте HtmlWeb.ru


Исходный код этого примера:

<p><input type="button" value="Вкл/Выкл анимацию" onclick="return toggleAnimation()"></p>

<div class="res" style="font-size:22px;background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(254, 255, 255);
	text-shadow: 5px -4px 4px rgb(51, 51, 255), 1px 6px 4px rgb(255, 0, 0), -6px -2px 4px rgb(0, 255, 0);"
	id="rgb">

Анимированная тень с помощью свойства CSS3 text-shadow на сайте HtmlWeb.ru

</div>
<br />
<div class="res" style="font-size:22px;background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(50, 50, 50);
	text-shadow: 0px -1px 2px rgb(255, 255, 0), 1px -3px 3px rgb(255, 204, 0), 1px -5px 4px rgb(255, 153, 0), -3px -7px 5px rgb(255, 102, 0), 1px -9px 6px rgb(255, 51, 0), 3px -11px 7px rgb(255, 0, 0);"
	id="fire">

Анимированная тень с помощью свойства CSS3 text-shadow на сайте HtmlWeb.ru

</div>

<script type="text/javascript">

var handle = false;
var textBrightness = 50;
var fireCount = 6;
var fireDelta = new Array();
var step = 0;
var angle = 0;
var radius = 6;

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;
	/* We need to change something, else the shadow will not be re-rendered. This bug was fixed in Opera 10.5. */
	e.style.color = "rgb(" +
		(textBrightness + step % 2) + ", " +
		textBrightness + ", " +
		textBrightness + ")";
	step = (step + 1) % fireCount;

	/* RGB */
	angle -= 0.4;
	if (angle <= 0) angle = Math.PI * 2;
	var e = document.getElementById("rgb");
	var s =
		Math.round(Math.sin(angle) * radius) + "px " +
		Math.round(Math.cos(angle) * radius) + "px 4px #33F, " +
		Math.round(Math.sin(angle + Math.PI * 4 / 3) * radius) + "px " +
		Math.round(Math.cos(angle + Math.PI * 4 / 3) * radius) + "px 4px #F00, " +
		Math.round(Math.sin(angle + Math.PI * 2 / 3) * radius) + "px " +
		Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #0F0";
	e.style.textShadow = s;
	/* We need to change something, else the shadow will not be re-rendered. This bug was fixed in Opera 10.5. */
	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 (handle)
	{
		window.clearInterval(handle);
		handle = false;
	}
	else
		handle = window.setInterval(function() { animate(); }, 100);
	return false;
}

toggleAnimation();
</script>

Посмотрите также:


.

© Copyright 2008-2016 by KDG