Spritely

## Spritely 0.5 - locking a sprite's position relative to a background element.

To lock a sprite's position to the position of a background element, use the new 'lockTo' method introducted in Spritely version 0.3.
This Method needs the ID of the element it should be locked to, and the following three parameters:

- 'left': the sprite's left position relative to the background image's top left corner
- 'top': the sprite's top position relative to the background image's top left corner
- 'bg_img_width': the width of the the background image (required)

E.g., to lock the '#bird' sprite to the '#hill2' background element (as in the source code of this example), do the following:

    $('#bird')
    	.sprite({fps: 9, no_of_frames: 3})
    	.lockTo('#hill2', {
    		'left': 380,
    		'top': -60,
    		'bg_img_width': $(document).width()
    	});

You may also, optionally, set the interval (in milliseconds) that the position should be updated. By default this is 20 milliseconds. To alter the interval, in milliseconds, do the following:

    $('#bird')
    	.sprite({fps: 9, no_of_frames: 3})
    	.lockTo('#hill2', {
    		'left': 380,
    		'top': -60,
    		'bg_img_width': $(document).width(),
    		'interval': 40
    	});

Make sure you position each element on the page in the order you wish them to be layered, or use the css 'z-index' property to set their positions.