Web design Sri lanka

20 New Frameworks for Web and Mobile App Developers

Web development is about getting stuff done, not figuring out <em>how</em> to get it done. <strong>Frameworks and libraries help you, the web developer, focus on creating rather than figuring stuff out.</strong>
 Rather than reinventing the wheel, you can use a framework or library 
to delegate brunt, non-creative and repetitive work, freeing up your 
time and energy to create the actual website or application.<br />

This article highlights 20 New Frameworks and Libraries that will help speed up and make your web development more effective. <br />

<h2>
<a href="http://www.dhtmlx.com/touch/">DHTMLX Touch – HTML5 JavaScript Framework for Mobile</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/04_dhtmlx-touch.jpg" /><br />

DHTMLX Tuch is an HTML5 JavaScript framework for mobile and touch 
devices. This HTML5-based JavaScript library lets you build 
cross-platform web applications for mobile and touch-screen devices.<br />
<a class="button-med" href="http://www.dhtmlx.com/touch/">DHTMLX Touch</a><a class="button-med" href="http://www.dhtmlx.com/touch/samples/">Demo</a><a class="button-med" href="http://docs.dhtmlx.com/touch/">Docs</a><a class="button-med" href="http://www.dhtmlx.com/touch/designer/">Visual Designer</a><br />

<h4>
DHTMLX Touch Visual Designer</h4>
<a href="http://www.dhtmlx.com/touch/designer/">DHTMLX Touch Visual Designer</a>
 is an easy and intuitive way to build web interfaces for your mobile 
apps. All you have to do is drag-and-drop the needed components into the
 Visual Designer and then set up their properties. Here is an overview 
video:<br />

<h2>
<a href="http://behat.org/">Behat – BDD Framework for PHP</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/06_behat.jpg" /><br />

Behat is a BDD framework for PHP which has been inspired by Ruby’s <a href="http://cukes.info/">Cucumber</a> project.<br />
Unlike any other php testing framework that tests applications inside 
out. Behat is testing applications outside in. It means, that Behat 
works only with your application’s input/output.<br />
<a class="button-med" href="http://behat.org/">Behat</a><a class="button-med" href="http://docs.behat.org/en/quick_intro.html">Demo</a><a class="button-med" href="http://docs.behat.org/">Docs</a><br />

<h2>
<a href="http://www.intelligentexpert.net/">iX Framework – JavaScript-Based UI Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/01_ix-framework.jpg" /><br />

The iX Framework is a JavaScript-based UI and framework that allows 
you to bridge the gap between a web app and desktop application. It 
features many components: Grid, Chart, Tree, Window, Panel, Field, 
Validation, Combo, and more.<br />
<a class="button-med" href="http://www.intelligentexpert.net/">iX Framework</a><a class="button-med" href="http://www.intelligentexpert.net/indexdemo.html">Demo</a><a class="button-med" href="http://www.intelligentexpert.net/tutorial.php">Docs</a><br />

<h2>
<a href="http://initializr.com/">Initializr – HTML5 Templates Generator</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/07_initializr.jpg" /><br />

Initializr, based on the <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>
 template, is an HTML5 templates generator that helps you get started 
with your HTML5 project. It does that by generating a clean customizable
 template with just what your project needs.<br />
<a class="button-med" href="http://initializr.com/">Initializr</a><br />

<h2>
<a href="http://puf.dev7studios.com/">PUF: PHP Utility Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/08_puf.jpg" /><br />

PUF is a PHP utility framework (that’s what PUF stands for). It’s a 
comprehensive collection of useful and popular PHP utility functions 
created to save time for developers that regularly use those functions 
when building web applications.<br />
<a class="button-med" href="http://puf.dev7studios.com/">PUF: PHP Utility Framework</a><a class="button-med" href="http://puf.dev7studios.com/docs">Docs</a><br />

<h2>
<a href="http://www.sproutcore.com/">SproutCore – HTML5 Application Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/09_sproutcore.jpg" /><br />

SproutCore is an HTML5 application framework which lets you simply 
create desktop-level applications for modern web browsers. SproutCore 
applications are full-fledged programs, written in JavaScript. That 
JavaScript executes in your user’s browser, freeing up your servers (and
 server engineers) to focus on what’s most important in a cloud 
application: delivering users’ data as quickly and reliably as possible.<br />
<a class="button-med" href="http://www.sproutcore.com/">SproutCore</a><a class="button-med" href="http://www.sproutcore.com/demos/">Demo</a><a class="button-med" href="http://www.sproutcore.com/documentation/">Docs</a><br />

<h2>
<a href="http://www.limejs.com/">LimeJS – Game Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/05_limejs.jpg" /><br />

LimeJS is a game framework that combines lots of different HTML5 
technologies and allows you to build games for mobile and touch-screen 
devices, but can also be used within modern browsers as applications. 
Games built with LimeJS are fast and have the feel of a 
native-experience rather than being “browser games”. Anyone familiar 
with native IOS or Flash frameworks will feel very comfortable working 
with LimeJS.<br />
<a class="button-med" href="http://www.limejs.com/">LimeJS</a><a class="button-med" href="http://www.limejs.com/static/roundball/index.html">Demo</a><a class="button-med" href="http://www.limejs.com/static/zlizer/index.html">Demo 2</a><a class="button-med" href="http://limejs.digitalfruit.ee/docs/">Docs</a><br />

<h4>
LimeJS Supported Devices</h4>
<h2>
<a href="http://www.mobl-lang.org/">Mobl – Open-Source HTML5-Based Language</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/10_mobl.jpg" /><br />

Mobl is an open-source HTML5-based language designed to speed up your
 building of mobile web applications. It has fantastic (Eclipse) IDE 
support (such as as-you-type error reporting, code completion and 
reference resolving) and has a rapid save and test cycle – No more 
lengthy compilations, the mobl IDE compiles your modules whenever you 
save, ready to be tested in the mobile browser.<br />
<a class="button-med" href="http://www.mobl-lang.org/">Mobl</a><a class="button-med" href="http://www.mobl-lang.org/demo/">Demo</a><a class="button-med" href="http://www.mobl-lang.org/documentation/">Docs</a><br />

<h4>
Mobl Preview Video</h4>
<h2>
<a href="http://amplifyjs.com/">Amplify</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/11_amplify.jpg" /><br />

Amplify is a set of components designed to solve common web 
application problems with a simplistic API. It simplifies all forms of 
data handling by providing a unified API for various data sources. 
Amplify’s store component handles persistent client-side storage, using 
standards like localStorage and sessionStorage, but falling back on 
non-standard implementations for older browsers.<br />
<a class="button-med" href="http://amplifyjs.com/">Amplify</a><a class="button-med" href="http://amplifyjs.com/api/request/">Docs</a><br />

<h2>
<a href="http://jeromeetienne.github.com/jquery-mobile-960/">960 Grid on jQuery-Mobile</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/12_960-grid.jpg" /><br />

960 Grid on jQuery-Mobile is a port of 960 Grid to jQuery mobile. It 
combines the flexibility of 960.gs with the ease of jQuery mobile, with 
the purpose of making jQuery mobile more flexible and easier to use on 
mobile and touch-screen devices.<br />
<a class="button-med" href="http://jeromeetienne.github.com/jquery-mobile-960/demoFluid.html">Demo</a><a href="http://jeromeetienne.github.com/jquery-mobile-960/demoFixed.html">Demo 2</a><a class="button-med" href="https://github.com/jeromeetienne/jquery-mobile-960">Docs</a><br />

<h2>
<a href="http://guryjs.org/">Gury – HTML5 Canvas Utility Library</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/13_gury.jpg" /><br />

