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.