How do I make a DOM object follow a circular path with jQuery?

Question

I'm trying to make a DOM object follow a circular path with jQuery.

So far, I'm trying to find the path by re-arranging a simple formula to determine a circle, so in pseudocode:

x = whatever. y = abs(sqrt(constant) -x)

This is what I have so far:

$(window).on('scroll', function() 
{
    //get intitial ratio
    vRatio = (sky.dHeight - sky.height ) / (sky.height - 100)
    hRatio = (sky.dHeight - sky.height ) / (sky.width - 100)

    rawX = $(window).scrollTop() / hRatio;
    x = rawX - sky.width/2;
    y = Math.abs(Math.sqrt(sky.width/2) - x);

    console.log(x)
    console.log(y)

    sun.ob.css({left : rawX, top: y})
})

Currently, it's following a triangular path rather than the gentle circular flow I was seeking with my eyes.

Just to give some context, this is on a parallax style document where the height is 000's of px tall (hence the ratios).

Answer 1

Made this fiddle for you - uses some CSS rotation while scrolling down:

http://jsfiddle.net/cWqKL/3/

$(window).scroll(function () {
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height() - $(window).height();
    var scrollPercent = (scrollAmount / documentHeight);
    var r = 180 * scrollPercent;
    TweenMax.to($('#orbit'), 0.5, {
        rotation: r
    });
});

Should work on any window size.