Здравствуйте уважаемые веб-мастера.
Ещё одно шикарное украшение для вашего сайта на чистом 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> [/code[ В WordPress скрипт и html устанавливается прямо на страницу, если для одной страницы. Если для всего сайта, то в файлы header.php или foonter.php/ CSS соответственно в style.css. Желаю творческих успехов!