A plugin for setting bubble-background of an element using canvas.
See README_zh.md
CanvasBubble({
selector: '#test',
wrap: true,
num: 100,
colors: ['#ffde4a','#f00'],
size: 10
});
{
selector: 'body',
num: 30,
size: 30,
colors: ['#ffffff', '#e1e1e1', '27,27,27'],
border: false,
borderColors: ['#f00', '#0f0', '#00f'],
shape: 'circle',
scale: [.5, 1],
opacity: [.1, 1],
speedX: [-1, 1],
speedY: [-1, 1],
rotate: [.05, .8],
canvasOpacity: .95,
wrap: false,
fps: 60
}
string
, the CSS selector of the element.
integer
, total num of bubbles to set.
integer
, main size of each bubble. the unit is px
array
, background-color for the bubbles, CanvasBubble
will get a random selection.
booleen
, whether the bubble has a border or not.
array
, border-color of the bubble, similar to colors.
string
, shape of the bubble. There is only two shapes: circle
, or other. call it square
array
, the range of bubble's scale.
array
, the range of bubble's opacity.
array
, the range of x-direction speed of bubble.
array
, the range of y-direction speed of bubble.
array
, the range of rotate of bubble's rotation.
number
, the opacity of canvas.
boolean
, wrap the element's children or not.
integer
, times of repaint the canvas per second.
CanvasBubble.util
CanvasBubble.util = {
'color': _color,
'random': _random,
'on': _on,
'extend': _extend,
'$': _$
}
Change hex color to RGB color.
Change RGB color to hex color.
generate a random number between the two arguments.
EventListener
extend object
CSS selector
- AMD
- DEMO
- Responsive
- ...
- Canvas API
qslinz.js
easyBackground.js
- Coldplay and WangWei