How to Animate Some Text to a Random Place in a Circular Div

Question

Hope So All Of You are Fine.

I have an assignment in which i have to animate some image to a circular div container at its any random place.

Right Now, I had done this Already.

jsfiddle.net/f4p6b/137

But The Problem is that the Container in jsfiddle is not Circular.

I want a Circular div container and image should drag/animate automatically on page load at some random place every time.

Kindly help me with the help of above jsfiddle code.

Thanks.

score 0 · Answer 1 · answered Jan 22 '17 at 07:19

0

Add the following css property to make your container circular

border-radius: 50%;

answered Jan 22 '17 at 07:19

Aayush Gupta

But Problem is that , The Image also animate to outside the circular div. – newbie12345 Jan 22 '17 at 09:37

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

As mentined above, you can add the border-radious:50% attirubute to make your Div circular.

Check out this JSFiddle:

Check out this updated fiddle :

I added a function which produces a random point inside the circle (with a little math, which you can find more explination here: Simplest way to plot points randomly inside a circle )

edited May 23 '17 at 12:33

Community

answered Jan 22 '17 at 07:34

Shai Aharoni

But Problem is that , The Image also animate to outside the circular div. – newbie12345 Jan 22 '17 at 09:37
You want to make all of the 4 values (min/maxX , min/maxY) inside the container circle? – Shai Aharoni Jan 22 '17 at 13:04

2 Answers2