Spring After the Mouse

Attaching a simple object to follow the mouse around the screen is rather boring unless that object is quite sophisticated itself. To make things more interesting when we have a simple object following the mouse we can set things up so that we have multiple copies of the object following the mouse around and attach them together so that they interact with one another. For this script we will attach the objects together as if they are joined by springs. Because the objects are bouncing around the screen as they follow the mouse around the script uses the browser window size and position functions to make sure that all of the objects stay visible on the page.

If you move your mouse around this page you will notice a series of 'O' following the mouse as if they were attached to it at various points on a spring that has one end attached to the mouse pointer.

I have used 'O' for this example but you can easily substitute whatever you want for each of the objects just by updating what is assigned to the content field at the bottom of the script. Any valid HTML can be inserted as the definition of the object that will be repeated along the "spring". You can also change the number of objects to be displayed on the line immediately above.

JavaScript

Simply attach the above script to the bottom of your page immediately before the </body> tag.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate