Maskew - A JavaScript Library For Skewing The Shapes Of Elements

Maskew is a JavaScript library for skewing the shapes of elements.  It weighs in at less than 5KB, has no dependencies whatsoever and is mobile friendly.

There is also a jQuery version which you can use if you already are using jQuery as your JavaScript library.  Maskew has a very simple API and is easy to use.  Check out the demos.

Requirements: None
Demo: http://oxism.com/maskew/
License: MIT License

Lenticular.js – A jQuery Plugin For Spectacular Tilt-Controlled Images

Lenticular.js is a jQuery plugin for spectacular tilt-controlled images.  Remember those cards from the bottom of the Cracker Jack box – the ones that changed images as they were tilted? Well, lenticular.js brings that interaction to the iPhone. It can be used for fancy-pants product views or just to slather some whimsy onto a boring.jpg.

Lenticular.js has been tested on solely on the iPhone. Extended support is in the works.

Requirements: None
Demo: http://lenticular.attasi.com/
License: MIT License

Avgrund - A jQuery Plugin For Modal Boxes & Popups Using CSS Transitions

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

Tested with jQuery 1.4+, file size is under 2KB, MIT Licensed.

Requirements: jQuery
Demo: http://labs.voronianski.com/jquery.avgrund.js/
License: MIT License

Typist - A jQuery Plugin To Add Animated Typing Text To Any Block Element

Typist is a jQuery plugin that allows you to animate text as if it were being typed onto the screen.  This creates a very cool effect of someone typing the message on which the plugin is being applied.


Requirements: jQuery
Demo: http://chartulo.us/
License: MIT License

Piecon - A Tiny JavaScript Library For Dynamically Generating Pie Charts In Your Favicons

Piecon is a a tiny JavaScript library for dynamically generating pie charts in your favicons.

Browser Support

