7

REVISED: Are there any jQuery plugins that can revolve one element around another?

EDIT: By "orbiting", I mean rotating on the same z-index around another element.

2
  • Since "orbiting" is not something that is at all common on the web (when was the last time you saw it?), there's little chance of there being a popular, well-maintained, general-purpose "orbit" plugin.
    – Pointy
    Sep 17, 2011 at 12:34
  • what ya mean by orbiting?? there is carousel that has many animation types but what is orbiting, is that like content spinning around other content? Sep 17, 2011 at 12:56

4 Answers 4

19

Below is is simple jQuery plugin that I've developed to provide the "orbiting" functionality you asked for. See this fiddle for an example of how to use it.

    ( function ( $ ) {
        jQuery.fn.orbit = function(s, options){
            var settings = {
                            orbits:    1     // Number of times to go round the orbit e.g. 0.5 = half an orbit
                           ,period:    3000  // Number of milliseconds to complete one orbit.
                           ,maxfps:    25    // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power
                           ,clockwise: true  // Direction of rotation.
            };
            $.extend(settings, options);  // Merge the supplied options with the default settings.

            return(this.each(function(){
                var p        = $(this);

/* First obtain the respective positions */

                var p_top    = p.css('top' ),
                    p_left   = p.css('left'),
                    s_top    = s.css('top' ),
                    s_left   = s.css('left');

/* Then get the positions of the centres of the objects */

                var p_x      = parseInt(p_top ) + p.height()/2,
                    p_y      = parseInt(p_left) + p.width ()/2,
                    s_x      = parseInt(s_top ) + s.height()/2,
                    s_y      = parseInt(s_left) + s.width ()/2;

/* Find the Adjacent and Opposite sides of the right-angled triangle */
                var a        = s_x - p_x,
                    o        = s_y - p_y;

/* Calculate the hypotenuse (radius) and the angle separating the objects */

                var r        = Math.sqrt(a*a + o*o);
                var theta    = Math.acos(a / r);

/* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */

                var niters   = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps));
                var delta    = 2*Math.PI / niters;
                var delay    = settings.period  / niters;
                if (! settings.clockwise) {delta = -delta;}
                niters      *= settings.orbits;

/* create the "timeout_loop function to do the work */

                var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){
                    setTimeout(function(){

/* Calculate the new position for the orbiting element */

                        var w = theta + iter * delta;
                        var a = r * Math.cos(w);
                        var o = r * Math.sin(w);
                        var x = parseInt(s.css('left')) + (s.height()/2) - a;
                        var y = parseInt(s.css('top' )) + (s.width ()/2) - o;

/* Set the CSS properties "top" and "left" to move the object to its new position */

                        p.css({top:  (y - p.height()/2),
                               left: (x - p.width ()/2)});

/* Call the timeout_loop function if we have not yet done all the iterations */

                        if (iter < (niters - 1))  timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings);
                    }, delay);
                };

/* Call the timeout_loop function */

                timeout_loop(s, r, theta, delta, 0, niters, delay, settings);
            }));
        }
    }) (jQuery);

    $('#mercury').orbit($('#sun'  ), {orbits:  8, period:  2000});
    $('#venus'  ).orbit($('#sun'  ), {orbits:  4, period:  4000});
    $('#earth'  ).orbit($('#sun'  ), {orbits:  2, period:  8000}).css({backgroundColor: '#ccffcc'});
    $('#moon'   ).orbit($('#earth'), {orbits: 32, period:   500, maxfps: 20, clockwise: false});       
    $('#mars'   ).orbit($('#sun'  ), {orbits:  1, period: 16000});

The HTML for this example is:

<h1> The inner planets of the Solar System</h1>
<div id='solar_system'>
    <div id='sun'    >SUN</div>
    <div id='mercury'>m</div>
    <div id='venus'  >v</div>
    <div id='earth'  >e</div>
    <div id='moon'   >m</div>
    <div id='mars'   >m</div>
</div>

The CSS for this example is:

#solar_system {position: relative; width: 1600px; height: 1600px; background-color: #222222}
#sun          {position: absolute; width:  80px; height:  80px;
               top: 380px; left: 580px; background-color: #ffff00;
               -moz-border-radius: 40px; border-radius: 40px;
               text-align: center; line-height: 80px;
}
#mercury      {position: absolute; width:  18px; height:  18px;
               top: 335px; left: 535px; background-color: #ffaaaa;
               -moz-border-radius:  9px; border-radius:  9px;
               text-align: center; line-height: 18px;
}
#venus        {position: absolute; width:  36px; height:  36px;
               top: 300px; left: 500px; background-color: #aaaaff;
               -moz-border-radius: 18px; border-radius: 18px;
               text-align: center; line-height: 30px;
}
#earth        {position: absolute; width:  30px; height:  30px;
               top: 200px; left: 400px; background-color: #ffaaaa;
               -moz-border-radius: 15px; border-radius: 15px;
               text-align: center; line-height: 30px;
}
#moon         {position: absolute; width:  12px; height:  12px;
               top: 150px; left: 350px; background-color: #cccccc;
               -moz-border-radius: 6px; border-radius: 6px;
               text-align: center; line-height: 12px;
}
#mars        {position: absolute; width:  24px; height:  24px;
               top: 100px; left: 200px; background-color: #ffaaaa;
               -moz-border-radius: 12px; border-radius: 12px;
               text-align: center; line-height: 24px;
}
3
  • 1
    My pleasure, it was a nice mental excercise for me to use my few remaining brain cells to dredge up my trigonometric knowledge from over 40 years ago. Regards -
    – Neil
    Sep 22, 2011 at 16:23
  • Beautifully written. Well done Jun 4, 2013 at 22:50
  • 1
    I love this. I don't have a use for it, but I love it.
    – Plummer
    Oct 2, 2013 at 15:40
1

THIS ANSWER SUPERCEDED BY MY OTHER RESPONSE TO THIS QUESTION.


You could use the ".animate()" method to modify the "top" and "left" properties of the element. Here is an example fiddle.

HTML:

  <div id='moon' > moon  </div>
  <div id='earth'> earth </div>

CSS:

#moon        {position:        absolute;
             top:             0px;
             left:            0px;
             width:           50px;
             height:          50px;
             background-color: #aaaaff;}
#earth      {position:        absolute;
             top:             50px;
             left:            50px;
             width:           50px;
             height:          50px;
             background-color: #ffaaaa;}

Javascript:

 $('#moon').animate({left: 100}, 2000)
           .animate({top:  100}, 2000)
           .animate({left:   0}, 2000)
           .animate({top:    0}, 2000);    
0

If you want to see something in raw Javascript I made a demo page years ago:

Demo

Click on the JavaScript Demo button. The page isn't compressed or minified so the JavaScript is very clean.

0
rotnew = (Math.asin(a / r) * 180) / Math.PI;

if(y < s_x ){
   rotnew =  - rotnew;
        }
p.css({'transform': 'rotate('+(rotnew)+'deg)'});

These three lines (placed inside the loop) allow each "planet" to remain perpendicular to the orbit center, it does not do anything if the rotating object are round of course :D

Not the answer you're looking for? Browse other questions tagged or ask your own question.