images random movement inside a container without overlapping

programming web dev
1

hey,

Website (Document)
GitHub repo (GitHub - CodeTorso/codetorso.github.io: My portfolio.)

I am having this social bubble something like in my website.
I want the social bubbles to move randomly in the parent container. But they are constantly ending up overlapping each other.

  1. I think they should go up or down but not overlap each other.
  2. Also, when hovered what if the other closer div gets pushed.
  3. Or maybe I can drag it with my cursor.

I want something like (cryptobubbles net; I cannot include more than 2 links sorry) but I was unable to reverse engineer the code.

I tried to stick with JS, HTML and CSS. But jQuery is also there.

2

I read this but still there were just too many things. :\

3

Welcome to the forums @CodeTorso :slight_smile:

What you are trying to do is a very nice (yet complicated) effect! What you will need is some level of collision detection to have each circle bounce away from each other.

How many items do you foresee yourself having? Is it the 7 you have in your website right now?

4

Yes.

5

Sorry, I haven’t had time to look into this. What you need to do is have a variation of this: Animating Many Things on a Canvas | kirupa.com

The part you’ll need to add is some basic collision detection to have items bounce back when they hit another item.

6

Thanks.

Would notify you about the progress :smile:

1 Like