Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Анимированая тень с помощью свойства text-shadow и JavaScript
Анимированная тень с помощью свойства text-shadow на сайте HtmlWeb.ru
Анимированная тень с помощью свойства text-shadow на сайте HtmlWeb.ru
Исходный код этого примера:
<p><input type="button" value="Вкл/Выкл анимацию" onclick="return toggleAnimation()"></p>
<div class="res" style="font-size:22px;background-color:#000;color:rgb(255, 255, 255);text-align:center;
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">
Анимированная тень с помощью свойства text-shadow на сайте HtmlWeb.ru
</div>
<br>
<div class="res" style="font-size:22px;background-color:#000;color:rgb(50, 50, 50);text-align:center;
text-shadow: 0 -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">
Анимированная тень с помощью свойства text-shadow на сайте HtmlWeb.ru
</div>
<script>
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;
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;
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>
Посмотрите также:
.
Прокомментировать/Отблагодарить