Add Motion To Website: jQuery Animation Plugins From 2010

In our niche it’s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily – using some advanced code snippets, plugins or hacks.

jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazing combinations achieving effects you have never seen before!

You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities – ready?!!!

1. AJAX-ZOOM – Image Zoom – Pan Gallery plugin

AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website.

Download Now | View Examples

2. Image Rotator

Simply rotates an image by a certain degree or allows the user to rotate an image by dragging around a central axis.

Download Now | View Example

3. Cloud Zoom

The Cloud Zoom plugin is comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Download Now | View Example

4. jQuery Before/After Plugin

Download Now | View Example

5. jQDock

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Download Now | View Example

6. Visual Lightbox – Create fantastic lightbox-style galleries and slideshows. jQuery LightBox Plugin.

Download Now | View Examples

7. Image Bubbles

Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images.

Download Now | View Example

8. jQuery Panel Magic

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.

Download Now | View Example

9. iCheckbox

Convert a checkbox or multiple checkboxes into iphone style switches.

Download Now | View Example

10. jqFancyTransitions

jqFancyTransitions is plugin for displaying your photos as slideshow with fancy transition effects.

Download Now | View Example

11. Images In All Size jQuery Plugin

Download Now | View Example

12. Text Effects

Download Now | View Examples

13. jCoverflip

jCoverflip is a jQuery cover flow widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone.

Download Now | View Example

14. BxSlider

bxSlider is a jQuery content slider plugin that is light weight and easy to use.

Download Now | View Example

15. jScratchcard plugin

Download Now | View Example

16. jQuery Menu Style 1 – Drop Down Menu with Visual Effects

View Examples

17. Frame Animation Plugin for jQuery

Download Now | View Example

18. Cusor Hover Buttons

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site.

Download Now | View Example

19. jQuery carrousel

The core allows to create your own controls or effects. This plugin transform an “ul li” into an animated carrousel.

Download Now | View Example

20. 2D Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement.

Download Now | View Example

21. jPhotoGrid

This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

Download Now | View Example

22. jMagnify

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

Download Now | View Examples

23. animaDrag: Animating Drag and Drop Plugin

Download Now | View Example

24. jOla

Download Now | View Example

25. Flight Board

This plugin sets a division to flip between text messages like a flight board at an airport. It alternates between two or more messages by flipping individual characters.

Download Now | View Example

26. 3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.

Download Now | View Example

27. 3D Feature Image Carousel

This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.

Download Now | View Example

28. Smooth Anchors jQuery Plugin

This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

Download Now | View Example

29. HoverAttribute

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering.

Download Now | View Example

30. Expanding Grid

Creates grid system out of divs. On hover the active grid expands to ratio set by the config, fades out the background.

Download Now | View Example

read more...

15 Stunning Jquery Animation Techniques

Now a day most of the animations are done in jquery. If you like to create an illusion of movement in website design then you need this innovative uses of Jquery Animation Techniques.Animation techniques include 3d header,image animation,slider animation, menu etc..

3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flashimplementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript. Easy to use as an unobtrusive plugin with lots of options.

Demo | Download

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

Demo | Download

Visual jQuery LightBox Features

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

Demo | Download

!Sideswap Content Rotator

Features:

* Automatically (optional) adds navigation between images/content
* HTML of the previous and next tags can be passed as parameters to the plugin
* Automatically (optional) transitions between images/content
* Duration of image/content display and transition speed can be passed as parameters to the plugin
* Called on an element containing elements that will be rotated i.e. $(‘.containing_element).sideswap();

Demo | Download

2d Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement. It is fully cross-browser compatible. Special care has been taken to make IE support translate() and transform-origin. The properties can also be animated using the jQuery animation library.

$('.example').transform({rotate: 45});
$('.example').animate({rotate: '+=45deg'});

Download

Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth “Web 2.0 style” animation. Three distinguishing features of this script are:

1. Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
2. Ability to “group” multiple collapsible content instances to act as a single unit, so opening one closes the others.

Demo

BlogSlideShow

BlogSlideShow is a JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

All what you need is to provide links on your images, you want to show. Likely you already have images on blog pages linked. Just add rel attribute containing “blogslideshow” to them.

Demo | Download

3. bxSlider | jQuery Content Slider

bxSlider is a content slider / image rotation plugin written in jQuery. Features include:

