Mattia Mattia - 6 months ago 19
jQuery Question

How to create an orbit of three elements around a logo

I'm a newbie and I'm on my first project:

I have three elements (images) and a logo.

When I click on an image this one and the other two ones should move in an orbit of 360° around the logo (with a low z-index when they go on the back of the logo so they can disappear and then reappear).

Is this possible with jquery and css3?

Answer Source

Hiya 2 demos starts with simple:

1) (using divs) & code:

2) and code:

Please see here as well: jQuery plugin to make an element orbit another?

For the second demo you can copy paste the code from jsfiddle. rest this should help, have a nice one, and don't forget to accept answer if this helps.! :)

Jquery for simple demo

var angle = 0;     // starting position (degrees)
var distance = 30; // distance of b from a
var speed = 60;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var o = $('#a').offset();

    var t = + (distance * Math.sin(angle * Math.PI/180.0));
    var l = o.left+ (distance * Math.cos(angle * Math.PI/180.0));

        top: t,
        left: l
        top: t + 20,
        left: l + 30
        top: t +40,
        left: l +40
    angle += (speed * (rate/1000)) % 360;

setInterval(f, rate);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download