Create Animated Worms Background With jQuery and Html5 - Glassy Worms
File Size: | 52 KB |
---|---|
Views Total: | 7161 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Glassy Worms is a fancy jQuery plugin that adds worms crawling effects on your background using Html5 canvas
element.
See also:
- jQuery Plugin For Creating Firefly Flying Background - FireFly
- Realistic Raindrops Effect with Canvas and Rainyday.js
- Creating Snow Falling Effect with jQuery snowfall Plugin
- Creating 3D Leaves Falling Effect with jQuery and CSS3
How to use it:
1. Include the necessary javascript libraries in the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="libs/sketch.js"></script>
2. Include the jQuery glassy worms plugin after jQuery library.
<script type="text/javascript" src="src/glassyWorms.js"></script>
3. Call the plugin on the body tag to create worms crawling effects on the whole background.
<script type="text/javascript"> $(function(){ $('body').glassyWorms({ colors: ['#fff', '#c2c2c2'], useStyles: true }); }); </script>
4. Available default settings.
<script type="text/javascript"> $(function(){ $('body').glassyWorms({ numParticles: 250, tailLength: 12, maxForce: 8, friction: 0.75, gravity: 9.81, interval: 3, colors: ['#fff'], element: $('<canvas class="worms"></canvas>')[0], useStyles: false }); }); </script>
This awesome jQuery plugin is developed by nim579. For more Advanced Usages, please check the demo page or visit the official website.