I need to put an effect on the cars so they move up to that point when loading the page.
Is there any Jquery for this? I do not know if you have a name for this effect rs
I also have to put this border in the cart, as is the example of the first (right).
What is the best way to do this?
You can use the transform and transition styles. The first one can be used to move (in an easy and friendlier way to the browser) elements on the screen. The second is to declare that you want to animate changes to certain styles (in this case, 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 above code, simply add the largada class in a container above the cars.
One tip is also to use the transition-delay style that adds a delay before the animation starts. Thus, you can increment the delay for each car by giving a little more life to your animation.
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;
}
In JavaScript you 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: link (now with suffixes for older browsers)
To make the effect of the car with the yellow border I suggest you have two different images and overlapping the second that has that yellow color later.