Piecon has been tested to work completely in the following browsers (older versions may be supported, but haven't been tested):

• Chrome 15+
• Firefox 9+
• Opera 11+

Currently the library falls back to title updates for the following browsers:

• Internet Explorer 9
• Safari 5

Requirements: None
Demo: http://lipka.github.com/piecon/
License: MIT License

Gridster - A jQuery Plugin That Allows Building Intuitive Draggable Layouts From Elements Spanning Multiple Columns

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.


Requirements: jQuery
Demo: http://gridster.net
License: MIT License

Flex - A Fluid Asymmetrical Animated Grid Plugin For jQuery

Flex is a fluid asymmetrical animated grid plugin for jQuery.  Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead the developer to a few plugins that were similar, but not the same. He saw one person say it was "quite impossible", thought it would be a fun challenge.


Requirements: jQuery
Demo: http://jsonenglish.com/projects/flex/
License: MIT License

jQuery.Spritely - Create Dynamic Character & Background Animation In HTML & JavaScript

jQuery.Spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript.  It's a simple, light-weight plugin with a few simple methods for creating animated sprites  and dynamic scrolling backgrounds.  You can use it on any HTML web page, and any part of the page can interact with a sprite.

Features

• It works well on iPhone/iPod Touch/iPad - check out this page on an iPhone. (Please note that there is a problem with the current version of Mobile Safari on the iPad - see the documentation page for more information.)
• It has been tested successfully on all the major browsers - even Internet Explorer 6
• It's a great alternative to Flash if your desired platform does not support it.
• It's light-weight so you can do fill the whole window with movement without draining bandwidth.
• Animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
• You should be able to make fully accessible web pages in pure html and JavaScript without any problem

Browser Support

• Internet Explorer 6 +
• Firefox
• Safari
• Chrome
• Opera

Mobile Support

• Android
• iPhone
• iPad
• iPod Touch

Requirements: jQuery
Demo: http://spritely.net/
License: MIT License or GPL

Approach - A jQuery Plugin That Allows You To Animate CSS Properties Based On Distance To An Object

Approach is a jQuery plugin that allows you to animate CSS properties based on distance to an object.  jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.  For example, you could use approach on an element's opacity, increasing the opacity as you get closer.


Requirements: jQuery
Demo: http://srobbin.com/jquery-plugins/approach/
License: MIT License or GPL

jQuery Text Highlighter - A jQuery Plugin For Highlighting Text Fragments In HTML Documents

jQuery Text Highlighter is a jQuery plugin for highlighting text fragments in HTML documents. Highlighting is done by wrapping selected text in <span> tags.

Features

• Highlighting text that spanning multiple tags.
• Removing highlights.
• Setting highlight color and custom text wrapper.
• Callbacks for highlighting and removing highlights.

Compability

This plugin has been tested to work in following browsers:

• Mozilla Firefox 3, 3.6, 4, 5, 6, 7, 12
• Internet Explorer 7, 8, 9
• Google Chrome 14, 18
• Opera 11.62
• Safari 5.1

Requirements: jQuery, Rangy
Demo: http://mir3z.github.com/jquery...demo-page.html
License: MIT License

jQuery Annotator - A Web Annotation System Which Provides The User With Tools To Annotate Text

jQuery Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page.  The Annotator project also has a simple but powerful plugin architecture. While the core annotator code does the bare minimum, it is easily extended with plugins that perform such tasks as:

• serialization: the Store plugin saves all your annotations to a REST API backend (see Storage wiki page for more and a link to a reference implementation)
• authentication and authorization: the Auth and Permissions plugins allow you to decouple the storage of your annotations from the website on which the annotation happens. In practice, this means that users could edit pages across the web, with all their annotations being saved to one server.
• prettification: the Markdown plugin renders all annotation text as Markdown
• tagging: the Tags plugin allows you to tag individual annotations

Requirements: jQuery
Demo: http://okfn.github.com/annotator/demo/
License: MIT License or GPL

Timeout-Dialog.js - A jQuery Plugin That Displays A Timeout Popover

Timeout-dialog.js is a jQuery plugin that displays a timeout popover which disappears after a certain period of time. The timeout dialog, for example, can be used whenever you want to display to the user that the logged in session is about to expire. It creates a light box with a countdown and options to stay signed in or sign out.


Requirements: jQuery
Demo: http://rigoneri.github.com/timeout-dialog.js/
License: MIT License

Percentage Loader - A Tiny jQuery Plugin For Displaying Progress In A Visual And Engaging Way

jQuery Percentage Loader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple.

It makes use of HTML5 canvas for a rich graphical appearance with only a 10KB (minified) JavaScript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes.


Requirements: jQuery
Demo: http://widgets.better2web.com/loader/
License: BSD License

PageGuide.js - An Interactive Guide For Web Page Elements Using jQuery And CSS3

PageGuide.js is an interactive visual guide to elements on web pages.  Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.  It's easy to implement and non-invasive.

PageGuide.js has built-in interaction tracking hooks.  This enables you to track usage of PageGuide.js via your preferred analytics tool.

Instructions To Setup PageGuide.js

Step 1 - Add pageguide.js

Add the following snippet of code to the bottom of your HTML document, right before your closing </body> tag.  PageGuide.js provides both the standard JS as well as a minified version.

Step 2 - Add pageguide.css

Add the following snippet of code to the header of your HTML document.  PageGuide.js provides an uncompressed CSS file as well as a minified version. Alternatively, PageGuide.js  provides a LESS CSS file as well.

Step 3 - Add setup code

Add the following block of JavaScript to your HTML document:

Step 4 - Choose the elements that you want included in the page guide.

PageGuide.js matches the first occurrence of the selector you specify in the <ul> you put on your pages in the next step.

Step 5 - Add the pageguide.js <ul> near the bottom of your pages.

That's it, you're now all set to view PageGuide.js in action on your page!

Requirements: jQuery
Demo: http://tracelytics.github.com/pageguide/
License: MIT License

jQuery.Screen - A jQuery Plugin For Managing Web Layers

jQuery.Screen is a jQuery plugin that manages page layers: what goes first, what goes next and the transition between one and other.  The goal of this plugin is to provide a way to make fluid web applications that do not require loading new pages.

Features

• Expands layers to full-screen and hides the scrollbar.
• You can jump between any two slides using a transition.
• Each layer can has its own event space, there are also global listeners for mousewheel, arrow keys and touch events.
• Nice transitions are included.
• It plays well with the iPhone (try to slide to the left).
• Nothing else, just keeping it simple.

Requirements: jQuery
Demo: http://xiam.menteslibres.org/p/jquery-screen/
License: MIT License

Timing — A jQuery Plugin For Easy-To-Use Methods To Define Timeouts And Intervals

jQuery Timing provides easy-to-use methods to define timeouts and intervals just in line with all your jQuery stuff.

It supplements the existing functionality from the jQuery effects queue (fxq) by introducing a new timed invocation chain technique (tic).

The tic-method .join([queueName]) allows a timed invocation chain to wait until all the animations and effects currently being queued in an Effect Queue finishes.

The above code allows blinking by repeated toggling of CSS class every 300 milliseconds.  The repeat method is what the jQuery Timing plugin makes available to the programmer.  Among the various other methods are:

• .join()
• .repeat()
• $.repeat()
• .then()
• $.then()
• .unrepeat()
• $.unrepeat()
• .until()
• .unwait()
• $.unwait()
• .wait()
• $.wait() 

Nearly all the functions have a chained version and a static version for you to use.

Requirements: jQuery
Demo: http://creativecouple.github.com/j...ing/basics.html
License: MIT License

Quake Slider - a jQuery Image/Content Slider Plugin

Quake Image Slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.

With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks.

Requirements: jQuery
Demo: http://www.egrappler.com/jquery...der/index.htm
License: MIT License

Tablesort.js - A Small & Simple JavaScript Library For Sorting Tables

Tablesort.js is a small and simple sorting component for tables written in JavaScript. It has no dependencies and should have no interference with other libraries.

Features:

• Sort strings
• Sort numbers
• Sort currency

Requirements: None
Demo: http://tristen.ca/tablesort/demo/
License: Free

jQuery Dice A jQuery Plugin To Display A Dice, Click On It And Retrieve A Random Number (Between 1 & 6)

jQuery Dice is a very simple plugin which allows to display a dice, click on it and retrieve a random number (between 1 and 6, of course.) You can easily modify the plugin to change the dice glyph.

Requirements: jQuery
Demo: http://efrane.github.com/jquery-dice/
License: BSD Licensed

jQuery.textntags - A jQuery UI Plugin Component To "@tag" Someone In A Text Message

jQuery.textntags is a small UI component that allows you to "@tag" someone in a text message, just like you are used to on Facebook or Twitter.

When tags are being added to the input, a marked-up version of the value is generated, to allow the tags to be extracted, parsed and stored later. 

Requirements: jQuery
Demo: http://daniel-zahariev.github.com/jquery-textntags/#examples
License: MIT License