Try It Out On This Page

Most fields can be blank to use the default. (Click on a field to bring up some help text about each parameter).
A URL pointing at the image to be animated. This can be a single string or an array of strings in JSON notation (ex. ["img/red_ball.png", "img/blue_ball.png", "img/green_ball.png"]). The number of animations to show. Will use images randomly or in rotation from the Image URL parameter above. Starting position in px or %. Each array member is an array with either a 1 or two members. A two-member array will be interpreted as a range. Default is [["0%","100%"]]. Same as Start X, for the the Y location. Direction of the initial animation in degrees. 0 is up. Valid values are 0 to 359. Each item of the array can be single number or a two-item array specifying min and max to randomly select. Default is [[0,359]] Speed in pixels per second. Default is 500. How to act when the leading/trailing* edge of the image encounters a side of the container. Valid values are: "wrap", "bounce", "restart". Default is "bounce" . (* For "wrap" and "restart", it's the trailing edge, and for "bounce", it's the leading edge). Speed in degrees per second. Default is 0, no rotation. An array of two values, a "from" angle and a "to" angle, which the rotation will increment through. Values must be between 0 and 359. If the first number is smaller than the second, the rotation direction is clockwise, otherwise counter-clockwise. The default is "[0,359]". Whether to "bounce" when then rotation comes to the limit specified in rotate_range. If false, the animation just starts at the beginning (spin round and round). If true, the rotation reverses itself, so if rotate_range is "[100, 200]", rotation will go from 100 to 200 degrees, then from 200 to 100, then from 100 to 200, and so on. Default is false (spin round and round). Delay the start of all animations in seconds. Default is 0. For "restart" bounce mode only, delay the start of each animation in seconds randomly between first and second member of array inclusive. Default is [1,5]. true/false. When multiple images are specified, specifies what to do for each count: pick randomly from the list, or increment through until reaching the end of the list and start over (i.e. rotate through the list). true/false. Same approach as above, but when start_x and start_y specify a list of positions, you can either pick randomly each time, or rotate through the given list. true/false. Same approach as above, but determines how to use the direction parameter.
(leave any field blank for default action)

		

	

	

		

			

				Update 11/28/16: 
				Version 0.9.4 is here, and it is a huge update: animation has been redone and deals with
				odd-shaped sprites; performance enhancements; tons of code clean-ups; better parameter validation; new
				restart_delay param; somewhat simplified API.
			

			
***

			

				MetaPong is a simple yet powerful library that allows you to animate images within a given HTML container
				(for instance, document.body). It was originally developed by Invitecast
				to add amazing effects to our online invites.
			

			

				MetaPong can be used to create things like snow storms, birds flying around the screen, raining cats
				and dogs, and many other fun things. The animation can be targeted at a particular HMTL container,
				or the whole screen (document.body).
			

			

				As a compact, pure-JavaScript (no dependencies) library, you can easily add MetaPong to your project.
			

			
Simple Usage Example

			

				In the example below, 9 images will be animated around the page in a random way, bouncing off the
				edges, "pong style" (like a pool table, if you will). The 9 images will be randomly selected
				from the given three PNG files (which oh-so-happen to be in the same server/directory as the calling file).
			

			
	var mp = new MetaPong({
		image_url: ["img/red_ball.png", "img/blue_ball.png", "img/green_ball.png"],
		count: 9,
		direction: [[0, 359]],
		bounce: "bounce"
	});

	mp.start();