@noradrenaline

Как сделать анимацию в js туда и обратно?

Как сделать так, чтобы самолет летал туда и обратно?
Код в одну сторону написан,а вот как в другую не пойму

<code lang="css">
<style>
      img{
        position:absolute;
        width: 220px;
        transform: scale(-1,1);
      }
    </style>
</code>
  </head>
  <body>
    <img src="/img/самолет.png" id="plane" alt="">
<code lang="javascript">
    <script>
      let plane = document.getElementById("plane");
      let n = 0;
      function movePlane(){
        n = n + 1;
        plane.style.left = n+"px";
      }
      setInterval(movePlane, 10);
    </script>
</code>
  </body>
</html>

noradrzo.beget.tech/plane.html
  • Вопрос задан
  • 184 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Azasemey
<script>
          const plane = document.getElementById("plane");
          let n = 0;
          const maxTravel = window.outerWidth-plane.offsetWidth;
          let direction = 0;
          plane.style.left = "";
         function movePlane(){     
            if(n < maxTravel  && direction === 0)  {    
            n++;
            plane.style.left = `${n}px`; 
            plane.classList.remove('reverse') 
            }else {
                direction = 1;
                n--
                plane.style.left = `${n}px`
                plane.classList.add('reverse')
            };
            if(n<0){
                direction = 0;
            }
          };
          setInterval(movePlane,   5);
        </script>


честно не уверен что это правильное решение, но работает xD
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы