Create Animated Worms Background With jQuery and Html5 - Glassy Worms

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.