javascript - How to flip a moving image horizontally when it reaches a certain point on the screen

Question

Overview

For my school project I have to create an animation in HTML, CSS and Javascript. I have just started to learn how to code and so am new to these kinds of projects. I have been able to make an image of mario move across the screen and then move back, but I want the image to flip when it reaches the start and end of the container. I have no idea how to do this and would be so grateful if someone could help me.

var objX = 0;
var change = 10;

function moveBlock() {
  var obj = document.getElementById("object");
  if ((objX + 251) > 1100) {
    change = -10;

  } else if (objX == 0) {
    change = 10;
  }
  objX = objX + change;
  obj.style.left = objX + "px";
}

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#grass {
  width: 1100px;
  height: 100px;
  margin-top: 0px;
  position: relative;
  background-color: green;
}

#container {
  width: 1100px;
  height: 320px;
  margin-top: 0px;
  position: relative;
  background-color: white;
}

#object {
  width: 251px;
  height: 320px;
  margin-top: 0px;
  position: absolute;
  background-image: url("https://i.stack.imgur.com/e7Hib.png")
}

<h1>Layers and animation</h1>
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<img src="https://i.imgur.com/kDDFvUp.png" class="rotate" width="100" height="100" />
<div id="container">
  <div id="object"></div>
</div>
<div id="grass"></div>
<br/>
<button onclick="setInterval(moveBlock, 25)">Click Me</button>

question from:https://stackoverflow.com/questions/65641889/how-to-flip-a-moving-image-horizontally-when-it-reaches-a-certain-point-on-the-s

Answer 1

I hope the following snippet can be of help, please do not hesitate to ask if there is any doubt.

const img = document.getElementById('img');
const container = img.parentElement;

let left = 0;
let sign = 1;

let ticking = false;

img.style.left = `${left}px`;
img.style.transform = `scaleX(${sign})`;

function translate() {
  // YOU CAN CHANGE THE SPEED BY CHANGING THIS.
  left += sign * 10;
    
  if (left + img.offsetWidth >= container.clientWidth) {
    // CASE: RIGHT LIMIT.
    left = container.clientWidth - img.offsetWidth;
    sign *= -1;
  } else if (left <= 0) {
    // CASE: LEFT LIMIT.
    left = 0;
    sign *= -1;
  }
    
  if (ticking) {
    return;
  }
  
  // THIS WILL RUN THE CALLBACK WHEN THE BROWSER IS READY TO DO A REPAINT. (JUST A PERFORMANCE IMPROVEMENT)
  requestAnimationFrame(() => { 
    img.style.left = `${left}px`;
    img.style.transform = `scaleX(${sign})`;
    
    ticking = false;
  });
  
  ticking = true;
}

setInterval(translate, 10);

#img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s linear;
}

<img id='img' src='https://i.imgur.com/kDDFvUp.png' />