CODEWITHSUNDEEP
javascripthtmlcss
jay
jay

Reputation: 3667

Moving a div along a circular path using HTML/JavaScript/CSS

I would like to move a circle along a circular path using HTML/CSS/JavaScript. Is there a way to achieve this? The code for circle is added below:

.circle {
    width: 50px;
    height: 50px;
    display: block;
    -webkit-border-radius: 50px;
     -khtml-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    color: #fff;
    background-color: #b9c1de;
}

<div class="circle"></div>

Upvotes: 12

Views: 37001

Answers (4)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94309

It is Math time!

function circle(){
    var width = 10,
        height = 10,
        offsetX = 100,
        offsetY = 100,
        x = Math.cos(new Date()) * width + offsetX;   //Remember high school?
        y = Math.sin(new Date()) * height + offsetY;

    //Do whatever you want here with the coordinates.
    document.getElementsByClassName("circle")[0].style.left = x+"px";
    document.getElementsByClassName("circle")[0].style.top = y+"px";

    setTimeout(circle, 50);
}

Upvotes: 2

Useful Angle
Useful Angle

Reputation: 986

There are 2 ways of moving a container div in a circular path with CSS :

1) Animating the CSS transform property :
The element which is to be rotated must have a parent element. Now if you want to move the child by 60 degrees, first rotate the parent by 60 degrees and then rotate the child by -60 degress (an opposite angle so that the child does not look inverted).
Use CSS transition, CSS animation or Web Animations API to perform the animation.

About the below code :
Parent has relative positioning. Also make it circular by giving equal height, width, border-radius = 50%
Child has absolute position. It has been given a height & width, top & left properties so that it appears at the top-middle of the parent.

#parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 0.7s linear;
}

#child {
    position: absolute;
    width: 80px;
    height: 80px;
    transform: rotate(0deg);
    transition: transform 0.7s linear;
    top: -40px;   
    left: 110px;
    border: 1px solid black;
}

$("#button").on('click', function() {
    $("#parent").css({ transform: 'rotate(60deg)' });
    $("#child").css({ transform: 'rotate(-60deg)' });
});

http://usefulangle.com/post/32/moving-an-element-in-circular-path-with-css is a blog post that I wrote. Also contains a demo.

2) Animating the CSS offset-position property :
With the new CSS Motion Path or Offset Path, it is possible to animate an element along ANY path. However as of now (Jan 2017) it will work only on the latest version of Chrome.
You have to define a circular SVG path with offset-path property. Then animate the offset-distance property over this path using CSS transition, CSS animation or Web Animations API.
Other than defining a SVG path, you can give set offset-path: margin-box. This will define the path as the margin boundary of the parent. If the parent has been made circular with border-radius, the path will be circular too.

#child {
    offset-path: margin-box;
}


See http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path for the related blog post dealing in circular animation with Motion Path.

Upvotes: 0

Nathan Wall
Nathan Wall

Reputation: 6766

Here's a pure JavaScript solution I threw together. Should have very good browser support (no CSS3 required). It's highly configurable. Make sure you look at the configuration options at the bottom of the JavaScript section. No library required.

http://jsfiddle.net/nN7ct/

Upvotes: 4

sandeep
sandeep

Reputation: 92803

You can achieve this with pure css3. Write like this:

CSS

.dot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
}
.sun{
    width:200px;
    height:200px;
    position:absolute;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    top:50px;
    left:50px;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
}

HTML

<div class="sun">
 <div class="dot"></div>
</div>​

Check this http://jsfiddle.net/r4AFV/

UPDATED

http://jsfiddle.net/r4AFV/1/

Upvotes: 19

Related Questions