LOGO

Elastic band bullets

If you want to see a chain of bullets connected by an invisible elastic band on your web page, follow these steps:
  1. Download the files
  2. Include "elasticbullets.js" from the head of your page
  3. Define parameters or accept the defaults
This script works with all modern browsers, and with some very ancient ones too: Internet Explorer 9+, Firefox 4+, Opera, Safari, Chrome.

1. Download the files

Download the files in zip format, and copy the contents to the same folder where your web page is.

2. Include elasticbullets.js in the head of your page

Insert the following line into the head of your page:

<script src="elasticbullets.js">
</script>

3. Define parameters

Set parameters and press Update!
Parameter
Value
ebnumdots=
ebimg=
ebhtml=
ebbackground=
ebwidth=
ebheight=
ebradius=
ebseglength=
ebspringk=
ebmass=
ebgravity=
ebresistance=
ebbounce=
ebzindex=
   
   
>>> <<<

You can accept the defaults or assign new values to these variables:

The image that follows the cursor.

ebb.img= null;

Use this instead of ebimg, if you want something else to follow the cursor.

ebb.html= null;

Background color. Transparent is 'transparent'.

ebb.background= 'blue';

The size of the image, or the size of the html object in pixels.

ebb.width= 10;
ebb.height= 10;
ebb.radius= 5;

The number of dots.

ebb.numdots= 10;

The length of the elastic band between two dots.

ebb.seglength= 20;

Spring force constant.

ebb.springk= 10;

The mass of a bullet.

ebb.mass= 1;

Gravity constant.

ebb.gravity= 50;

Resistance loss constant.

ebb.resistance= 10;

Bounce factor.

ebb.bounce= 0.75;

Define z order position of image. Drag the example image over this section to see it working. This section is on a relative positioned layer with z-index of 9. See how the mouse trail images go behind the text.

ebb.zindex= 5;

More examples