I have an unordered list with a few list elements.

#tags {
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid red;
    list-style: none none;
}

#tags li {
    position: absolute;
    background: gray;
    }

I have also started writing a jQuery plugin to animate the list elements. So far, I place the list elements randomly in the parent container, and choose a random font size for the text.

My next step (which I am a bit stuck on) is to animate the list elements... essentially, I want the list elements to do something like this

• Slide from left to right whilst getting slightly larger up to the middle and then dropping in size back to normal when it hits the right border.
• Then, it should do the same in reverse, however it should also set a negative 'z-index' and maybe fade in opacity a bit.

The first bit I'm really stuck on, is how to determine if the element is near the middle, in a way that I can have a value that starts at 0.1 on the far left hand size and is 1 in the middle and then back to 0.1 on the far right hand size.

Basically, I want them to appear as if they are going around in a faux 3D circle into the page.

Then I could do something like this

$(this).css({
   fontSize: percentageTowardsMiddle * 14,

});

Do you know how I could do this?

Thanks