Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

effect


Gradienter: Add Gradient to Elements

Submitted by IvanLazarevic on September 11, 2010 - 7:05am

Gradienter is jQuery plugin which will color selected elements in gradient.

All you have to do is to choose elements and set first and last color in gradient.

Also, you can set CSS property on which gradient color should be applied.

jQuery Three Dee

Submitted by sohnee on July 15, 2010 - 1:13pm

The jQuery Three Dee project is a plugin that transforms plain text into eye-popping 3D text.

You'll need a pair of red/blue 3D glasses to view the 3D effect in this example.

Please let me know if you have any questions or comments as I am actively developing these plugins.

View a demonstration

Read the documentation

jQuery Sparkle - jQuery's DRY Plugin/Effect Framework

Submitted by balupton on July 12, 2010 - 5:33am

jQuery Sparkle is a simple but powerful DRY Plugin/Effect Framework aimed to simplify your jQuery development such that you no longer have to repeat yourself.

http://www.balupton.com/projects/jquery-sparkle

It already includes such extensions as:
- An EventCalendar built upon the jQuery UI DatePicker. (It also supports AJAX for loading events).
- jQuery Plugins for the Bespin and TinyMCE WYSIWYG editors.
- A SingleClick Event to easily capture a single click. Unlike the builtin click which fires for each and every click.
- String.prototype.queryStringToJSON to easily convert a QueryString into a JSON Object. Eg. "file.js?a=1" to {a:1}

Blockster transition effect

Submitted by mitya33 on June 30, 2010 - 8:16am

Blockster is a Javascript transition effect designed for 'featured content' rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.

For demos and full info, see http://mitya.co.uk/scripts/Blockster-transition-effect-122

It requires that you have a holder DIV to house your slides, also DIVs. All should be given fixed widths (even the slides - don't give these width & height 100%).

The rotation is started by calling

blockster(params)

...where params is an object of property/value pairings from the following:

Shadow animation

Submitted by edwinm on June 20, 2010 - 5:08pm

With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius.

Example:
$('#box1').animate({shadow: '0 0 30px #44f'});

The plugin works in the current versions for Firefox, Safari and Chrome. It is expected to work in Internet Explorer 9 when it is released.

Due to a bug in Opera, it doesn't work in this browser.

Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. The plugin supports only one shadow.

Color animation

Submitted by edwinm on June 20, 2010 - 5:04pm

What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties:

* color
* backgroundColor
* borderColor
* borderBottomColor
* borderLeftColor
* borderRightColor
* borderTopColor
* outlineColor

This plugin is based on Color Animations by John Resig. Unfortunately, it has a major bug which makes it unreliable. It also doesn't support the borderColor-property.

hoverFade

Submitted by danwellman on June 4, 2010 - 3:16pm

hoverFade 1.0.2

hoverFade has been updated with additional configuration options. All config options are now as follows:

  • newClass: "hover-anims", //class to add to element
  • classToRemove: "hover-css", //class to remove from element
  • onClass: "on", //class to ignore hovers on
  • trigger: "a", //element that triggers anims
  • faderTemplate: "", //element to add for anims
  • animSpeed: "normal", //speed of animations
  • exclude: "", //selector for elements to not animate
  • ignoreSiblings: "", //selector to ignore sibling elements
  • retainHoverOn: "" //class name to keep anims on when hovered

See the updated post here for more information (now with examples).

Magic Scroller

Submitted by edmret on May 24, 2010 - 5:37pm

Magic Scroll

"Scroll your elements with nice effects, easy to implement"

create a vertical scroll, it can to expose the elemetns for stores, iframes, or imáges; As precondition all the elements have to be of equal size, and the mask need to be proportionally to the elements per row, and the displayed rows.

documentation and samples: http://www.edmundoretama.com/magicscroller

jQuery Panel Magic

Submitted by crh3675 on March 31, 2010 - 12:42pm

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

IMPORTANT NOTE: Due to the level of CSS 3 support for the transform property alongside with the browser rendering capabilities, applying a global tiled image to all ".panel" elements is not recommended. Apply tiled images to the <body> tag for best performance.

Updates are applied frequently in the repository.
http://code.google.com/p/jquery-panel-magic/source/browse/#svn/trunk

Please see the demo site source XHTML for how to implement (sorry, no grand documentation just yet).

It is a first release so please be patient while documentation and examples are added/updated.

jMagnify

Submitted by Senamion on March 23, 2010 - 3:35pm

jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.

See the blog page and plugin page