Gury is a JavaScript library designed to help in the creation of 
HTML5 and Canvas applications. You can create a canvas tag, resize and 
style it, add renderable objects, animate those objects, and place it 
anywhere on the page in a single chained expression.<br />
<a class="button-med" href="http://guryjs.org/">Gury</a><a class="button-med" href="http://guryjs.org/">Demo</a><a class="button-med" href="https://github.com/rsandor/gury/wiki/API">Docs</a><br />

<h2>
<a href="http://www.anup.info/2010/09/05/introducing-moomodel/">MooModel – Javascript Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/15_moomodel.jpg" /><br />

MooModel is a JavaScript framework that simplifies the use of objects and classes in JavaScript. It’s built on top of <a href="http://mootools.net/">MooTools</a> and comes with an elegant syntax as well as built-in support for object-oriented features.<br />
<a class="button-med" href="http://www.anup.info/2010/09/05/introducing-moomodel/">MooModel</a><a class="button-med" href="http://www.anup.info/2010/09/05/introducing-moomodel/">Docs</a><br />

<h2>
<a href="http://galleria.aino.se/">Galleria – JavaScript Image Gallery Framework</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/16_galleria.jpg" /><br />

Galleria is a JavaScript image gallery framework, built upon jQuery, 
that simplifies the process of creating professional image galleries for
 websites and web/mobile apps. The framework has a large number of 
options such as transition effects, cropping methods and interaction 
details that you can use to customize your gallery. In addition to the 
generic options, each Galleria theme has some theme-specific options.<br />
<a class="button-med" href="http://galleria.aino.se/">Galleria</a><a class="button-med" href="http://galleria.aino.se/download/">Demo</a><a class="button-med" href="http://galleria.aino.se/docs/">Docs</a><br />

<h2>
<a href="http://zeptojs.com/">Zepto.js (beta) – Minimalist JavaScript Framework for Mobile</a></h2>
<img src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/17_zeptojs.jpg" /><br />

Zepto.js is a minimalist JavaScript framework for mobile WebKit 
browsers, with a jQuery-compatible chaining syntax. It will handle the 
most basic drudge and repetitive work so you can focus on getting the 
real stuff done.<br />
<a class="button-med" href="http://zeptojs.com/">Zepto.js</a><a class="button-med" href="http://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/">Demo</a><a class="button-med" href="http://github.com/madrobby/zepto">Docs</a><br />

<h2>
<a href="http://www.notjustagrid.com/default.asp">Not Just A Grid – Flexible and Modular CSS Framework</a></h2>
<img alt="Not Just A Grid" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_01.jpg" /><br />

Not Just a Grid is a flexible and modular CSS framework that is 
designed to assist in the rapid prototyping and development of websites.
 It has been designed for the future with larger screen sizes and the 
use of CSS3 for progressive enhancement and richer user experiences.<br />
Not Just a Grid includes separate stylesheets covering multi-column 
layouts, typography, forms, tables and user experience enhancement. Also
 included is a range of common images that are used for both visual 
styling and user interface enhancement. These images can easily be 
changed to suit your needs.<br />
<a class="button-med" href="http://www.notjustagrid.com/default.asp">Not Just A Grid</a><a class="button-med" href="http://www.notjustagrid.com/demo.asp">Demo</a><a class="button-med" href="http://www.notjustagrid.com/documentation.asp">Docs</a><br />

<h2>
<a href="http://www.jformer.com/">jQuery Form Framework – jFormer</a></h2>
<img alt="jQuery Form Framework - jFormer" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_02.jpg" /><br />

jFormer is a form framework written on top of jQuery that allows you 
to quickly generate beautiful, standards compliant forms. Leveraging the
 latest techniques in web design, jFormer helps you create web forms 
that: Validate client-side, Validate server-side and Process without 
changing pages (using AJAX).<br />
<a class="button-med" href="http://www.jformer.com/">jQuery Form Framework – jFormer</a><a class="button-med" href="http://www.jformer.com/demos/">Demo</a><a class="button-med" href="http://www.jformer.com/documentation/">Docs</a><br />

<h2>
<a href="http://treesaverjs.com/">Treesaver.js – Framework for Creating Magazine-Style Layouts</a></h2>
<img alt="Treesaver.js - Framework for Creating Magazine-Style Layouts" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_03.jpg" /><br />

Treesaver is a JavaScript framework for creating magazine-style 
layouts that dynamically adapt to a wide variety of browsers and 
devices. With this framework designers use standards-compliant HTML and 
CSS for both content and design with no JavaScript programming is 
required.<br />
<a class="button-med" href="http://treesaverjs.com/">Treesaver.js – Framework for Creating Magazine-Style Layouts</a><a class="button-med" href="http://treesaverjs.com/#demos">Demo</a><a class="button-med" href="http://treesaverjs.com/#documentation__support">Docs</a><br />

<h2>
<a href="http://the-m-project.net/">The-M-Project – HTML5 Javascript Framework</a></h2>
<a href="http://the-m-project.net/"><img alt="The-M-Project - HTML5 Javascript Framework" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_04.jpg" /></a><br />
<a href="http://the-m-project.net/">
</a><a class="button-med" href="http://the-m-project.net/">The-M-Project – HTML5 Javascript Framework</a><a class="button-med" href="http://the-m-project.net/documentation.html">The-M-Project</a><br />

<h2>
<a href="http://comato.se/flurid/">Flurid – The Fluid CSS Grid</a></h2>
<img alt="Flurid - The Fluid CSS Grid" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_05.jpg" /><br />

Flurid is a fluid width grid system optimized for flexibility 
(fluidity) and is the only fluid grid systems to work in Internet 
Explorer versions 6 and 7 (and 5, with the exception of the push/pull 
classes) without hiding pixels in margins.<br />
It comes with a companion jQuery plugin to help make developing with the
 framework easier. Along with some additional features like equal height
 columns, the jQuery plugin can also automatically append alternating 
"odd" and "even" classes to rows and columns and apply the "last" class 
where needed to fix things for Internet Explorer 7 and below without the
 need to include these things directly in the HTML.<br />
<a class="button-med" href="http://comato.se/flurid/">Flurid – The Fluid CSS Grid</a><br />

<h2>
<a href="http://wijmo.com/">Wijmo – jQuery UI Widgets</a></h2>
<img alt="Wijmo - jQuery UI Widgets" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/03/newframe_06.jpg" /><br />

Wijmo, a mixture of JavaScript, CSS3, SVG, and HTML5, is a complete 
kit of over 30 UI Widgets. It is an extension to jQuery UI with every 
widget built to its standards and framework. Each widget is 
ThemeRoller-ready.<br />
<a class="button-med" href="http://wijmo.com/">Wijmo – jQuery UI Widgets</a><a class="button-med" href="http://wijmo.com/wiki/index.php/Main_Page">Docs</a><a class="button-med" href="http://wijmo.com/demos/">Demo</a>

20 New Frameworks for Web and Mobile App Developers

Web development is about getting stuff done, not figuring out how to get it done. Frameworks and libraries help you, the web developer, foc...

9 Mobile Framework to Kick Start Your Mobile Development Career

<h2>
Introduction</h2>
Mobile development has been growing since the day Apple introduced 
iPhone. Mobile browser has never been so robust. It supports HTML5, CSS3
 even with CSS animation. After that, Google introduced Android to join 
existing <a href="http://www.bluewhaleapps.com/" target="_blank">iPhone app developers</a> in ushering in the mobile platform era. That leave a significant mark to the milestone of mobile development.<br />

In the mobile industry, it has quite a few of frameworks available 
aiming to create a mobile web app rapidly. To help you start up your 
mobile development, I have done some research on all mobile frameworks, 
and below is the list. I have used jQTouch before, it's pretty easy to 
implement but definitely has a lot of room of improvement.<br />

<ul class="list">
<li>
<a href="http://zeptojs.com/">Zepto.js</a> <img alt="" src="http://www.queness.com/resources/images/mframework/1.jpg" /><span>Zepto.js
 is a minimalist JavaScript framework for mobile WebKit browsers, with a
 jQuery-compatible syntax. The goal: a 2-5k library that handles most 
basic drudge work with a nice API so you can concentrate on getting 
stuff done. Zepto.js is currently in early beta, and you can help to 
make it awesome by contributing code, documentation and demos. </span>
</li>
<li>
<a href="http://www.dhtmlx.com/touch/">DynamicX</a> <img alt="" src="http://www.queness.com/resources/images/mframework/2.jpg" /><span>DHTMLX
 Touch is an HTML5-based JavaScript library for building mobile web 
applications. It‚Äôs not just a set of UI widgets, but a complete 
framework that allows you to create eye-catching, cross-platform web 
applications for mobile and touch-screen devices. </span>
</li>
<li>
<a href="http://www.sencha.com/">Sencha</a> <img alt="" src="http://www.queness.com/resources/images/mframework/3.jpg" /><span>Sencha
 Touch, the first HTML5 mobile JavaScript framework that allows you to 
develop mobile web apps that look and feel native on iPhone and Android 
touchscreen devices, has just hit the big 1.0. And best of all, it‚Äôs 
completely free to use.</span>
</li>
<li>
<a href="http://jquerymobile.com/">jQuery Mobile</a> <img alt="" src="http://www.queness.com/resources/images/mframework/4.jpg" /><span>A
 unified user interface system across all popular mobile device 
platforms, built on the rock-solid jQuery and jQuery UI foundation. Its 
lightweight code is built with progressive enhancement, and has a 
flexible, easily themeable design.</span>
</li>
<li>
<a href="http://jqtouch.com/">jQTouch</a> <img alt="" src="http://www.queness.com/resources/images/mframework/5.jpg" /><span>A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.</span>
</li>
<li>
<a href="http://www.winktoolkit.org/">Wink ToolKit</a> <img alt="" src="http://www.queness.com/resources/images/mframework/6.jpg" /><span>Wink toolkit is a mobile JavaScript framework for building webapps on iPhone, iPad and Android</span>
</li>
<li>
<a href="http://code.google.com/p/iui/wiki/Introduction">iUI</a> <img alt="" src="http://www.queness.com/resources/images/mframework/7.jpg" /><span>iUI
 is a framework consisting of a JavaScript library, CSS, and images for 
developing advanced mobile webapps for iPhone and comparable/compatible 
devices. </span></li>
<li><span> </span>
</li>
<li>
<a href="http://snippetspace.com/">iWebkit</a> <img alt="" src="http://www.queness.com/resources/images/mframework/8.jpg" /><span>iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.</span>
</li>
<li>
<a href="http://webapp-net.com/">WebAPP.net</a> <img alt="" src="http://www.queness.com/resources/images/mframework/9.jpg" /><span>WebApp.Net
 is a light weight, powerful javascript framework taking advantage of 
AJAX technology. It provides a full set of ready to use components to 
help you develop, quickly and easily, advanced mobile web applications. </span></li>
<li><span> </span></li>
<li><span>Courtesy:  http://www.queness.com/post/6706/9-mobile-framework-to-kick-start-your-mobile-development-career</span>
</li>
</ul>

9 Mobile Framework to Kick Start Your Mobile Development Career

Introduction Mobile development has been growing since the day Apple introduced iPhone. Mobile browser has never been so robust. It suppo...

85+ Cool jQuery Effects Roundup

<span style="font-weight: normal;">jQuery effects are used more or 
less all over the Internet today. Just a few years ago Flash was 
dominating the scene for interactive and dynamic websites. The arrival 
of JavaScript libraries like jQuery have made it a lot easier to do 
advanced stuff with JavaScript, but of course the fact that Apple didn’t
 let Flash into their iPhones and iPads may also have pushed the 
development in this direction. Further the mobile movement have also 
helped speed up the adoption of HTML5 and as an example <a href="http://www.tripwiremagazine.com/2012/03/html5-canvas-animation.htm" target="_blank">Canvas Animation</a>
 is opening up for a lot of possibilities when it comes to developing 
dynamic effects in a standard way.  There are even countless examples of
 <a href="http://www.tripwiremagazine.com/2011/11/html5-games.html" target="_blank">HTML5 games</a> available online showing us the capabilities of these rather new technologies. </span><br />

Enough about HTML5 here. You should check out some <a href="http://www.tripwiremagazine.com/2010/07/30-very-useful-html5-tutorials-techniques-and-examples-for-web-developers.html" target="_blank">HTML5 tutorials</a>
 if you have still haven’t jumped the HTML5-wagon. Here in this article 
we will focus on jQuery effects in various categories. Many of these 
jQuery effects plugins, tutorials etc. are very useful and should be 
simple to use. If I missed any cool resources then please let me know in
 a comment! Also please let us know what side you are on…Flash?… 
HTML5+CSS3+JavaScript?…<br />
<br />
<br />
<h2>
<span style="font-weight: normal;">Animation Effects</span></h2>
<h3>
<a href="http://webdev.stephband.info/parallax.html" target="_blank">An amazing animated parallax effect using CSS and jQuery</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/parallax-effect.jpg"><img alt="parallax-effect" border="0" height="194" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/parallax-effect_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="parallax-effect" width="552" /></a><br />

jParallax turns a selected element into a ‘window’, or viewport, and 
all its children into absolutely positioned layers that can be seen 
through the viewport. These layers move in response to the mouse, and, 
depending on their dimensions (and options for layer initialisation), 
they move by different amounts, in a parallaxy kind of way.<br />

<h3>
<a href="http://4coder.info/en/code/jquery-plugins/smart3d/#demo" target="_blank">jQuery.Smart3D</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jquery-smart-3d.jpg"><img alt="jquery-smart-3d" border="0" height="135" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jquery-smart-3d_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="jquery-smart-3d" width="552" /></a><br />

This is an effect which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect.<br />

<h3>
<a href="http://www.devirtuoso.com/2009/09/3d-sphere-using-jquery/" target="_blank">3D Sphere</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/3d-sphere.jpg"><img alt="3d-sphere" border="0" height="460" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/3d-sphere_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="3d-sphere" width="552" /></a><br />

In this effect the elements move in a way that they look as if it were one rotating sphere.<br />

<h3>
<a href="http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/" target="_blank">3D Tag Cloud</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/3d-tag-cloud.jpg"><img alt="3d-tag-cloud" border="0" height="373" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/3d-tag-cloud_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="3d-tag-cloud" width="552" /></a><br />

This works like a carousel but the elements fades into the distance 
at the end. It also interacts with the mouse. The greater the distance 
of the mouse from the center the faster it rotates.<br />

<h3>
<a href="http://codecanyon.net/item/easy-scroll/673660?ref=lvraa" target="_blank">Easy Scroll</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/easy-scroll.jpg"><img alt="easy-scroll" border="0" height="321" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/easy-scroll_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="easy-scroll" width="552" /></a><br />

This easy scroll application was made to simplify your work and save 
you time in developing any kind of web template or application, it can 
be easily inserted in any context and has a wide range of parameters 
that can make your scrolling unique.<br />

<h3>
<a href="http://keith-wood.name/imageCube.html" target="_blank">Image Cube</a></h3>
<a href="http://keith-wood.name/imageCube.html" target="_blank"><img alt="Image Cube" border="0" height="282" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image277.png" style="border-width: 0px;" title="Image Cube" width="550" /></a><br />

The image cube functionality can easily be added to a division with 
appropriate default settings. It then displays the images contained 
within the targetted division in a cycle every two seconds. A random 
rotation is chosen each time to move to the next image. Highlights and 
shadows are used to enhance the 3D effect.<br />

<h3>
<a href="http://www.spritely.net/" target="_blank">Spritely</a></h3>
<a href="http://www.spritely.net/" target="_blank"><img alt="Spritely" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image284.png" style="border-width: 0px;" title="Spritely" width="546" /></a><br />

jQuery spritely is a jQuery plugin created by Artlogic 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 <em>sprites</em> such as the birds you see on this 
page, and dynamic scrolling backgrounds. You can use it on any html web 
page, and any part of the page can interact with a sprite (click 
anywhere on this page and wait and you’ll see what we mean).<br />

<h3>
<a href="http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/" target="_blank">Animated Curtain</a></h3>
<a href="http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/" target="_blank"><img alt="Animated Curtain" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image285.png" style="border-width: 0px;" title="Animated Curtain" width="531" /></a><br />

With this effect you can animate a curtain to open to show a text or image the moment the rope is clicked.<br />

<h3>
<a href="http://codecanyon.net/item/jquery-animated-content-changer/832389?ref=lvraa" target="_blank">jQuery Animated Content Changer</a></h3>
<h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jquery-animated-content-changer.jpg"><img alt="jquery-animated-content-changer" border="0" height="199" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jquery-animated-content-changer_thumb.jpg" style="background-image: none; border: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="jquery-animated-content-changer" width="552" /></a></h3>
jQuery Animated Content Changer is a jQuery plugin that allows you to
 easily manage dynamic html content. With only very simple html, you can
 add nice features to your website’s content. The way the change is 
animation is pretty cool.<br />

<h3>
<a href="http://buildinternet.com/2009/08/crafting-an-animated-postcard-with-jquery/" target="_blank">jQuery Animated Postcard</a></h3>
<a href="http://buildinternet.com/2009/08/crafting-an-animated-postcard-with-jquery/" target="_blank"><img alt="jQuery Animated Postcard" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image286.png" style="border-width: 0px;" title="jQuery Animated Postcard" width="531" /></a><br />

Try this wonderful effect to animate the postcard inspired designs 
you have. With this effect, the clouds and the lifesaving float moves at
 the same time.<br />

<h3>
<a href="http://pushingpixels.at/experiments/dynamic_shadow/" target="_blank">Dynamic PNG shadow position & opacity with jQuery</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/dynamic-png-shadow-position.jpg"><img alt="dynamic-png-shadow-position" border="0" height="342" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/dynamic-png-shadow-position_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dynamic-png-shadow-position" width="552" /></a><br />

In this animation, you can drag objects and place them anywhere you 
want. It also features a switch that can be turned on to amaze your 
visitors.<br />

<h3>
<a href="http://razorjack.net/quicksand/" target="_blank">Quicksand</a></h3>
<a href="http://razorjack.net/quicksand/" target="_blank"><img alt="Quicksand" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image288.png" style="border-width: 0px;" title="Quicksand" width="531" /></a><br />

It’s a nice way of reordering and filtering things with a nice 
shuffling animation. With this, you can make a beautiful library to make
 your work organized.<br />

<h3>
<a href="http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/" target="_blank">Puffing Smoke Effect in jQuery</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/smoke-effect.jpg"><img alt="smoke-effect" border="0" height="400" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/smoke-effect_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="smoke-effect" width="552" /></a><br />

This effect can be customized so that the chimney can puff a smoke of
 whatever shape you want. The one above puffs Super Mario Images. This 
is perfect to be used in headers.<br />

<h3>
<a href="http://www.ajaxblender.com/jani.html" target="_blank">jAni jQuery Plugin Animation</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jani-jquery-animation.jpg"><img alt="jani-jquery-animation" border="0" height="238" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jani-jquery-animation_thumb.jpg" style="background-image: none; border: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="jani-jquery-animation" width="552" /></a><br />

jAni is a simple plugin for jQuery which allows you animate 
background images. The plugin is basically an alternative to the 
animated GIF but with several benefits. At first, it’s always better to 
use an animated GIF as this format is supported by all browsers without 
any JavaScript code or additional markup, but the “dark side” of it is 
that an animated GIF allows only 256 colors and you cannot control 
animation in any way.<br />

<h3>
<a href="http://www.jquery.wisdomplug.com/jquery-plugins/jquery-animation-effects-plugins-jquery-plugins/simulate-gravity-with-jquery/" target="_blank">Gravitational Simulation in jQuery</a></h3>
<a href="http://www.jquery.wisdomplug.com/jquery-plugins/jquery-animation-effects-plugins-jquery-plugins/simulate-gravity-with-jquery/" target="_blank"><img alt="Gravitational Simulation in jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image291.png" style="border-width: 0px;" title="Gravitational Simulation in jQuery" width="551" /></a><br />

Drop the blocks by touching the red strings with your mouse. This is what this effect can do.<br />

<h3>
<a href="http://www.jcoverflip.com/demo" target="_blank">JCoverflip</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jcoverflip.jpg"><img alt="jcoverflip" border="0" height="272" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jcoverflip_thumb.jpg" style="background-image: none; border: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="jcoverflip" width="552" /></a><br />

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.<br />

<h3>
<a href="http://buildinternet.com/2009/02/how-to-make-an-impressive-animated-landscape-header-with-jquery/" target="_blank">Animated Landscape Header with jQuery</a></h3>
<a href="http://buildinternet.com/2009/02/how-to-make-an-impressive-animated-landscape-header-with-jquery/" target="_blank"><img alt="Animated Landscape Header with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image293.png" style="border-width: 0px;" title="Animated Landscape Header with jQuery" width="552" /></a><br />

This effect has a cartoon themed landscape with elements which slide out to reveal additional content.<br />

<h3>
<a href="http://plugins.jquery.com/project/jquery-parallax-style" target="_blank">jQuery Parallax</a></h3>
<a href="http://plugins.jquery.com/project/jquery-parallax-style" target="_blank"><img alt="jQuery Parallax" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image294.png" style="border-width: 0px;" title="jQuery Parallax" width="545" /></a><br />

This is a parallax style implementation of user interactions. When 
the mouse moves over the document (or a specific element) the actions 
can be translated to modify any CSS property of an element for example 
an image position, to give a parallax style effect.<br />

<h3>
<a href="http://codecanyon.net/item/jeffects/107884?ref=lvraa" target="_blank">Rezoner’s jEffects</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jeffects.jpg"><img alt="jeffects" border="0" height="382" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/jeffects_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="jeffects" width="552" /></a><br />

This effect enhances user interaction by providing decorative 
effects. It’s all packaged into an intuitive jQuery plugin. Thus, you 
can sprinkle cool effects on your screen once your mouse is moved.<br />

<h3>
<a href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/" target="_blank">Rotating Billboard with jQuery</a></h3>
<a href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/" target="_blank"><img alt="Rotating Billboard with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image571.png" style="border-width: 0px;" title="Rotating Billboard with jQuery" width="550" /></a><br />

Use CSS and jQuery to create the effect of a rotating billboard with 
two ads. Through this you can make one set of image slices disappear 
while another one (the other ad) appear giving the look of rotating 
slices, just like in a rotating billboard system.<br />

<h3>
<a href="http://keith-wood.name/flightBoard.html" target="_blank">jQuery Flight Board</a></h3>
<a href="http://keith-wood.name/flightBoard.html" target="_blank"><img alt="jQuery Flight Board" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image296.png" style="border-width: 0px;" title="jQuery Flight Board" width="552" /></a><br />

A jQuery plugin that sets a division to flip between text messages 
like a flight board at an airport. The flight board functionality can 
easily be added to a division with appropriate default settings. It then
 displays the messages in a cycle after two seconds. Highlights and 
shadows are used to enhance the 3D effect.<br />

<h3>
<a href="http://css-tricks.com/jquery-robot/" target="_blank">Animated Cartoon Robot with jQuery</a></h3>
<a href="http://css-tricks.com/jquery-robot/" target="_blank"><img alt="Animated Cartoon Robot with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image297.png" style="border-width: 0px;" title="Animated Cartoon Robot with jQuery" width="550" /></a><br />

You can use this effect to amuse your visitors or create this out of 
fun. It’s an animated way of to inspire someone to look beyond the 
perceived constraints of web designers and developers.<br />

<h3>
<a href="http://css-tricks.com/examples/Circulate/" target="_blank">Circulate</a></h3>
<a href="http://css-tricks.com/examples/Circulate/" target="_blank"><img alt="Circulate" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image283.png" style="border-width: 0px;" title="" width="550" /></a><br />

This is a very amusing plugin. Once you open it, the object will 
revolve around the page and if you click the buttons, it will jump in a 
circular motion and bounce back into position.<br />

<h3>
<a href="http://blogs.sitepoint.com/javascript-sprite-animation-using-jquery/" target="_blank">JavaScript Sprite Animation Using jQuery</a></h3>
<a href="http://blogs.sitepoint.com/javascript-sprite-animation-using-jquery/" target="_blank"><img alt="sprite-animation" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image299.png" style="border-width: 0px;" title="sprite-animation" width="550" /></a><br />

With this effect you can add amusement to your pages by having your 
visitors flip the pages of this animated Javascript using jQuery.<br />

Flip is a jQuery plugin that will flip easily your elements in four directions.<br />

<h3>
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank">Custom Animation Banner with jQuery</a></h3>
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank"><img alt="Custom Animation Banner with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image298.png" style="border-width: 0px;" title="Custom Animation Banner with jQuery" width="550" /></a><br />

Creating a custom animation banner with jQuery. With this animation 
setup, you can have different elements in a banner that will animate in a
 nifty fashion.<br />

<h3>
<a href="http://www.zachstronaut.com/projects/rotate3di/#demos" target="_blank">Flip HTML content in 3D</a></h3>
<a href="http://www.zachstronaut.com/projects/rotate3di/#demos" target="_blank"><img alt="Flip HTML content in 3D" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image282.png" style="border-width: 0px;" title="Flip HTML content in 3D" width="551" /></a><br />

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an 
isometric 3D flip or 3D rotation of any HTML content. It also enables 
custom 3D rotation animations. CSS3 Transforms are used to create this 
visual “3D” isometric effect.<br />

<h2>
<a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="transition"></a><span style="font-weight: normal;">Transition Effects</span></h2>
<h3>
<a href="http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery" target="_blank">Create a Stunning Sliding Door Effect with jQuery</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/sliding-door-effect.jpg"><img alt="sliding-door-effect" border="0" height="288" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/sliding-door-effect_thumb.jpg" style="background-image: none; border: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="sliding-door-effect" width="422" /></a><br />

Cool hover effect for a portfolio page.<br />

<h3>
<a href="http://workshop.rs/projects/jqfancytransitions/" target="_blank">jqFancyTransitions</a></h3>
<a href="http://workshop.rs/projects/jqfancytransitions/" target="_blank"><img alt="jqFancyTransitions" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image301.png" style="border-width: 0px;" title="jqFancyTransitions" width="550" /></a>
 jqFancyTransitions is easy-to-usejQuery plugin for displaying your 
photos as slideshow with fancy transition effects. jqFancyTransitions is
 compatible and fully tested with Safari 2+, Internet Explorer 6+, 
Firefox 2+, Google Chrome 3+, Opera 9+.<br />

<h3>
<a href="http://www.hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank">Jquery Fade InFade Out</a></h3>
<a href="http://www.hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank"><img alt="Jquery Fade InFade Out" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image302.png" style="border-width: 0px;" title="Jquery Fade InFade Out" width="550" /></a><br />

This jQuery effect fades in and fades out anything whether it is an image, text or even a link in a nice and smooth fashion.<br />

<h3>
<a href="http://thirdroute.com/projects/captify/" target="_blank">jQuery Captify</a></h3>
<a href="http://thirdroute.com/projects/captify/" target="_blank"><img alt="image" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image312.png" style="border-width: 0px;" width="550" /></a><br />

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover.<br />

<h3>
<a href="http://codecanyon.net/item/kenburner-slider-jquery-plugin/1249801?ref=themespotters" target="_blank">KEN BURNER</a></h3>
<img alt="KEN BURNER" border="0" height="329" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/02/image557.png" title="KEN BURNER" width="604" /><br />

Kenburner is the premium way of using a slider in your website. A 
combination of Ken Burns Effect, state-of-the-art Slider and Text 
Animations defines this slider.<br />

Customize this slider with just a little HTML and CSS to your very 
needs. Give each slider some captions to transport your message. Use 
your Ken Burns Animated banner elements with the possibility of playing 
YouTube and Vimeo clips in a special detail view with describing text.<br />

<h3>
<a href="http://www.incg.nl/blog/2008/hover-block-jquery/" target="_blank">Animate a hover with jQuery</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/animate-hover.jpg"><img alt="animate-hover" border="0" height="363" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/animate-hover_thumb.jpg" style="background-image: none; border: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="animate-hover" width="552" /></a>½<br />

Animate an image while hovering it and show the visitors information 
while doing that. Sounds simple huh? Well it is, but the effect is nice 
and can be nice for a portfolio.<br />

<h3>
<a href="http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/" target="_blank">jSquares</a></h3>
<a href="http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/" target="_blank"><img alt="jSquares" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image314.png" style="border-width: 0px;" title="jSquares" width="549" /></a><br />

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.<br />

<h3>
<a href="http://css-tricks.com/revealing-photo-slider/" target="_blank">Revealing Photo Slider</a></h3>
<a href="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/revealing-photo-slider.jpg"><img alt="revealing-photo-slider" border="0" height="288" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/03/revealing-photo-slider_thumb.jpg" style="background-image: none; border: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="revealing-photo-slider" width="552" /></a><br />

How to create a thumbnail photo gallery, where clicking a button 
would reveal the entire photo and more information about that photo. The
 animation used look quite good.<br />

<h3>
<a href="http://elliottkember.com/sexy_curls.html" target="_blank">The Sexy Curls jQuery Plugin</a></h3>
<a href="http://elliottkember.com/sexy_curls.html" target="_blank"><img alt="The Sexy Curls jQuery Plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image304.png" style="border-width: 0px;" title="The Sexy Curls jQuery Plugin" width="552" /></a><br />

Sexy Curls jQuery plugin is an open source solution which lets you 
share in the beauty of the page fold feature with ease. It uses the 
jQuery UI and its resizable package.<br />

<h3>
<a href="http://builtbywill.com/code/booklet/" target="_blank">jQuery Booklet</a></h3>
<a href="http://builtbywill.com/code/booklet/" target="_blank"><img alt="jQuery Booklet" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image305.png" style="border-width: 0px;" title="jQuery Booklet" width="549" /></a><br />

Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It is built using the jQuery library.<br />

<h3>
<a href="http://srobbin.com/blog/jquery-pageslide/" target="_blank">jQuery pageSlide</a></h3>
<a href="http://srobbin.com/blog/jquery-pageslide/" target="_blank"><img alt="jQuery pageSlide" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image306.png" style="border-width: 0px;" title="jQuery pageSlide" width="549" /></a><br />

This plugin allows any developer to recreate a similar interaction on
 their own website using a few simple lines of Javascript. By attaching 
the method to an anchor tag, pageSlide wraps the original body content 
into a wrapper and creates an additional block for the secondary content
 load. The slide is animated whenever the click event is invoked.<br />

<h3>
<a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/" target="_blank">Sponsor Flip Wall With jQuery & CSS</a></h3>
<a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/" target="_blank"><img alt="Sponsor Flip Wall With jQuery & CSS" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image313.png" style="border-width: 0px;" title="Sponsor Flip Wall With jQuery & CSS" width="551" /></a><br />

Amaze your readers by adding this nice effect which flips an object to reveal the content on its underside.<br />

<h3>
<a href="http://css-tricks.com/grid-accordion-with-jquery/" target="_blank">Grid Accordion with jQuery</a></h3>
<a href="http://css-tricks.com/grid-accordion-with-jquery/" target="_blank"><img alt="Grid Accordion with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image315.png" style="border-width: 0px;" title="Grid Accordion with jQuery" width="548" /></a><br />

The Grid Accordion works with the same theory as most other 
accordions. Only one cell is open at a time. The big thing is that the 
column of the current open cell expands to a reasonable reading width.<br />

<h3>
<a href="http://jquery.offput.ca/highlightFade/old.php" target="_blank">HighlightFade</a></h3>
<a href="http://jquery.offput.ca/highlightFade/old.php" target="_blank"><img alt="HighlightFade" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image309.png" style="border-width: 0px;" title="HighlightFade" width="549" /></a><br />

This effect highlights and then fades a text or an image with a click
 of the mouse. It can be made to display a highlighting box of different
 colors.<br />

<h3>
<a href="http://css-tricks.com/dynamic-page-replacing-content/" target="_blank">Dynamic Page / Replacing Content</a></h3>
<a href="http://css-tricks.com/dynamic-page-replacing-content/" target="_blank"><img alt="Dynamic Page / Replacing Content" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image310.png" style="border-width: 0px;" title="Dynamic Page / Replacing Content" width="549" /></a><br />

The feature of this Dynamic page/replacing content is that it 
replaces the content of the page if the navigation button is clicked 
instead of opening another window.<br />

<h3>
<a href="http://www.malsup.com/jquery/cycle/browser.html" target="_blank">jQuery Cycle Plugin-Effects Browser</a></h3>
<a href="http://www.malsup.com/jquery/cycle/browser.html" target="_blank"><img alt="jQuery Cycle Plugin-Effects Browser" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image311.png" style="border-width: 0px;" title="jQuery Cycle Plugin-Effects Browser" width="551" /></a><br />

The jQuery Cycle Plugin is a slideshow plugin that supports many 
different types of transition effects. It supports pause-on-hover, 
auto-stop, auto-fit, before/after callbacks, click triggers and much 
more. It also supports, but does not require, the Metadata Plugin and 
the Easing Plugin.<br />

<h2>
<a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="image"></a><span style="font-weight: normal;">Image Editing and Adjustment jQuery Effects</span></h2>
<h3>
<a href="http://codecanyon.net/item/saloon-the-jquery-banner-rotator-plugin/1629896?ref=themespotters" target="_blank">SALOON</a></h3>
Saloon is a jQuery Banner Rotator which animates your image and text 
slides with transition effects of the wide library. Easy installation, 
great transitions and text animations define the freshline style. See 
the heaps of custom transitions/animations for each object on the page! 
Customize this slider with just a little HTML and CSS to your very 
needs. Give each slider a description and more elements to transport 
your message.<br />

The touch style drag and rool feature if pretty cool.<br />

<h5>
<img alt="Saloon jQuery Image Slider Plugin" border="0" height="256" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/02/image553.png" title="Saloon jQuery Image Slider Plugin" width="550" /></h5>
<h3>
<a href="http://deepliquid.com/content/Jcrop.html" target="_blank">jCrop</a></h3>
<a href="http://deepliquid.com/content/Jcrop.html" target="_blank"><img alt="jCrop" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image318.png" style="border-width: 0px;" title="jCrop" width="548" /></a><br />

Jcrop is the quick and easy way to add image cropping functionality 
to your web application. It combines the ease-of-use of a typical jQuery
 plugin with a powerful cross-platform DHTML cropping engine that is 
faithful to familiar desktop graphics applications.<br />

Lazy loader is a jQuery plugin written in JavaScript. It delays 
loading of images in (long) web pages. Images outside of viewport 
(visible part of web page) wont be loaded before user scrolls to them. 
Using lazy load on long web pages containing many large images makes the
 page load faster.<br />

<h3>
<a href="http://www.buildinternet.com/project/supersized/" target="_blank">SUPERSIZED</a></h3>
<a href="http://www.buildinternet.com/project/supersized/"><img alt="Supersized" border="0" height="363" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2010/10/image.png" title="Supersized" width="602" /></a><br />

Awesome full size/screen jQuery image slider plugin. It resizes the 
images to fill browser while maintaining image dimension ratio. Further 
it cycles Images/backgrounds via slideshow with transitions and 
preloading<br />

<h3>
<a href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en" target="_blank">jQuery Virtual Tour</a></h3>
<a href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en" target="_blank"><img alt="jQuery Virtual Tour" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image319.png" style="border-width: 0px;" title="jQuery Virtual Tour" width="550" /></a><br />

This is an extension to the simple panorama viewer that allows you to
 play a little bit more with jQuery by adding interactivity to transform
 some panoramic views into a virtual tour.<br />

<h3>
<a href="http://codecanyon.net/item/layerslider-the-parallax-effect-slider/922100?ref=themespotters" target="_blank">LAYERSLIDER</a> cool jQuery effect!</h3>
<img alt="LAYERSLIDER " border="0" height="289" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2012/02/image555.png" title="LAYERSLIDER " width="550" /><br />

This is a jQuery content slider using the famous parallax-effect! You
 can create as many layers and sublayers as you want. You can use images
 or any other HTML elements, including Flash movies as layers. The 
script is very user-friendly, you can add global settings or local (per 
slide) settings to each layer or sublayer. You can change delay times, 
easing types, durations and much more.<br />

<h3>
<a href="http://www.malsup.com/jquery/corner/" target="_blank">jQuery Corner Demo</a></h3>
<a href="http://www.malsup.com/jquery/corner/" target="_blank"><img alt="jQuery Corner Demo" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image320.png" style="border-width: 0px;" title="jQuery Corner Demo" width="551" /></a><br />

This corner plugin is pulling off its magic by adding more elements 
to the page. Specifically, it adds div “strips” to the item to be 
cornered and sets a solid background color on these strips in order to 
hide the actual corners of the real item. So if you step back and look 
at the cornered element, think of there being solid colored divs hiding 
the true squared off corners of the item you wish to be changed.<br />

<h3>
<a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/" target="_blank">Apple-like retina effect</a></h3>
<a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/" target="_blank"><img alt="Apple-like retina effect" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image321.png" style="border-width: 0px;" title="Apple-like retina effect" width="550" /></a><br />

Try this wonderful effect to make the text and images clearer by 
seeing it up close as if they’re just in the retina of your eyes.<br />

<h3>
<a href="http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/" target="_blank">Image Highlighting and Preview with jQuery</a></h3>
<a href="http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/" target="_blank"><img alt="Image Highlighting and Preview with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image322.png" style="border-width: 0px;" title="Image Highlighting and Preview with jQuery" width="551" /></a><br />

This effect works by highlighting and previewing images that are 
integrated in an article or spread over a page. This is a nice way to 
allow users to view a bigger version of an image that is relevant to 
some context. It highlights images on a delayed hover and offer a 
preview mode which will enlarge and center the bigger version of the 
image on the screen.<br />

Flip is a jQuery plugin that will flip easily your elements in four directions.<br />

