Actualmente estoy trabajando en la creación de un currículum interactivo simple, principalmente con javascript. La idea es que el usuario dirija un carácter hacia la derecha y luego aparecerán algunos divs "acerca de mí". Se supone que estos divs "acerca de mí" se mueven cuando el personaje se mueve, por lo que parece que se están acercando o alejando de ellos. Si no está claro, consulte la demostración .
He arreglado esto configurando style.left a 100, y luego restándolo cada vez que el personaje se mueve hacia la derecha. En el ejemplo, he usado minions, en lugar de "about-me"-divs, solo para que la función funcione.
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 + '%'; }Sin embargo, quiero que los divs "acerca de mí" se "repitan" y regresen nuevamente, después de que el personaje haya caminado un poco. Como este ejemplo .
Intenté usar este código debajo, en la misma función de c, pero no pasa nada, excepto que parece que el minion parpadea rápidamente cuando style.left es -10%.
if (minionOne.style.left <= -10 + '%') minionOne.style.left = moveMinion + '%';TLDR: quiero que style.left cambie a otra cosa cuando style.left alcance un número específico.
Tenga en cuenta que esto aún no está terminado, por lo que no tiene que juzgar el código y el proyecto fuera del que necesito ayuda, a menos que quiera dar algún consejo.
No puedes <= cadenas. Tienes que convertir uno en un número y compararlo con un número.
const threshold = -10; const asNum = Number(minionOne.style.left.split('%')[0]); if (asNum <= threshold ) { minionOne.style.left = `${100 + asNum - threshold}%`; }