Roundabout Shapes for jQuery

v2.0 by Fred LeBlanc

Updated to work with Roundabout v2!

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!

Requirements

Requires jQuery 1.2–1.7.x and the Roundabout plugin by Fred LeBlanc.

Issues & Support

The issue tracker is open over at GitHub for anything that arises. I’ll do my best to look anything reported, but no promises on a timeline.

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.

Copy & Paste Warning!

All of the sample code below assumes that your Roundabout is being applied to all <ul> on your page. You should update this accordingly.

Lazy Susan

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

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Lazy Susan.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'lazySusan'
      });
   });
</script>

Water Wheel

A vertical version of the Lazy Susan shape.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Water Wheel.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
</script>

Figure 8

Items travel in a horizontal figure-8.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Figure 8.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
</script>

Square

Items move in a flat, square shape.

  • :)
  • :D
  • :p
  • :*
Try it! The Square.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'square'
      });
   });
</script>

Conveyor Belt (Left)

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

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Conveyor Belt (Left).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltLeft'
      });
   });
</script>

Conveyor Belt (Right)

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

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Conveyor Belt (Right).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltRight'
      });
   });
</script>

Diagonal Ring (Left)

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

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Diagonal Ring (Left).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingLeft'
      });
   });
</script>

Diagonal Ring (Right)

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

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Diagonal Ring (Right).
<script>
   $(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.

  • :)
  • :D
  • :p
  • :*
  • :B
  • :p
  • :*
  • :B
Try it! The Roller Coaster.
<script>
   $(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).

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Tear Drop.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'tearDrop'
      });
   });
</script>

More Shapes, More Fun than Useful

The Juggler

Sort of a helix-type path.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Juggler.
<script>
   $(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.)

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Goodbye Cruel World.
<script>
   $(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!