<h3>
<a href="http://imanish.co.in/demo/imjqmosaic/" target="_blank">ImjQMosaic</a></h3>
<a href="http://imanish.co.in/demo/imjqmosaic/" target="_blank"><img alt="ImjQMosaic" border="0" height="234" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image324.png" style="border-width: 0px;" title="ImjQMosaic" width="549" /></a><br />

imJQMosaic is a simple jQuery plugin that creates mosaic pattern 
using an image. Apart of just creating the mosaic pattern on an image, 
it also facilitates the user to put menus on top of the mosaic tile(s). 
Hence, it can be beautifully used as navigation menu. It can also serve 
as a substitute to the popular Flash based navigations on the home pages
 of a website or application which unfortunately don’t work on mobile 
phones not supporting Flash content.<br />

<h3>
<a href="http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/" target="_blank">Photo Zoom Out Effect</a></h3>
<a href="http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/" target="_blank"><img alt="Photo Zoom Out Effect" border="0" height="290" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image325.png" style="border-width: 0px;" title="Photo Zoom Out Effect" width="550" /></a><br />

This effect enables you to create a simple image zoom out effect with
 jQuery. Thus you can show some images which are zoomed in initially and
 when hovering over an image it gets zoomed out. This effect could be 
used in photography websites or image galleries.<br />

<h3>
<a href="http://www.mind-projects.it/projects/jqzoom/demos.php#demo2" target="_blank">jQZoom</a></h3>
<a href="http://www.mind-projects.it/projects/jqzoom/demos.php#demo2" target="_blank"><img alt="jQZoom" border="0" height="290" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image326.png" style="border-width: 0px;" title="jQZoom" width="549" /></a><br />

Make a nice jQuery zoom like the one in the above screenshot. This effect offers different ways of zooming in and out.<br />

<h3>
<a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm" target="_blank">Cloud Zoom</a></h3>
<a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm" target="_blank"><img alt="Cloud Zoom" border="0" height="276" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image327.png" style="border-width: 0px;" title="Cloud Zoom" width="550" /></a><br />

Cloud Zoom is a free jQuery image zoom plugin, a comparable 
alternative to products such as Magic Zoom. Compared to the popular 
jQZoom plugin, Cloud Zoom is smaller, has more features and more robust 
compatability across browsers.<br />

<h3>
<a href="http://code.ovidiu.ch/dragdealer/" target="_blank">DRAGDEALER</a></h3>
<a href="http://code.ovidiu.ch/dragdealer/"><img alt="Dragdealer" border="0" height="307" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2010/10/image26.png" title="Dragdealer" width="602" /></a><br />

Dragdealer is much more than a simple image slider. It offers a wide 
variety of features related to dragging, but is also quite powerful for 
creating different types if image sliders. I recommend you go to the 
website and try out the demos.<br />

<h3>
<a href="http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/" target="_blank">Crop Example</a></h3>
<a href="http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/" target="_blank"><img alt="Crop Example" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image328.png" style="border-width: 0px;" title="Crop Example" width="550" /></a><br />

The crop plugin takes an IMG element and crops them to the dimensions
 given. The result is a DIV with a background image with the height and 
width and an offset. The new DIV should also carry across the existing 
style attributes of the image.<br />

<h3>
<a href="http://www.zurb.com/playground/javascript-annotation-plugin" target="_blank">ZURB Annotation plugin</a></h3>
<a href="http://www.zurb.com/playground/javascript-annotation-plugin" target="_blank"><img alt="ZURB Annotation plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image345.png" style="border-width: 0px;" title="ZURB Annotation plugin" width="552" /></a><br />

Use ZURB’s Javascript plugin to easily add and save annotations.<br />

<h3>
<a href="http://janne.aukia.com/zoomooz/" target="_blank">jQuery Zoomooz</a></h3>
<a href="http://janne.aukia.com/zoomooz/" target="_blank"><img alt="jQuery Zoomooz" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image346.png" style="border-width: 0px;" title="jQuery Zoomooz" width="549" /></a><br />

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.<br />

<h3>
<a href="http://css-tricks.com/anythingzoomer-jquery-plugin/" target="_blank">AnythingZoomer</a></h3>
<a href="http://css-tricks.com/anythingzoomer-jquery-plugin/" target="_blank"><img alt="AnythingZoomer" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image329.png" style="border-width: 0px;" title="AnythingZoomer" width="549" /></a><br />

This jQuery plugin zooms a small area when you put your mouse over it. It’s very flexible and it’s easy to customize in CSS.<br />

<h3>
<a href="http://odyniec.net/projects/imgareaselect/" target="_blank">imgAreaSelect</a></h3>
<a href="http://odyniec.net/projects/imgareaselect/" target="_blank"><img alt="imgAreaSelect" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image330.png" style="border-width: 0px;" title="imgAreaSelect" width="549" /></a>
 imgAreaSelect is a jQuery plugin for selecting a rectangular area of an
 image. It allows web developers to easily implement image cropping 
functionality, as well as other user interface features, such as photo 
notes.<br />

<h3>
<a href="http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/" target="_blank">Micro Gallery</a></h3>
<a href="http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/" target="_blank"><img alt="Micro Gallery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image331.png" style="border-width: 0px;" title="Micro Gallery" width="550" /></a><br />

This jQuery plugin transforms a set of images into a tiny gallery 
with several options. The Micro Image Gallery allows to switch between a
 grid view which shows a preview of the images as thumbnails and a 
single view showing one image only. The navigation bar can be hidden and
 sliding out when hovering over the gallery, or visible.<br />

<h3>
<a href="http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/" target="_blank">Interactive Picture</a></h3>
<a href="http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/" target="_blank"><img alt="Interactive Picture" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image332.png" style="border-width: 0px;" title="Interactive Picture" width="552" /></a><br />

This interactive picture – aka an image that contains tooltips and 
popup boxes can be useful for showing off a particular aspect of a photo
 (ie items or people).<br />

<h3>
<a href="http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery" target="_blank">Rounded Images</a></h3>
<a href="http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery" target="_blank"><img alt="Rounded Images" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image333.png" style="border-width: 0px;" title="Rounded Images" width="549" /></a><br />

You can give your pictures nice rounded corners to enhance the look of your page.<br />

<h3>
<a href="https://github.com/can3p/iviewer/wiki/" target="_blank">JQuery.iviewer</a></h3>
<a href="https://github.com/can3p/iviewer/wiki/" target="_blank"><img alt="JQuery.iviewer" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image334.png" style="border-width: 0px;" title="JQuery.iviewer" width="551" /></a>
 JQuery.iviewer is a jquery plugin used to load and view image in 
container with ability to zoom image and to drag it with mouse in 
container.<br />

<h2>
<a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="other"></a><span style="font-weight: normal;">Other jQuery Effects and Resources</span></h2>
<h3>
<a href="http://www.edesignerz.net/html/2550-outside-the-box-navigation-with-jquery" target="_blank">Outside the Box Navigation with jQuery</a></h3>
<a href="http://www.edesignerz.net/html/2550-outside-the-box-navigation-with-jquery" target="_blank"><img alt="Outside the Box Navigation with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image1401.png" style="border-width: 0px;" title="Outside the Box Navigation with jQuery" width="552" /></a><br />

This effect is a nice recreation of the Mac desk, which is something that many people really like.<br />

<h3>
<a href="http://www.lemonsanver.com/jQuery/easingAnimationPlugin.html" target="_blank">JQuery animation easing plugin example</a></h3>
<a href="http://www.lemonsanver.com/jQuery/easingAnimationPlugin.html" target="_blank"><img alt="JQuery animation easing plugin example" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image335.png" style="border-width: 0px;" title="JQuery animation easing plugin example" width="550" /></a><br />

