Create Halloween Bats Flying Around The Page With jQuery

Create Halloween Bats Flying Around The Page With jQuery
File Size: 14.6 KB
Views Total: 111
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A fancy jQuery plugin designed for Halloween that displays a swarm of bats (or any other images) flying around the webpage.

Easy to implement and highly customizable. The bats are animated using the Sprite Sheet Animation technique.

How to use it:

1. Download the package and insert the JavaScript halloween-bats.js after you load the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/halloween-bats.js"></script>

2. Initialize the plugin and done.

window.halloweenBats = $.halloweenBats({
  // options here
});

3. Override the default bat image.

window.halloweenBats = $.halloweenBats({
  image: 'bats.png'
});

4. And then customize the sprite sheet accordingly.

window.halloweenBats = $.halloweenBats({

  // path to the image
  image: 'bats.png',

  // total amount of bats
  amount: 5, // Bat amount.

  // image width
  width: 35,

  // frame height
  height: 20,

  // total amount of frames
  frames: 4, 

  // animation speed
  speed: 20,

  // Higher value = slower
  flickering: 15

});

5. Customize the z-index property.

window.halloweenBats = $.halloweenBats({

  zIndex: 10000

});

6. Determine where to apply the animation. Default: body.

window.halloweenBats = $.halloweenBats({

  target: '#container'

});

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