polyClip.js

Allows cross-browser, non-rectangular cropping and masking of images. Can also be used in animationed image masking. Works in all modern browsers (Firefox, Chrome, Safari, IE9+ and Opera) as well as older Internet Explorer (7.0 and higher).

• Simple example of an image clipped into an irregular polygon.
• An animation of a clipping area clipped using transforms with CSS3 syntax (e.g. skew(), rotate(), etc.)
• Animating of the clipping area by changing the clipping co-ordinates directly.
• Interactive example that changes the clipping area according to where the user is hovering the mouse (desktop), touching the screen (iOS and maybe others) or clicking the screen (every other device)
• A simple idea for a two-image photo gallery.