This jQuery tool is designed as an aid in making nice animations.<br />

<h3>
<a href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/" target="_blank">Greyscale Hover Effect w/ CSS & jQuery</a></h3>
<a href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/" target="_blank"><img alt="Greyscale Hover Effect w/ CSS & jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image336.png" style="border-width: 0px;" title="Greyscale Hover Effect w/ CSS & jQuery" width="549" /></a><br />

As the name suggests this produces an effect of changes the image into greyscale when you put your on it.<br />

<h3>
<a href="http://eyecon.ro/colorpicker/" target="_blank">Color Picker – jQuery plugin</a></h3>
<a href="http://eyecon.ro/colorpicker/" target="_blank"><img alt="Color Picker - jQuery plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image337.png" style="border-width: 0px;" title="Color Picker - jQuery plugin" width="549" /></a><br />

This plugin can help you select color in the same way you select color in Adobe Photoshop.<br />

<h3>
<a href="http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture" target="_blank">jQuery Touchwipe</a></h3>
<a href="http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture" target="_blank"><img alt="jQuery Touchwipe" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image338.png" style="border-width: 0px;" title="jQuery Touchwipe" width="552" /></a><br />

jQuery Touchwipe’s small 1 KB library allows you to obtain the wipe 
event on an iPhone, iPad or iPod Touch which can be used to scroll 
through an image gallery. It also works with Android touchscreens.<br />

<h3>
<a href="http://addyosmani.com/blog/jquery-animation-tutorialized/" target="_blank">Array of jQuery Animations- Tutorialized</a></h3>
<a href="http://addyosmani.com/blog/jquery-animation-tutorialized/" target="_blank"><img alt="Array of jQuery Animations- Tutorialized" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image339.png" style="border-width: 0px;" title="Array of jQuery Animations- Tutorialized" width="548" /></a><br />

This tutorial will teach you how to make amazing jQuery animation 
using just a few line of code for each effect. With this you can create a
 progress-bar in less than 3 lines.<br />

<h3>
<a href="http://fmarcia.info/jquery/tetris/tetris.html" target="_blank">Tetris with jQuery</a></h3>
<a href="http://fmarcia.info/jquery/tetris/tetris.html" target="_blank"><img alt="Tetris with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image340.png" style="border-width: 0px;" title="Tetris with jQuery" width="548" /></a><br />

Have fun with cool Tetris on your screen with this jQuery effect.<br />

<h3>
<a href="http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/" target="_blank">Music player using jQuery</a></h3>
<a href="http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/" target="_blank"><img alt="Music player using jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image341.png" style="border-width: 0px;" title="Music player using jQuery" width="550" /></a><br />

Create an amazing music player coded in xHTML & jQuery that made 
use of mouse gestures and hotkeys. You can Click & Drag with mouse 
to interact with interface’s music player or use directional keys & 
spacebar instead of mouse.<br />

<h3>
<a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" target="_blank">jQuery Before/After Plugin</a></h3>
<a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" target="_blank"><img alt="jQuery Before/After Plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image342.png" style="border-width: 0px;" title="jQuery Before/After Plugin" width="553" /></a><br />

This works like a sliding door in our homes. When you drag the navigation button, you expose the background of the image.<br />

<h3>
<a href="http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/" target="_blank">jQuery CSS Clip Animation Plugin</a></h3>
<a href="http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/" target="_blank"><img alt="jQuery CSS Clip Animation Plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image343.png" style="border-width: 0px;" title="jQuery CSS Clip Animation Plugin" width="547" /></a><br />

This is a nice way to scale an image by clicking the FULL, HALF and GONE buttons to see the animation in action.<br />

<h3>
<a href="http://www.protofunc.com/scripts/jquery/backgroundPosition/" target="_blank">jQuery Background-Position Animation</a></h3>
<a href="http://www.protofunc.com/scripts/jquery/backgroundPosition/" target="_blank"><img alt="jQuery Background-Position Animation" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image344.png" style="border-width: 0px;" title="jQuery Background-Position Animation" width="552" /></a><br />

This effect enhances the ability to make background-position 
animation. The object can shoot up and move back into position when a 
click is done.<br />

<h3>
<a href="http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html" target="_blank">Colourful rating system using CSS3 and jQuery</a></h3>
<a href="http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html" target="_blank"><img alt="Colourful rating system using CSS3 and jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image347.png" style="border-width: 0px;" title="Colourful rating system using CSS3 and jQuery" width="547" /></a><br />

Rating system is a very boring part of web browsing experience. That 
is why a colorful rating system is there to make rating activity more 
appealing. Take this to improve the rating system mechanism that you 
have in your site.<br />

<h3>
<a href="http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/" target="_blank">Dynamic FAQ Section w/ jQuery</a></h3>
<a href="http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/" target="_blank"><img alt="Dynamic FAQ Section w/ jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image348.png" style="border-width: 0px;" title="" width="552" /></a><br />

With the help of jQuery & YQL, this effect can pull the contents 
of a shared spreadsheet in your Google Docs account, and use the data to
 populate the FAQ section with questions and answers. The best aspect of
 this solution, is that you can change the contents of the FAQ section 
from within Google Docs – just edit the spreadsheet. You can even 
leverage the rest of Google Docs’ features, such as collaborative 
editing. This way, a small team can support the FAQ section without the 
need of a dedicated CMS solution.<br />

<h3>
<a href="http://tympanus.net/codrops/2010/07/20/latest-tweets-tooltip/" target="_blank">Latest Tweets Tooltip with jQuery</a></h3>
<a href="http://tympanus.net/codrops/2010/07/20/latest-tweets-tooltip/" target="_blank"><img alt="Latest Tweets Tooltip with jQuery" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image349.png" style="border-width: 0px;" title="Latest Tweets Tooltip with jQuery" width="551" /></a><br />

If you have a news website, it might be interesting for you to allow 
your users to see the latest tweets about a topic. This is what this hot
 jQuery plugin does. It shows the latest tweets about a certain word or 
phrase. Words or phrases that you want to be searched for in Twitter, 
are wrapped with the following span. The popup box that appears can be 
dragged and resized. Clicking on the cross will make it disappear. The 
tweets are constantly being loaded in a predefined time span. This 
loading stops when the user hovers over the tooltip box.<br />

<h3>
<a href="http://jacobdubail.com/journal/jquery/crazy-dots-jquery-plugin" target="_blank">Crazy Dots – jQuery Plugin</a></h3>
<a href="http://jacobdubail.com/journal/jquery/crazy-dots-jquery-plugin" target="_blank"><img alt="Crazy Dots – jQuery Plugin" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image350.png" style="border-width: 0px;" title="Crazy Dots – jQuery Plugin" width="549" /></a>C<br />

razyDots is a jQuery Plugin that creates a loading spinner via CSS. 
Best appearance is with CSS3 capable browser, but can be made to work in
 older browsers, too.<br />

<h3>
<a href="http://blarnee.com/wp/jquery-ui-animation-effects/" target="_blank">jQuery UI Animation Effects</a></h3>
<a href="http://blarnee.com/wp/jquery-ui-animation-effects/" target="_blank"><img alt="jQuery UI Animation Effects" border="0" height="322" src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/03/image351.png" style="border-width: 0px;" title="jQuery UI Animation Effects" width="551" /></a><br />

The jQuery UI Effects brings us different animation techniques that we can use to in meet the need of our design projects.<br />
<br />
courtesy :http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/ <br />
Courtesy: http://www.tripwiremagazine.com/2012/03/jquery-effects.html <br />
</div>

85+ Cool jQuery Effects Roundup

jQuery effects are used more or less all over the Internet today. Just a few years ago Flash was dominating the scene for in...