Crazy Circles

Crazy Circles is a visual illusion which happens when different balls bouncing inside of a circle create the impression of a circular movement, where in reality, the movement of each ball is straight.

The CrazyCircles javascript class allows you to easily add this nice visual effect to your loading...'s page.


Index


Usage

To render the crazy circles, you need a container (i.e.: div). On the class intantiation, you pass the id of your container and optionally your options configuration.

HTML

<div id="cc"></div>

Script

new CrazyCircles("cc", {} );

Options

Following options are allowed:

Example

new CrazyCircles(
  "ccGoCrazy", 
  { color: "multi", 
    goCrazyCycle: 5, 
    restartAfterCycle: 10 
  } );  

Implementation and Examples

The code can be found on:

To read more about how the effect was implemented and to see some examples, please check the blog article:

http://www.kopf.com.br/kaplof/crazy-circles-loading-using-javascript


Dependencies

Crazy Circles requires Raphael.js