zoltan-dulac/polyClip

Stars
179
Rank 214,039 (Top 5 %)
Language
JavaScript
Created about 13 years ago
Updated over 9 years ago

zoltan-dulac/polyClip

zoltan-dulac

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

A JavaScript library that allows cropping of images using non-rectangular shapes.

polyClip 2.1 by Zoltan Hawryluk

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 and Opera) as well as
Internet Explorer 7.0 and higher.

More info is available on these blog posts:

- Clipping JPEG Images Into Non-Rectangular Polygons Using polyClip.js
  http://www.useragentman.com/blog/?p=3526

- Cross-Browser Animated Image Masking (Even in IE) Using polyClip.js
  http://www.useragentman.com/blog/?p=5621

- Clicking Through Clipped Images Using CSS Pointer Events,
  SVG Paths and VML
  http://www.useragentman.com/blog/?p=5914
 
Released under the MIT license.

@requires jQuery http://jquery.org

For animations, it is recommended to use Silk.js if you want GPU accelerated
animations (included with the polyClip package available at:
	
https://github.com/zoltan-dulac/polyClip  

For animations that require transformations (i.e. scaling, rotations, etc),
it is necessary to use sylvester.js (also included with the polyClip package).
The most up-to-date version of sylvester is available at
http://sylvester.jcoglan.com/

css3FontConverter

A shell script that can use other command line tools to produce @font-face compatible fonts in all browsers. Works under Windows (using Cygwin), Mac OS X and Linux

html5Forms.js

Implements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.

cssSandpaper

a CSS3 Polyfill that implements CSS3 transforms, box-shadow, gradients, opacity and RGBA/HSL/HSLA colours in browser that don't support them.

imageCache

Allows the caching of images in JavaScript with callbacks when one image completely load, and when a whole array of images completely loads.

html5ImageConverter

A series of scripts that convert image files into new image formats (APNG, WEBP, JPEG-2000, JPEG-XR) with HTML code using <picture> that works in all browsers

DragDropHelpers

This library smooths out the differences between the different browser implementations of the HTML5 Drag and Drop module. It is not a polyfill

Matrix-Construction-Set

Do pixel perfect CSS3 Transforms by dragging and dropping objects on the screen

svg-vml-textpaths

SVG and VML Text Path Examples.

progressive-pushstate

Allow pushstate/popstate support using a progressive-enhancement design pattern.

text-zoom-resize

TypeHelpers

Helps developers determine if font-smoothing is enabled.

kc-munchkin

A remake of an Odyssey2 game in Javascript

accessible-html5-dialog-polyfill

enable-a11y

A list of demos to show how aria roles function with screen readers.

accessibility.js

a11y-examples

A suite of examples to show how to comply with WCAG 2.0.

config

Config.js allows developers to configure their applications in an XML block instead of hard-coding values inside their scripts. It can also be used to store HTML templates instead of hardcoding HTML into JavaScript. The XML can be embedded inside an HTML document or in a separate XML file. The configuration block may contain strings, numbers, arrays and HTML. Furthermore, variables can be inserted into these values, allowing developers to use the XML block as a simple templating system for their applications.

circular-css3-animation

Demonstrates how to animate using circular paths using only CSS

fondu

A clone of the official CVS repo at http://sourceforge.net/cvs/?group_id=39411 , since it seems like it may be inactive.

virtual-brent

atari2600-naughty-boy

A port of the arcade game Naughty Boy for the Atari 2600.