CODEWITHSUNDEEP
javascripthtmlcssdhtml
Samlano
Samlano

Reputation: 109

JavaScript tweaks to change shadow of text

I need some help regarding the javaScript I am using which changes the value of inner.HTML without any issues.

Here is the JavaScript function:

    var shadowDirection = 0;

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

    function runDemo()
    {
        shadowDirection += 45;

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

        // -->
    }

And here is the 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>

Currently, it changes the value of Shadow Direction: "0" by +45 each second as soon as the page is loaded.

What I need to add is, along with this change, it should also change the shadow direction each second.

Which should be:

1 second it should be: filter: drop-shadow(8px 8px 10px red);

2 second it should be: filter: drop-shadow(28px 28px 10px red);

3 second it should be: filter: drop-shadow(-28px -28px 10px red);

And then back to 1st second's filter value.

I hope some JS savage can do something about it! :D

Upvotes: 0

Views: 62

Answers (1)

Arg0n
Arg0n

Reputation: 8423

Have a look at the following example:

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>

Upvotes: 1

Related Questions