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
