1

Preciso colocar um efeito nos carros para eles se moverem até esse ponto quando carregar a pagina.

Tem algum Jquery pra isso? Não sei nem se tem um nome para esse efeito rs

Também tenho que colocar essa borda no carrinho, como está o exemplo do primeiro(á direita).

Qual a melhor maneira de fazer isso?

carros de corrida

inserir a descrição da imagem aqui

4
  • Em que formato tens essa(s) imagens?
    – Sergio
    2/04/2015 às 13:19
  • @Sergio estão num PSD! posso salvar como PNG
    – fronthendy
    2/04/2015 às 13:20
  • @HendyAlmeida Então, primeiro você tem que separar a imagem dos carros da imagem de fundo, se você tem o PSD provavelmente conseguirá fazer isto, se vc tiver un link com as imagens eu posso fazer e responder aqui 2/04/2015 às 13:53
  • Adicionei a imagem do carrinho! (:
    – fronthendy
    2/04/2015 às 14:22

2 Respostas 2

5

Você pode usar os estilos transform e transition. O primeiro pode ser utilizado para movimentar (de forma fácil e mais amigável para o browser) elementos na tela. O segundo serve para declarar que você quer animar a mudanças de certos estilos (no caso, o transform).

/* Os carros começam fora da tela */
.carro {
    /* movimenta o elemento no eixo X */
    transform: translateX(-2000px);
    transition: transform 1s;
}

/* Utilizando js, você adiciona uma classe para utilizar como seletor para deixar os carros na posição correta */
.largada .carro {
    transform: translateX(0);
}

Para iniciar a animação, utilizando o código acima, basta adicionar a classe largada em um container acima dos carros.

Uma dica também é utilizar o estilo transition-delay que adiciona um delay antes da animação iniciar. Assim, você pode incrementar o delay para cada carro dando um pouco mais de vida para a sua animação.

Exemplo no jsFiddle

1
  • 1
    Funcionou! Obrgada (:
    – fronthendy
    2/04/2015 às 15:33
2

Podes fazer isso com CSS e JavaScript.

No CSS defines as transicão que queres fazer e uma classe que define o novo valor de por exemplo margin-left:

#carros img {
    margin-left: -600px;
    transition: margin-left 1s;
}
.chegada {
    margin-left: 0px !important;
}

e no JavaScript precisar somente de adicionar essa classe de CSS passado algum tempo (3s no exemplo em baixo):

setTimeout(function () {
    document.querySelector('#carros img').classList.add('chegada');
}, 3000);

Exemplo: http://jsfiddle.net/uy0ajo3k/1 (agora com sufixos para browsers mais antigos)

Para fazer o efeito do carro com a borda amarela sugiro teres duas imagens diferentes e sobrepores a segunda que tem essa cor amarela depois.

6
  • O efeito só acontece quando tiro o margin-left: -600px pelo browser :/
    – fronthendy
    2/04/2015 às 13:56
  • Como funciona o Transition?
    – fronthendy
    2/04/2015 às 13:57
  • @HendyAlmeida qual é o browser que estás a usar? vês a imagem a mover-se passados 3 segundos da página carregar?
    – Sergio
    2/04/2015 às 14:19
  • Chrome! No exemplo o efeito funciona, mas no meu projeto não !
    – fronthendy
    2/04/2015 às 14:27
  • 1
    Consegui resolver! Obrigada pela ajuda, preciso estudar mais :D
    – fronthendy
    2/04/2015 às 17:19

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 .