jQuery Plugin To Generate Parallax Bokeh Background

Bokeh Generator is a jQuery plugin that helps generate a bokeh background with a CSS3 based parallax scrolling effect for your webpage.

See also:

• Random Bokeh Background with jQuery and Canvas - bokehBg

How to use it:

1. Download and include the jQuery Bokeh Generator on your webpage.

<link rel="stylesheet" href="bokeh-style.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="bokeh-script.js"></script>

2. Create an empty element that will serve as the background layer for your webpage.

<div id="bokeh"></div>

3. Call the plugin to generate a default bokeh background.

$(document).ready(function() {
  $('#bokeh').makeBokeh();
});

4. Plugin options and defaults.

$('#bokeh').makeBokeh({

// The number of bokeh circles to be generated.
'count' : 100, 

// The minimum pixel diameter of each bokeh circle.
'sizeMin' : 50, 

// The maximum pixel diameter of each bokeh circle.
'sizeMax' : 250, 

// The minimum opacity in hundredths of each bokeh circle, e.g., 45 would become .045
'opacityMin' : 49, 

// The maximum opacity in hundredths of each bokeh circle., e.g., 45 would become .045
'opacityMax' : 99, 

// The minimum pixel position on the X axis.
'xMin' : -50, 

// The maximum pixel position on the X axis.
'xMax' : $(document).width(), 

// The minimum pixel position on the Y axis.
'yMin' : -50, 

// The maximum pixel position on the Y axis.
'yMax' : $(document).height() 

});

---

This awesome jQuery plugin is developed by sparkjames. For more Advanced Usages, please check the demo page or visit the official website.