With this page you can display some images, even stacks of images, and enable visitors to rotate them interactively.
No Flash or other plugins needed! You can also use your own images!


Compose your own animation

URL:

w= maximum width in px (optional, used for centering)
t= title or description (optional, will be automatically URL-encoded here)
bg= document background color (name or hex-without-#)
bas= base URL (optional, a prefix for all img URLs)
div= show a pair of dividers at specified absolute y-position (optional, used for sectors)
img= URL of an image
abs= , Position of the rotation center of the image on the screen, in pixels, left-top=0,0
rel= , Position of the rotation center of the image relative to left-top of image, in pixels (optional, default: width/2,height/2)
min=  ° Minimum of allowed rotation, in degrees (optional)
max=  ° Maximum of allowed rotation, in degrees (optional)
opa= Opacity of image, on 0...100 scale. (optional, default:100)
lnk= Links motion of image to that of ith image (i starts at 1). Use negative i for reversed motion. (optional)
btn= Coordinates of the part of the image that can be grabbed to rotate the image. (optional, if omitted the image is static)
btn can be:
x,y,r : circle with radius r and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
x,y,ra,rb : ring with outer radius ra, inner radius rb and center x,y (relative to left-top of image). x and y can be the character X or Y (for the image center, see "rel").
'B',x,y,ra,rb01 : broken ring with outer radius ra, inner radius rb, center x,y (relative to left-top of image) and angle from φ0 to φ1 degrees(clockwise). x and y can be the character X or Y (for the image center, see "rel").
x1,y1,x2,y2,... : polygon with coordinates relative to left-top of image.

 


Examples:

click to rotate divider drag divider drag to open/close divider drag to open/close divider
?
×
How to use the sector
Open the sector by dragging one of its legs. It will open symmetrically.
For a sector a pair of dividers is needed.
Place the dividers' points on the desired places by dragging the red circles.
Rotate the dividers as a whole by clicking (or right-clicking) the joint.
Drag the dividers as a whole by grabbing the little stem sticking out of the joint.