https://github.com/pegasuspect/3d-bubble-cloud
A jQuery plugin for creating 3D bubble cloud with rotation ability
https://github.com/pegasuspect/3d-bubble-cloud
3d-bubble-cloud bower jquery jquery-plugin rotation
Last synced: 6 months ago
JSON representation
A jQuery plugin for creating 3D bubble cloud with rotation ability
- Host: GitHub
- URL: https://github.com/pegasuspect/3d-bubble-cloud
- Owner: pegasuspect
- License: mit
- Created: 2015-06-13T17:39:33.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-09-18T15:10:14.000Z (over 5 years ago)
- Last Synced: 2025-06-16T10:25:03.031Z (6 months ago)
- Topics: 3d-bubble-cloud, bower, jquery, jquery-plugin, rotation
- Language: JavaScript
- Homepage: https://www.osmansekerlen.com/3D-Bubble-Cloud/
- Size: 427 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 3D Bubble Cloud
A jQuery plugin for creating 3D bubble cloud with rotation ability.
Live demo and tests
here.
# Installation
### Bower
You can download this repo with its [dependencies](#dependencies) using bower:
```sh
$ bower install bubble-cloud-3d
```
### Regular
Or you can simply download the `BubbleCloud3D.js` file with the `BubbleCloud3D.css` file. Then in your html file link to them. For example:
```html
```
# Usage
With jQuery select elements and just use the method, to3DBubbleCloud()
#### Example wrappers:
```html
- Lorem
- ipsum
- dolor
- sit
- amet,
- consectetur
- adipiscing
- elit,
- sed
- do
- eiusmod
- tempor
- incididunt
- ut
- labore
- et
- dolore
- magna
- aliqua.
- Ut
Hi
This
is
a
new
frame
```
#### Javascript method to convert them:
```js
$(function(){
//assuming wrapper of the list has "frame" class
$(".frame").to3DBubbleCloud();
});
```
You may specify custom settings for:
- angularSpeedMultiplier
- maxAngularSpeed
- distributeBubblesRandomly
- showBubblesOutOfFrameBorders
```js
var options = {
angularSpeedMultiplier: 3, // default is 1
maxAngularSpeed: 24, // default is 8
showBubblesOutOfFrameBorders: false, // default is true
distributeBubblesRandomly: true // default is false
}
$(function(){
//assuming wrapper of the list has "frame" class
$(".frame").to3DBubbleCloud(options);
});
```
# Dependencies
- [jQuery](http://jquery.com/)
- [hammer.js](http://hammerjs.github.io/)
# Credits
1. http://stackoverflow.com/a/14609567
2. http://stackoverflow.com/a/5480292