Move image with JavaScript

Question

Move image with JavaScript

Navigation

#1 by (5 votes)

1

Well, I'm trying to make a cycle that makes the image move forward to the right of the screen ... until then I got it. After she arrived, I want her to go down a little and go back to the left of the screen, when she arrives, go down a little and turn right ... But I can not do that. Someone help me please.

<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 imagem

asked by anonymous 29.03.2017 / 12:30

1 answer

Click on a tr to open a link How to create mirrored temporary table in another

score 5 · Accepted Answer

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">

Detail

To move any element CSS , you can manipulate the 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 screen, simply set the following values:

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

Then to move to the right, it is necessary to increment the% of left and transform(translateX) , so to move to the upper 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 you would have to increase% of top and transform(translateY) , so to move to the middle of the left side we would have to modify 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%);

Remember that to work correctly, the element must have the property position: fixed or position: absolute (in the case of absolute , the parent must fill the entire screen).