* – Slide, fade, and ticker modes
* – Fully adjustable speed and pause values
* – Manually or auto transitions

Demo

busyBox

busyBox is intended to display the HTML box(es) to be updated by an AJAX request as ‘busy’ while performing such request.

This plugin differs from others in the way it just put a transparent ‘layer’ over the involved boxes (this using a jQuery selector) instead of putting it over the entire body, in this way the user will specifically know which sections of the page are being updated.

Demo

Before/After

I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it.

Demo | Download

Background-Position Animations

Adds the ability to do background-position animations to jQuery 1.2, and newer.

$(‘#background’).animate({backgroundPosition: ‘150px 250px’});

Demo | Download

AutoSprites – Menu Sprites Animated and Generated Automatically

This jQuery plugin automatically generates animated sprites from a minimal amount of CSS. It makes building menus faster and easier while making them look cooler at the same time!

Demo | Download

Pause or Resume Animation (animate)

jQuery’s animation method doesn’t have a pause/resume. This plug-in provides 3 more methods to give a pause and resume effect to jQuery’s animate method.

Demo | Download

Mousey Dialog

mouseyDialog attempts to solve the dialog issue while keeping things simple. It’s just a dialog positioned by the mouse. Clicking the close button or outside the dialog will close it (if you’re using the click event). mouseyDialog knows where the edge of the window is and will reposition itself if it’s outside of it.

Demo | Download

$ Smart3D plugin

Interesting effects, which can be used on site-header.

Demo

read more...

Submit a form without refreshing the page with Jquery and PHP

Lately, I’ve been chancing on quite a number of posts at various places asking about how to perform a web action without the webpage reloading/refreshing? For example, dynamically updating a list on a page without a reload or submitting a form to PHP without leaving the webpage the form sits on.

I guess this is as good a time to start branching into some posts on PHP and Javascript, or more specifically, jQuery.

To be honest, I’ve never been partial to using Javascript (ie client-side programming) in my web applications, prefering instead to rely on server-side processing for all my programming needs. I guess this has to do with my frustrations of Javascript incompatibility between different browsers back in the day. However, with a javascript library (or framework) like jQuery, I’m starting to use more client-side actions to complement all the server-side PHP stuff. Here’s 6 reasons why you should use JavaScript Libraries & Frameworks.

You can download my example source code if it helps you understand how the whole thing works.

Download:

And here’s a demo of what we’re trying to do.

The traditional way of doing form submissions
Back in the “old” days, in order to perform a form submission, you need to do something like this.

When you click the “Submit” button on form.php, the web server knows to send the name and email values using the POST method to the php script called process.php. The web server will loadprocess.php page and the PHP script will start to read in the form values posted from form.php, maybe perform some validation to check that the information received is correct, then perhaps do something with the form values such as storing it in a database or sending it via email and output a “thank you” message.

What if something goes wrong, for example, the person submitting the form wrote in a badly-formed email address, the validation at process.php will throw a nicely worded error message and stop running the rest of the script. The person then would need to go back to the form to correct the email address and he would submit the form again.

This might have been an OK way of doing things 10 years ago, but in this era of Facebook and Twitter, that’s a pretty antiquated and tedious method.

The jQuery way of doing form submissions
Here’s the jQuery way, which is made possible by something called AJAX (which stands forAsynchronous JavaScript and XML). AJAX is bascially the technology that makes it possible to exchange data with a server, and update parts of a web page – without reloading the whole page. jQuery includes the necessary functions to implement AJAX into your web application.

The diagram looks quite similar to the “old” way of doing things, except that process.php is now represented by a ‘circle’. This is because process.php is now hidden for lack of a better word. In the traditional method, when you click the submit, your browser will load process.php and it will jump from form.php to process.php.

With the jQuery/AJAX way, process.php becomes a background process which the web server will call on, and when you click on the “Submit” button, form.php pushes the data to process.php, but your browser will remain showing form.php. Once the process.php has done what it needs to, it will return to form.php some output to be displayed.

Here’s the source code for form.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
	<title>JQuery Form Example</title> 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#myform").validate({
			debug: false,
			rules: {
				name: "required",
				email: {
					required: true,
					email: true
				}
			},
			messages: {
				name: "Please let us know who you are.",
				email: "A valid email will help us get in touch with you.",
			},
			submitHandler: function(form) {
				// do other stuff for a valid form
				$.post('process.php', $("#myform").serialize(), function(data) {
					$('#results').html(data);
				});
			}
		});
	});
	</script>
	<style>
	label.error { width: 250px; display: inline; color: red;}
	</style>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
	<br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
	<br>
<!-- The Submit button -->
	<input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

and the source code for process.php

<?php
	print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

Here’s what’s happening


I included jQuery’s form validation because it provides a more real world example. Usually, most sites will perform processes like form validation at the client-side before the form is submitted. It’s just more intuitive and a much better user experience. In fact if you can offload as much workload as you can to the browser, it will greatly reduce the hit on your server.

So here’s a quick high-level walk through what’s happening on the jQuery part.

I call the validate method (make sure you have included the jquery validate plugin – see form.php Line 6) on my form #myform, and proceed to define what to validate. In this case, we’re checking that the name field is ‘required’, and we’re checking the email field is not only ‘required’, but must be an email format. I also define the custom error message I want to display if the validation fails.

Lastly, the submitHandler is what gets processed if the validation is successful. In this case, I’m doing an ajax post method, sending my form data to process.php, and get back any results as HTML data which will be displayed into #results.

Over at process.php, I’m simply printing out the data received to show you the information was sent and returned.

That’s basically it. If you want to know more, do check out the jQuery website to get more details on how to do AJAX and Validation.

Feel free to comment your thoughts or suggestions.

read more...

10 Important jquery and ajax file upload plug-in

According to Wikipedia :

File Uploading, is the sending of data from a local system to a remote system,such as a server, or peer, with the intent that the remote system should save a copy of whatever is being transferred.

Today we listed 10 Incredibly Useful Collection of file upload plug-in for jQuery etc. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.

1. uploadify - A file upload plugin for jQuery

   

   Uploadify is a jQuery plug-in that allows the easy integration of a multiple (or single) file uploads on your website. To use Uploadify on your web server It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that evencoding novices can do it.  Uploadify is free to used in a number of applications and commercial products and  it released under the GPL and MIT licenses.

2. FancyUpload

   

   FancyUpload is powerful and elegant Ajax uploader . FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

3. jqUploader

   

   jqUploader is a jquery plugin that substitutes html file input fields with a flash-basedfile upload widget, allowing to display a progress bar and percentage. so you don't have to do things twice . it is easily Customize directly from the html code of your form . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

4. Multiple File Upload - JQuery

   

   The Multiple File Upload Plug-in is a non-obstrusive plug-in for the jQuery JavaScript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.

5. Mootool based Multiple file uploader

   

   The MooTools based Multiple file uploader  is a light weighted  powerful and elegant uploader. (it weighs in at just 2.5K). some simple CSS, an example HTML file and a readme (which is basically identical to the extended comments at the top of the source code).

6. AjaxFileUpload

   

   This Ajax File Upload Plug-in is a hacked version of Ajaxupload plug-in created by yvind Saltvik, which is really good enough for normal use. Its idea is to create a iframe and submit the specified form to it for further processing. It simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

7. Create An Ajax Style File Upload

   

   With this trick I will show you how to create Ajax like version of the file upload. The trick is very simple, I will use an Iframe to upload the file so the whole page does not get refreshed and when the post is in progress it will show a dummy progress.

8. Multiple File Uploads Using AJAX

   

   With traditional methods of file uploading, your visitors have to stare at the form they just submitted - or a blank page, while the data uploads. With this AJAX file uploadscript, your visitors do not have to wonder if the page is working or not.
   They will know as the progress bars update themselves as the file uploads. There can potentially be an unlimited number of uploads - the only real limit is the visitor's upload speed. Maximum file size for this demo is around 500KB. The only maximum size is limited only by connection and maximum script running length.
   The upload fields above employ AJAX to give a real time update of the progress of files as they are uploading.Currently, LightLoader Track Multiple File Uploads Using AJAX With Progress Bar support for PHP only.

9. File upload progress bars with PHP

   

   File upload progress bars using file upload hooks in PHP 5.2.x to generate a progress bar while uploading a file through a HTML form.

10. Styling inputs with css and dom

    

    File inputs (<input type="file" />) are the bane of beautiful form design. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. The Styling inputs is tested on IE 5.5+ , Firefox 1.5+ , Safari 2+ .

read more...