CODEWITHSUNDEEP
javascripthtmlcssfrontend
Yağız Esmerligil
Yağız Esmerligil

Reputation: 25

Animating with Javascript

In this code, I was trying to move the yellow box (the small box) to the right, bottom, left, and top respectively in the red box (the big box) and I have wanted to move the yellow box unendly. I have moved the yellow box to the right and bottom but couldn't move to the left and top. I couldn't understand what the problem is. How should I write this code in Javascript? Could you help me, please? I have used Visual Studio Code.

 window.onload = function(){
                var posX = 0,posY =0, posZ=0;
                var smallbox = document.getElementById("smallbox");
                var time = setInterval(move,10);
    
                function move(){
                    if(posX>=150){
                       if(posY>=150){
                            if(posZ>=150){
                                clearInterval(time);
                            }
                            else{
                                posZ++;
                                smallbox.style.right = posZ + "px";
                            }
                        }
                        else{
                            posY++;
                            smallbox.style.top = posY + "px";
                        }
                    }
                    else{
                        posX = posX+1;
                        smallbox.style.left = posX + "px"; 
                    }
                }
            }
        #bigbox{
            height: 200px;
            width: 200px;
            background-color: red;
            position: relative;
        }
        #smallbox{
            height: 50px;
            width: 50px;
            background-color: yellow;
            position: absolute;
        }
<div id="bigbox">
   <div id="smallbox">
    
   </div>
</div>

Upvotes: 0

Views: 96

Answers (3)

LaytonGB
LaytonGB

Reputation: 1404

The reason that your animation is not working is that CSS alignments for objects must use "top" or "bottom" and "left" or "right" to align themselves. What you are doing is aligning horizontally using "left" and then trying to align horizontally using "right", or the same thing but around the other way.

What I would instead suggest is using code that essentially reads:

if at top-left, move right.
if at top-right, move down.
if at bottom-right, move left.
if at bottom-left, move up.

An example of this in action:

window.onload = function() {
  var posX = 0,
    posY = 0,
    boxW = 200,
    boxH = 200,
    smallboxW = 50,
    smallboxH = 50;
  var smallbox = document.getElementById("smallbox");
  var time = setInterval(move, 10);

  function move() {
    if (posY <= 0 && posX < boxW) {
      // go right
      posX++;
      smallbox.style.left = posX + "px";
    }
    if (posX >= boxW - smallboxW && posY < boxH) {
      // go down
      posY++;
      smallbox.style.top = posY + "px";
    }
    if (posY >= boxH - smallboxH && posX > 0) {
      // go left
      posX--;
      smallbox.style.left = posX + "px";
    }
    if (posX <= 0 && posY > 0) {
      // go up
      posY--;
      smallbox.style.top = posY + "px";
    }
  }
}
#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}
<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

Upvotes: 2

LaytonGB
LaytonGB

Reputation: 1404

One alternative option is to use the CSS keyframes to animate.

#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: relative;
  animation: move-around 4s infinite linear;
}

@keyframes move-around {
  0% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
  25% {
    left: 100%;
    top: 0;
    transform: translate(-100%, 0%);
  }
  50% {
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    left: 0;
    top: 100%;
    transform: translate(0%, -100%);
  }
  100% {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
  }
}
<body>
  <div id="bigbox">
    <div id="smallbox">

    </div>
  </div>
</body>

Upvotes: 2

Sameer
Sameer

Reputation: 5188

Instead of managing all calculations yourself, use the power of CSS in javascript with Element.animate().

This will also allow you to pause and play whenever needed.

const smallbox = document.querySelector('#smallbox');

smallbox.animate([
  // keyframes
  {
    transform: 'translate(150px, 0px)'
  },
  {
    transform: 'translate(150px, 150px)'
  },
  {
    transform: 'translate(0px, 150px)'
  },
  {
    transform: 'translate(0px, 0px)'
  },
  {
    transform: 'translate(150px, 0px)'
  },
], {
  // timing options
  duration: 2000,
  iterations: Infinity
});
#bigbox {
  height: 200px;
  width: 200px;
  background-color: red;
  position: relative;
}

#smallbox {
  height: 50px;
  width: 50px;
  background-color: yellow;
  position: absolute;
}
<div id="bigbox">
  <div id="smallbox">

  </div>
</div>

Upvotes: 2

Related Questions