Fork me on GitHub


Test Page v0.3

Drag bubbles to rotate.

  1. Regular Bubble Cloud with 20 Elements

  2. Regular Bubble Cloud with 80 Elements

  3. Bubble Cloud with Images

  4. Hide Bubbles out of frame

    var options = {
    showBubblesOutOfFrameBorders: false 
    // default is true
}
$("#hideBubblesOutOfFrame")
.to3DBubbleCloud(options);

  5. Faster rotation (3 times)

    var options = {
    angularSpeedMultiplier: 3, 
    // default is 1
    maxAngularSpeed: 24, 
    //defaults to 8
    showBubblesOutOfFrameBorders: false 
    // default is true
}
$("#fasterBubbles")
.to3DBubbleCloud(options);

  6. Distribute bubbles randomly*

    var options = {
    angularSpeedMultiplier: 3, 
    // default is 1
    maxAngularSpeed: 24, 
    //defaults to 8
    showBubblesOutOfFrameBorders: false, 
    // default is true
    distributeBubblesRandomly: true 
    // default is false
}
$("#randomDistribution")
.to3DBubbleCloud(options);
*Without any options set, the bubbles are created evenly in 8 sections of a sphere with r = frame width/2. The sections are calculated by slicing sphere on x,y,z planes. In these 8 divisions, number of bubbles are equal but bubbles are still placed randomly. If distributeBubblesRandomly is set to true bubbles are placed in random locations without any division placement.
Also note that this code is written to work especially on touch devices where hammerJS is used for the purpose.