<div class="container">
  <div>
    <div class="game">
      <div class="mario"></div>
      <div class="coin"></div>
    </div>
  </div>
</div>

.container {
  max-width: 400px;
  height: 250px;
  margin: auto;
  border: 5px solid;
  overflow: auto;
  scrollbar-width: none;
}
.container > div {
  width: 200%;
  height: 200%;
}

.game {
  max-width: 300px;
  height: 200px;
  position: sticky;
  top: 10px;
  left: 40px;
  border: 5px solid;
  background: #6185f8;
}
.mario {
  width: 60px;
  aspect-ratio: 1;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 1;
  background: url(https://assets.codepen.io/1480814/mm.png) center/cover;
  animation: x linear,y linear;
  animation-timeline: scroll(nearest inline),scroll(nearest block);
}
@keyframes x{to {left: calc(100% - 60px)}}
@keyframes y{to {top: calc(100% - 60px)}}


.coin {
  position: absolute;
  inset: 0;
}
.coin:before {
  content: "";
  position: absolute;
  width: 50px;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  aspect-ratio: 1;
  background: url(https://assets.codepen.io/1480814/ccc.png) 0 50%/600% auto no-repeat;
}