Rotate around circle div at bottom

Question

I have found a JSFiddle: http://jsfiddle.net/wyW2D/1/

which moves divs around the circle.

I'm pretty new to jQuery so I was wondering whether or not you could help me. I'm trying to get the main circle to go along the bottom and then the divs to rotate from the right to the left. However I do not fully understand the code :(

Here is the jQuery :

  var t = -1.6;
var t2 = -1.6;
var x = 0;
var t = [-1.6, -1.6, -1.6],
delta = [0.05, 0.03, 0.02],
finish = [1.4, 1.0, 0.6];
function moveit(i) {
t[i] += delta[i];
var r = 300;         // radius
var xcenter = -30;   // center X position
var ycenter = 420;   // center Y position

var newLeft = Math.floor(xcenter + (r * Math.cos(t[i])));
var newTop = Math.floor(ycenter + (r * Math.sin(t[i])));

$('div.circle'+(i+1)).animate({
    top: newTop,
    left: newLeft,
},1, function() {
    if (t[i] < finish[i]) moveit(i);
});
}
$("document").ready(function(e) {
//jQuery.easing.def = "easeOutBounce";
//$('div.circle1').hide().first().show();
moveit(0);
moveit(1);
moveit(2);
});

Here is the CSS:

 @charset "utf-8";
/* CSS Document */

.background {
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.maincircle {

    position: absolute;
    left: -300px;
    height: 25px;
    padding-top: 150px;
}
.inner {
    width:600px;
    height:600px;
    border-radius: 2080px;
    background-color:#02E3E7;
    }
.text {
    font-family:"Segoe UI";
    font-size: 18px;
    z-index: 99;
    padding-top: 300px;
    padding-left: 100px;
    text-align:right;
    }

.circle1 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}   
    .circle2 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}
.circle3 {
        position: absolute;
        left: -100px;
    width:100px;
    height:100px;
    border-radius: 180px;
    font-family:"Segoe UI";
    font-size: 12px;
    text-align:center;
    vertical-align:middle;
    background-color:#30EB0B;
}

Or is there an easier solution/plugin that could do this for me?

I would be very appreciative if someone could help me solve this. Thanks

i don't think it's the jquery you need to understand, I think it's the maths! — Pete
Nope, it's def the jQuery. All those variables at the top etc. — DannieCoderBoi

MarkP MarkP · Accepted Answer · 2014-05-30T09:56:43

I found the original stackoverflow relating to the Fiddle that you mentioned after a little Google Searching. The code is commented on there:

var t = -1.6;
var t2 = -1.6;
var x = 0;
var t = [-1.6, -1.6, -1.6], // starting angle in radians for each circle

delta = [0.05, 0.03, 0.02], // change in radians for each circle
                            // e.g the first moves fastest, the last 
                            // slowest. if this gets too big, the 
                            // movement won't look circular, since the
                            // animation is really a bunch of straight lines

finish = [1.4, 1.0, 0.6];   // the stopping point in radians for each
                            // circle. if the circle size changes, this
                            // may need to change

function moveit(i) {
t[i] += delta[i];    // move the angle forward by delta
var r = 300;         // radius (the .inner div is 600 x 600)
var xcenter = -30;   // center X position: this reproduces the .inner horizontal
                            // center but from the body element
var ycenter = 420;   // center Y position: same here but vertical

// Basic trig, these use sin/cos to find the vert and horiz offset for a given
// angle from the center (t[i]) and a given radius (r)
var newLeft = Math.floor(xcenter + (r * Math.cos(t[i])));
var newTop = Math.floor(ycenter + (r * Math.sin(t[i])));

// Now animate to the new top and left, over 1ms, and when complete call
// the move function again if t[i] hasn't reached the finish.
$('div.circle'+(i+1)).animate({
    top: newTop,
    left: newLeft,
},1, function() {
  if (t[i] < finish[i]) moveit(i);
});
// You can slow down the animation by increasing the 1, but that will eventually
// make it choppy. This plays opposite the delta.
}

// Start the ball rolling
$("document").ready(function(e) {
  moveit(0);
  moveit(1);
  moveit(2);
});

Does this help you?

Rotate around circle div at bottom

1 Answers