Bonjour,

Je souhaite faire bouger des carrés en arrière plan de ma page web.

Jusqu'ici tout va bienn j'arrive à les faire se déplacer mais j'aimerais qu'une fois que les carrés arrivent à certains endroit, qu'ils repartent dans un autre sens. Commnent détecter leur sortie d'un champ souhaité.

De plus, une question subsidiaire.. Mes carrés sont des divs ( au fait j'utilise le framework bootstrap), et j'aimerais faire en sorte que mes carrés ne prennent pas "d'espace" dans ma page, mais qu'ils soient uniquement en arrière plan.
Pour l'instant j'ai trouvé une autre solution en leur allouant une colonne sur la gauche mais j'aimerais bien trouvé une autre solution.

Merci d'avance, bisous!

2 réponses


Le plus logique serait de mettre les carrés en position absolute, avec un z-index inférieur au contenu de ta page.
Concernant l'animation, tu peux utiliser JS

Tu peux aussi tout faire en css avec des keyframes, par exemple :
0% { left: 0}
50% {left: ton break point}
100% {left: 0} (pour revenir au point de départ)