jQuery Plugin To Generate Parallax Bokeh Background
File Size: | 4.59 KB |
---|---|
Views Total: | 4062 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Bokeh Generator is a jQuery plugin that helps generate a bokeh background with a CSS3 based parallax scrolling effect for your webpage.
See also:
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.