1

Bom, estou a tentar fazer um ciclo que faça a imagem andar para a frente ate a direita do ecra... ate ai eu consegui. Depois que ela chegou quero que ela desca um bocado e volte para a esquerda do ecra, quando chegar, descer um bocado e voltar para a direita... Mas nao estou a conseguir fazer isso. Alguem me ajude por favor.

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

1 Resposta 1

5

você pode e deve usar CSS para isto.

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

Detalhamento

para mover qual quer elemento CSS, você pode manipular as propriedades top, left, transform(translateX) e transform(translateY), lembrando que transform(translate) é o mesmo que transform(translateX, translateY)

Para mover o elemento para o todo da tela, basta setar os seguintes valores:

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

então para mover para a direita, é necessario incrementar a % do left e do transform(translateX), então para movemos até a parte central superior teríamos que modificar o CSS para:

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

O mesmo vale para deslocar para baixo, porém neste caso teria de incrementar a % do top e transform(translateY), então para movemos até a parte central da lateral esquerda teríamos que modificar o CSS para:

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

por fim, você pode incrementar os dois valores ao mesmo tempo, o ultimo exemplo moveria a imagem para o centro da tela:

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

lembrando que para funcionar corretamente, o elemento deve ter a propriedade position: fixed ou position: absolute (no caso do absolute, o elemento pai deve preencher toda a tela).

5
  • Muito obrigado, era mesmo isso que eu estava a precisar, muito boa explicação Commented 30/03/2017 às 8:14
  • Ja agora so um pergunta aquele valor em percentagem antes das chavetas { serve para que? Commented 30/03/2017 às 13:50
  • @AlexandreSeabra no exemplo acima a animação leva 5 segundos para ser executada, como você pode ver na seguinte linha move 5s linear forwards, as % servem para informar o estilo que o elemento deve possuir quando se passar uma fração do tempo estipulado, por exemplo.: 25% de 5 segundos é 1250ms, então aos 1250ms a imagem deve está com o seguinte CSS aplicado: top: 0px; left: 100%; transform: translate(-100%, 0) Commented 30/03/2017 às 14:05
  • Ok percebi, muito obrigado Commented 30/03/2017 às 15:28
  • @Tobias Mesquita... então, vc pode me dizer se é possível tal imagem percorrer um caminho (path) como uma elipse na animação?
    – Fernandes
    Commented 4/05/2019 às 2:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .