0

I am trying to display moving words in my header and want the words to stay within that certain div no matter what the browser size is. I am console logging the width and the height and it seems to stay within the parameter but on the page it goes beyond those bounds. I have tried offSetHeight/Width and innerHeight/innerWidth but those don't work. I am using clientHeight/Width and that works in the console but it doesn't work on the page. I've set the bounce div to height: 100vh, and width to 100%. Could someone point me in the right direction?

Here is my code:

const bounceDiv = document.querySelector('.bounce')
for (let i = 0; i < words.length; i++) {
    setInterval(function timer() {
        let width = Math.floor(Math.random() * bounceDiv.clientWidth);
        console.log(width + ":" + "width")
        let height = Math.floor(Math.random() * bounceDiv.clientHeight);
        console.log(height + ":" + "height")
        words[i].style.transform = `translate(${width}px, ${height}px) `;
        words[i].style.transition = '1s ease-in-out'
    }, i * 2000);
}
Alanaj
  • 237
  • 2
  • 12
  • Math.floor(Math.random() * bounceDiv.clientWidth) is ok, but I believe you need to minus out of that, the offset of the current position, and block width of you animated block, in your css-translations. --- May I suggest looking into "request animation frame", it may be insightful – rexfordkelly Jul 09 '20 at 04:10
  • Here is a great post on the subject of using request animation frame, https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout, as setInterval may not play out as you expect it would. – rexfordkelly Jul 09 '20 at 04:22

0 Answers0