Animation mettre une distance entre DIV
Bonjour,
J'ai plusieurs div placées au milieu de ma page en position absolue, et chaque div se superpose sur l'autre avec un léger décalage. J'ai crée une petite animation avec gsap, pendant cette animation je voudrais que toutes ces div se positionnent harmonieusement de façon aléatoire sur la page.
J'ai crée cette fonction que j'appelle dans ma timeline(gsap):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function imgAleat() {
const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
const divs = document.querySelectorAll(".divImg");
divs.forEach((div) => {
const left = entierAleatoire(0 + div.offsetWidth, windowWidth - div.offsetWidth);
const top = entierAleatoire(0 + div.offsetHeight, windowHeight - div.offsetHeight);
div.style.left = left + "px";
div.style.top = top + "px";
console.log(`hauteur : ${windowHeight} largeur: ${windowWidth}
left : ${left} top: ${top}
`);
});
}
tl.call(imgAleat); |
Tout marche bien mais les divs se chevauchent de façon aléatoire parfois, est ce que il serait possible de laisser une distance entre les divs pour que elle ne se chevauchent pas et de se placer harmonieusement dans la page de façon aléatoire ?
merci pour votre aide
