Question

I have a piece of text that uses Webkit's background-clip:text feature and for pure aesthetics purposes, I want to include a script to scroll through the image on the text. The one way I have thought of doing this is using setInterval and running the function I have included below. I want to know if I will run into any problems of using setInterval since I have it looping at 50ms.

Function:

function movePos(){
    var obj = document.querySelector('h1 span');
    var pos = parseInt(obj.style.backgroundPositionY);
    obj.style.backgroundPositionY = (pos + 1) + 'px';
}
Était-ce utile?

La solution

Any modern browser with even modest hardware should be able to handle executing these three lines of code 20 times per second. You should be fine.

If you want to optimize, and the obj variable won't change, you could cache that value so you're not running a selector 20 times per second. I'm not certain, but this is probably the most CPU intensive of the three lines of code.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top