Create Animated Blobs With jQuery - Blobinator
File Size: | 9.16 KB |
---|---|
Views Total: | 658 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Blobinator is a jQuery plugin to generate animated blobs using SVG, which can be used as a modern and eye-catching background for your webpage.
How to use it:
1. Load the minified version of the Blobinator plugin after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/blobinator.min.js"></script>
2. Create a container element with the CSS class of 'blobinator'.
<div class="blobinator"> </div>
3. Specify the number of blobs to generate.
<div class="blobinator" data-total="10"> </div>
4. Set the color of the blobs. Can be either a single value or a list of values separated by space.
<div class="blobinator" data-total="10" data-color="#27ae60"> </div> <!-- OR --> <div class="blobinator" data-total="10" data-color="#27ae60 #c0392b #8e44ad #2980b9 #138d75 #d4ac0d #d35400 #273746"> </div>
5. Configy the duration of the animation. Default: 15.
<div class="blobinator" data-total="10" data-color="#27ae60" data-animation-duration="5"> </div>
This awesome jQuery plugin is developed by prathamVaidya. For more Advanced Usages, please check the demo page or visit the official website.