I need to manipulate the position of two <div> in opposite motions.
I searched in many places but found no explanation as to how such an effect can be done or how to do it.
I did not want to ask for the answer, but I do not even know how to research it!
I'm not going to give you the answer of how to move two divs in opposite directions, but here's the basics on how to handle an HTML element.
Consider this div:
<div id="minhaDiv"></div>
In JavaScript, you need:
// 1. Acesso ao objeto do DOM que representa a div
var div = document.getElementById('minhaDiv');
// 2. Manipular o objeto *style* da div para alterar sua aparência (incluindo posição)
// 2.1 Aparência
div.style.width = '50px';
div.style.height = '50px';
div.style.backgroundColor = '#ff0000';
// 2.2 Posição
div.style.position = 'absolute';
div.style.top = '100px';
div.style.left = '50px';
// 3. Pegadinha! Atenção ao alterar a posição baseada na atual:
var leftAtual = parseInt(div.style.left, 10);
div.style.left = (leftAtual + 5) + 'px'; // desloca 5px para a direita
To animate the position, you will need to deal with one of these 3 functions: