I'm currently working on creating a simple interactive CV, with mainly javascript. The idea is that the user steers a character to the right and then a few "about me"-divs will show up. These "about-me"-divs are supposed to move when the character moves, so it looks like they're getting closer to/further away from them. If unclear, check the demo.
I've fixed this by setting style.left to 100, and then subtracting from it each time the character moves to the right. In the example I've used minions, instead of "about-me"-divs, just to get the function to work.
let moveMinion = 100; // This is the same as their 'left' in CSS.
let moveMinionTwo = 150;
if (keyPresses.ArrowRight) {
moveMinion -= 0.3;
moveMinionTwo -= 0.3;
minionOne.style.left = moveMinion + '%'; // I Used % because I want it to work on different screen widths.
minioneTwo.style.left = moveMinionTwo + '%'; }
However I want the "about me"-divs to "repeat" and come back again, after the character have walked for a bit. Like this example.
I tried using this code underneath, in the same function ofc, but nothing happens, except it seems like the minion blinks quickly when style.left is -10%.
if (minionOne.style.left <= -10 + '%') minionOne.style.left = moveMinion + '%';
TLDR: I want style.left to change to something else when style.left hits a specific number.
Bear in mind, this is not finished yet, so you don't have to judge the code and the project outside of the one I need help with, unless you want to give any tips.
You can't <= strings.
You gotta convert one to a number and compare to a number.
const threshold = -10;
const asNum = Number(minionOne.style.left.split('%')[0]);
if (asNum <= threshold ) {
minionOne.style.left = `${100 + asNum - threshold}%`;
}