Roundabout Shapes for jQuery & Roundabout

v1.1 by Fred LeBlanc

Move Elements with Even More Style

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

Like its Roundabout companion, Roundabout Shapes is released under the BSD license. If you’re unsure of what that means exactly, the entire license can be found in the source code. Please, have a ball with it!

Update, December 29: Version 1.1 Released! Two new shapes added! Please say hello to the Roller Coaster and the Tear Drop.

Update, December 22: There were some errors in the example code blurbs. These have hopefully all been fixed. If you find anything that isn’t working like it should, please let me know!

Requirements

Requires jQuery 1.2.3+, 1.3.x or 1.4.x and the Roundabout plugin by Fred LeBlanc.

More Useful Shapes

Below are all of the ways that your Roundabout will be able to move, each with a demonstration of the shape in action.

Lazy Susan

The default movement of a Roundabout. This shape is included with the Roundabout plugin, but can be specified like any other shape.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'lazySusan'
      });
   });
   // ]]>
</script>

Water Wheel

A vertical version of the Lazy Susan shape.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
   // ]]>
</script>

Figure 8

Items travel in a horizontal figure-8.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
   // ]]>
</script>

Square

Items move in a flat, square shape.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'square'
      });
   });
   // ]]>
</script>

Conveyor Belt (Left)

Items travel in a conveyor-belt angled towards the left.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltLeft'
      });
   });
   // ]]>
</script>

Conveyor Belt (Right)

Items travel in a conveyor-belt angled towards the right.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltRight'
      });
   });
   // ]]>
</script>

Diagonal Ring (Left)

Similar to the Lazy Susan, but the left side is tilted up.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingLeft'
      });
   });
   // ]]>
</script>

Diagonal Ring (Right)

Similar to the Lazy Susan, but the right side is tilted up.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingRight'
      });
   });
   // ]]>
</script>

Roller Coaster Added in v1.1

Wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!

Because this one can be kind of weird if you have just the right number of elements in your Roundabout, changing the tilt increases the number of waves in the coaster.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'rollerCoaster'
      });
   });
   // ]]>
</script>

Tear Drop Added in v1.1

The front side is pointy, but the back side is rounded. Changing the tilt with this shape makes a spiral pattern (although the part that you probably want in front is in the back).

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'tearDrop'
      });
   });
   // ]]>
</script>

More Shapes, More Fun than Useful

The Juggler

Sort of a helix-type path.

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'theJuggler'
      });
   });
   // ]]>
</script>

Goodbye Cruel World

Towards the end of an animation that will put a moving item into focus, the item drops sharply off the screen. (Or, will jump quickly out of no where, depending on which direction you move.)

<script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'goodbyeCruelWorld'
      });
   });
   // ]]>
</script>

Further Customization

Playing with the tilt of your Roundabouts while using these shapes may result in even better shapes for your site. Give it a whirl!