halloween bats flying around - Free Download Create Halloween Bats Flying Around The Page With jQuery

Free Download Create Halloween Bats Flying Around The Page With jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Create Halloween Bats Flying Around The Page With jQuery, hope it will help you in programming stack.

halloween bats flying around - Free Download Create Halloween Bats Flying Around The Page With jQuery
File Size: 14.6 KB
Views Total: 829
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.

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

2. Initialize the plugin and done.

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

3. Override the default bat image.

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

4. And then customize the sprite sheet accordingly.

01 window.halloweenBats = $.halloweenBats({
02  
03   // path to the image
04   image: 'bats.png',
05  
06   // total amount of bats
07   amount: 5, // Bat amount.
08  
09   // image width
10   width: 35,
11  
12   // frame height
13   height: 20,
14  
15   // total amount of frames
16   frames: 4,
17  
18   // animation speed
19   speed: 20,
20  
21   // Higher value = slower
22   flickering: 15
23  
24 });

5. Customize the z-index property.

1 window.halloweenBats = $.halloweenBats({
2  
3   zIndex: 10000
4  
5 });

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

1 window.halloweenBats = $.halloweenBats({
2  
3   target: '#container'
4  
5 });