JavaScript изменяет тень текста

Мне нужна помощь относительно используемого javaScript, который изменяет значение inner.HTML без каких-либо проблем.

Вот функция JavaScript:

    var shadowDirection = 0;

    function start()
    {
        window.setInterval(runDemo,1000);
    }

    function runDemo()
    {
        shadowDirection += 45;

        shadowText.innerHTML = "Shadow Direction: " + shadowDirection%360;

        // -->
    }

И вот HTML.

<body onload="start()">
<h1 id="shadowText" style="position: absolute; top: 25; left:25; padding: 10; filter: drop-shadow(8px 8px 10px red)">shadow Direction: 0</h1>
</body>

В настоящее время он изменяет значение Shadow Direction: «0» на +45 каждую секунду, как только загружается страница.

То, что мне нужно добавить, наряду с этим изменением, должно также изменить направление тени каждую секунду.

Что должно быть:

1 секунда она должна быть: filter: drop-shadow (8px 8px 10px red);

2 секунды это должно быть: filter: drop-shadow (28px 28px 10px red);

3 секунды это должно быть: filter: drop-shadow (-28px -28px 10px red);

А затем обратно к значению фильтра 1-й секунды.

Надеюсь, что какой-то JS-дикарь может что-то сделать! : D

javascript,html,css,dhtml,

0

Ответов: 1

1 принят

Взгляните на следующий пример:

var shadowDirection = 0;
var filters = [
    'drop-shadow(8px 8px 10px red)', 
    'drop-shadow(28px 28px 10px red)', 
    'drop-shadow(-28px -28px 10px red)'
];
var currentFilter = 0;

function start() {
  window.setInterval(runDemo, 1000);
}

function runDemo() {
  shadowDirection += 45;
  currentFilter = (currentFilter + 1) % filters.length;

  shadowText.innerHTML = "Shadow Direction: " + shadowDirection % 360;
  shadowText.style.filter = filters[currentFilter];
}
<body onload="start()">
  <h1 id="shadowText" style="position: absolute; top: 25; left:25; padding: 10; filter: drop-shadow(8px 8px 10px red)">Shadow Direction: 0</h1>
</body>

JavaScript, HTML, CSS, DHTML,
Похожие вопросы
Яндекс.Метрика