Move Image with Javascript

Asked

Viewed 2,422 times

1

Well, I’m trying to make a loop that makes the image go forward to the right of the screen... so I did it. After she arrived I want her to slip a little bit and turn to the left of the screen, when she arrives, descend a little and turn to the right... But I can’t do it. Somebody please help me.

<html>
<head>
</head>
<body style="margin:0px;">
    <img id="imagem" style="position:absolute;"src="img.jpg"/>
    <script type="text/javascript">
        var anda = 0, //Work with actual number type
            imagem = document.getElementById('imagem'),
            timerId = 0;
            timerId = setInterval( function() { //This function is called by the browser every 33 milliseconds
                if( anda++ > 1250 ) {
                    clearInterval( timerId ); //Sleft the interval because left is > 200
                }
                imagem.style.left = anda + "px"; //Only convert to number + "px" when we need to set .style.left


            }, 1 );
    </script>
</body>

javascript image

1 answer

5


you can and should use CSS for this.

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

img {
  position: absolute;
  width: 128px;
  height: 128px;
  animation: move 5s linear forwards;
}

@keyframes move {
  0%   { top: 0px; left: 0px; transform: translate(0, 0); }
  /*12.5%   { top: 0px; left: 50%; transform: translate(-50%, 0); }*/
  25%  { top: 0px; left: 100%; transform: translate(-100%, 0) }
  37.5%  { top: 50%; left: 100%; transform: translate(-100%, -50%) }
  /*50%   { top: 50%; left: 50%; transform: translate(-50%, -50%); }*/
  62.5%  { top: 50%; left: 0px; transform: translate(0, -50%) }
  75%  { top: 100%; left: 0px; transform: translate(0, -100%) }
  /*87.5%   { top: 100%; left: 50%; transform: translate(-50%, -100%); }*/
  100% { top: 100%; left: 100%; transform: translate(-100%, -100%) }
}
<img src="https://image.flaticon.com/icons/svg/159/159790.svg">

Detailing

to move whatever element CSS, you can manipulate properties top, left, transform(translateX) and transform(translateY), remembering that transform(translate) is the same as transform(translateX, translateY)

To move the element to the whole of the screen, simply set the following values:

top: 0px; left: 0px; transform: translate(0, 0);

then to move to the right, it is necessary to increase the % of the left and of transform(translateX), then to move to the top center we would have to modify the CSS to:

top: 0px; left: 50%; transform: translate(-50%, 0);

The same goes for moving down, but in this case it would have to increase the % of the top and transform(translateY), then to move to the center of the left side we would have to modify the CSS to:

top: 50%; left: 0px; transform: translate(0, -50%);

Finally, you can increment the two values at the same time, the last example would move the image to the center of the screen:

top: 50%; left: 50%; transform: translate(-50%, -50%);

recalling that to function properly, the element must have the property position: fixed or position: absolute (in the case of absolute, the parent element must fill the whole screen).

  • Thank you very much, that’s just what I needed, very good explanation

  • Only one questions that value in percentage before the braces { serve for what?

  • @Alexandreseopen in the example above the animation takes 5 seconds to run, as you can see in the following line move 5s linear forwards, as % serve to inform the style that the element must have when a fraction of the stipulated time is spent, for example.: 25% 5 seconds is 1250ms, then at 1250ms the image should be with the following CSS applied: top: 0px; left: 100%; transform: translate(-100%, 0)

  • Okay I get it, thank you very much

  • @Tobias Mesquita... then, you can tell me if it is possible such an image go through a path (path) as an ellipse in animation?

Browser other questions tagged javascript image

You are not signed in. Login or sign up in order to post.