fredhq

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.

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>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'lazySusan'
      });
   });
</script>

Water Wheel

A vertical version of the Lazy Susan shape.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
</script>

Figure 8

Items travel in a horizontal figure-8.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
</script>

Square

Items move in a flat, square shape.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'square'
      });
   });
</script>

Conveyor Belt (Left)

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

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltLeft'
      });
   });
</script>

Conveyor Belt (Right)

Items travel in a conveyor-belt angled towards the 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.

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingLeft'
      });
   });
</script>

Diagonal Ring (Right)

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

<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.

<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).

<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'tearDrop'
      });
   });
</script>

More Shapes, More Fun than Useful

The Juggler

Sort of a helix-type path.

<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.)

<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!