How to make race effect?

Question

I need to put an effect on the cars so they can move up to that point when I load the page.

You got any Jquery for that? I don’t even know if you have a name for it

I also have to put this edge on the cart, as is the example of the first (on the right).

What’s the best way to do that?

Answer 1

You can use the styles transform and transition. The first can be used to move (easily and more browser friendly) elements on the screen. The second serves to declare that you want to animate changes to certain styles (in this case, the 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);
}

To start the animation, using the code above, simply add the class largada in a container above the cars.

A hint is also using the style transition-delay that adds a delay before the animation starts. So you can increase the delay for each car by giving a little more life to your animation.

Example in jsFiddle

Answer 2

You can do this with CSS and Javascript.

In CSS you define the transition you want to make and a class that defines the new value of for example margin-left:

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

and in Javascript only need to add this CSS class after some time (3s in the example below):

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

Example: http://jsfiddle.net/uy0ajo3k/1 _{(now with suffixes for older browsers)}

To do the effect of the car with the yellow border I suggest you have two different images and overlap the second that has this yellow color after.