You can see how it`s work her:

demo

Hear is all jquery code:

 (function($) { $.fn.animatedBG = function(options){ var height = $(this).height(); var width = $(this).width(); var parts = options.parts; var parts_width = width/parts; var bg_image = $(this).css("background-image"); var animationWidth = options.animationWidth; if (animationWidth == 'auto' || animationWidth == undefined) { animationWidth = parts_width; } for (i=1;i<=options.parts;i++) { $(this).append(" "); $(this).find(".bg_part_"+i).css("float", "left"); $(this).find(".bg_part_"+i).css("background-image", bg_image); $(this).find(".bg_part_"+i).css("background-position", "-"+parts_width*(i-1) + "px 0"); $(this).find(".bg_part_"+i).css("width", parts_width); $(this).find(".bg_part_"+i).css("height", height); $(this).find(".bg_part_"+i).hover(function() { $(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1)-animationWidth + "px 0"}); } , function() { $(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1) + "px 0"}); }); } }; })(jQuery); 

And now I will explain you how it`s works. First you need to copy all code to new file, for example animatedBG.js and add to your page header . Now you can call this script like this:

 jQuery(document).ready(function() { var options = { parts: 10, animationWidth: 146 } $('#bg').animatedBG(options); }); 

Option “parts” means in how many parts your background will be split and option “animationWidth” means how far background will go to left during the animation. In “animationWidth” you can also set to “auto” then “animationWidth” will be the same as background split white. You need to use this script on page element who have some background.

The tradition method of dynamic history/”back button” management has always been hash-based JavaScript technology.  Newer technology, including HTML5′s window.onpopstate and history.pushState methods, allow for more reliable methods for managing history.  MooTools’ History plugin supports modern and legacy methods for history management.  Let me show you how to quickly implement the MooTools History plugin.

HTML Structure

The History plugin doesn’t require any HTML structure adjustments but at least one designated content should be identified; you can, of course, have as many content areas as you like, but you’ll most likely need multiple AJAX requests to retrieve their content, unless you use a Request.JSON request to retrieve content for multiple areas of the page. For this simple demo, we’ll define a header, footer, and menu, and content area:

<div id="body">

	<!-- header -->
	<header>
		<a href="/" data-noxhr>David Walsh Blog</a>
		<div>MooTools History Plugin Demo</div>
		<div>This is a simple example of the MooTools History plugin created by Christoph Pojer</div>

	</header>

	<!-- menu -->
	<ul id="demoMenu">
		<li><a href="mootools-history.php">Home</a></li>
		<li><a href="mootools-history-david.php">About David Walsh</a></li>
		<li><a href="mootools-history-mootools.php">About MooTools</a></li>
		<li><a href="mootools-history-christoph">About Christoph Pojer</a></li>
	</ul>

	<!-- content area -->
	<article id="contentHolder">

		<!-- initial page content goes here -->

	</article>

	<!-- footer -->
	<footer>

	</footer>
</div>

The content area is the only area which will have its content change. The page should load as usual

The MooTools JavaScript

Assuming that the MooTools History plugin has been included in the page, there are a few functions that should be created upon domready.  The first is a method which will perform the request for content when a link is clicked:

// Content holder (all content placed within this element)
var contentHolder = document.id("contentHolder");

// Create a Request object which will be reused when links are clicked
var request = new Request.HTML({
	onSuccess: function(nodeTree,elements,html) {
		// Set the content into the content holder
		contentHolder.set("html",html);
		// Execute directions that should be executed whenever a page changes
		onPageUpdate();
	}
});

// Create a function that loads the page content
var loadPage = function(url) {
	// Make a HTML request to get the content for this page
	request.send({ url: url });
};

The next step is creating a method (which is theoretically option, but you’ll usually want to do something once content has loaded) which will execute every time content is received:

// Function that will execute whenever a page gets changed
var onPageUpdate = function() {

	// Do whatever you'd like here!  

	// Possibly manually record a Google Analytics page view?

};

History doesn’t request that you do anything when content is received, but you’ll likely want to do something. Why manually record a page view within Google Analytics?

This next piece is important in turning links to static pages into AJAX-ified History triggers. Just one big Element.Delegation event delegation call will do the work for not just the initial page load, but every History AJAX load after that:

// The listener that manages all clicks
var listener = function(evt){
	evt.preventDefault(); // Prevent following the URL
	History.push(this.get('href')); // Push the new URL into History
};

// Add event delegation to add clicks.  Both of these work:
//document.body.addEvent("click:relay(a:not([href=#]):not([href^=http://]):not([data-noxhr]))",listener);
document.body.addEvent("click:relay(a:not([href=#],[href^=http://],[data-noxhr]))",listener);

When any same-site, non-hashed link is clicked, the listener method stops the event and pushes the new URL into History, changing the address bar and managing back/forward button click.

A back function is also created so that we can provide a “back” link and a “forward” link to travel back and forward in page history, if we choose to use it:

// Listener for the "Back" link
var back = function(evt){
	evt.preventDefault();
	History.back(); // Go back
};

// Listener for the "Forward" link
var forward = function(evt){
	evt.preventDefault();
	History.forward(); // Go back
};

// Add to links
document.id("backLink").addEvent("click",back);
document.id("forwardLink").addEvent("click",forward);

The next step is adding a change event to History itself to run our loadPage function when the page URL changes:

// When the history changes, update the content
History.addEvent('change',loadPage);

If the client doesn’t support the history.pushState method, the History plugin evaluates the hash and loads the page as necessary:

// Handle the initial load of the page if the browser does not support pushState, check if the hash is set
if(!History.hasPushState()) {
	// Check if there is a hash
	var hash = document.location.hash.substr(1);
	if (!hash) return;

	// If the hash equals the current page, don't do anything
	var path = document.location.pathname.split('/');
	path = path[path.length - 1];
	if (hash == path) return;

	// Load the page specified in the hash
	loadPage(hash);
}

Lastly, running the onPageUpdate upon domready load doesn’t hurt since events are only added once within onPageUpdate:

// Update the page
onPageUpdate();

Now the page is ready to support History-based, AJAX-driven content swapping.  Thanks to the onPageUpdate function, links are added to events as they come in so that even AJAX-retrieved content can be managed with History.

Tips and Strategies for Hash/History-Managed Websites

Plugins like Christoph’s History masterpiece are very helpful in enriching the user experience but do require a bit of developer logic:

• Use Event Delegation – Remember that with a History-style system, assigning events to elements directly may not be the best solution because those elements may be gone with the next link click. Using event delegation instead of traditional event assignments may save you a lot of trouble. Read my MooTools Element.Delegation post if you aren’t familiar with event delegation.
• Don’t Assume JavaScript Support – Keep in mind that the client may not support JavaScript.  Search engines have added JavaScript support but it’s important to use URLs that will work with both on a History-managed site and a JavaScript-less website.
• Use AJAX Detection - MooTools provides an AJAX-specific header within the Request class called HTTP_X_REQUESTED_WITH.  Click here to learn how to use it to detect AJAX requests.  You will want to be able to detect AJAX so that those requests simply return the content and not the header and footer (etc.) with it. You could write a client-side script/regex to parse out the content but that’s largely inefficient. My demo uses PHP to store the page content in variables as follows:

  // Load pages based on querystring
  $qstring = $_SERVER['QUERY_STRING'];
  if($qstring == 'home' || $qstring == '') {
  	$content.= '<h1>Welcome Home!</h1>';
  	$content.= '<p>History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.</p><p>This demo page aims to teach you how you can use Christoph Pojer\'s outstanding History widget to load only the content you need, dynamically and reliably.</p>';
  }
  elseif($qstring == 'about-david') {
  	$content.= '<h1>About David Walsh</h1>';
  	$content.= '<p>My name is David Walsh. I\'m a 27 year old Web Developer from Madison, Wisconsin. In the web world, I am:</p>
  	<ul>
  	<li>Founder and Lead Developer for Wynq Web Labs.</li>
  	<li>Software Engineer for SitePen.</li>
  	<li>Core Developer for the MooTools JavaScript framework.</li>
  	<li>Co-Founder of Script & Style, a website aimed at making web developers and designers better.</li>
  	</ul>
  	<p>I don\'t design the websites - I make them work.</p>
  	<p>I am also an admirer of the great <a href="?about-christoph">Christoph Pojer!</a>.</p>';
  }
  // and more....
  // Page not found
  else {
  	$content.= '<h1>Page Not Found</h1>';
  	$content.= '<p>The page you were attempting to find could not be found.</p>';
  }
  
  // If request was via AJAX, push it out.
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  	echo $content;
  	exit();
  }

  Obviously your content management system would be pulling content from a database or other static files, but you get the point — load content before any page output, sniff for AJAX, and push content out accordingly. If it’s not an AJAX request, push that content into the content area’s HTML via traditional methods.

These tips should set you up well to use a History-based system.  Remember that JavaScript is meant to enhance — keep in mind that your user (or search engine bot) may not support JavaScript, so be sure to test your website thoroughly!

Give the example hell.  Click from page to page, use the back button, refresh the page, etc.  History is rock solid!

Thanks to Christoph Pojer for his outstanding MooTools History plugin.  Many History-style plugins have existed but the browsers haven’t been as feature-rich as they are now.  If you have any suggestions, tips, or experiences to share about creating hash-based websites, please share them.

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable.

There are two main techniques that are extolled:

1. Size with px
2. Size with em

Let’s review these two approaches before I reveal the magical third.

Sizing with px

In the early days of the web, we used pixels to size our text. It’s reliable and consistent. Unfortunately, users of Internet Explorer—even in IE9—do not have the ability to change the size of the text using the browser function of increasing or decreasing font size. For those concerned about the usability of their site, this may be a big deal. Recent versions of IE include zooming, which increases the size of everything on the page—a feature that is also available in most other mainstream browsers, too. This has helped mitigate the issue to a degree.

I, personally, have been of the camp that px-based layouts provide the consistency I prefer and users have enough tools available to adjust their view that accessibility is less of a concern. But I digress. What else can we do?

Sizing with em

That whole inability to resize text in IE has been a continuing frustration. To get around that, we can use em units. Richard Rutter’s article, How to size text using ems, was probably the first I read of this approach, way back in 2004. (Wow, it has been almost seven years.)

The technique modifies the base font-size on the body using a percentage. This adjusts things so that 1em equals 10px, instead of the default 16px. To set the font-size to the equivalent of 14px, set it to 1.4em.

body { font-size:62.5%; } h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */ 

The problem with em-based font sizing is that the font size compounds. A list within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.

body { font-size:62.5%; } h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */ li li, li p /* etc */ { font-size: 1em; } 

The compounding nature of em-based font-sizing can be frustrating so what else can we do?

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ 

I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.

CSS Techniques

Rotational Sliders
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Generating Organic Randomness with Prime Numbers and CSS
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

CSS3 3D Hologram
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.

Checkerboard, striped & other background patterns with CSS3 gradients
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery

CSS3 Keyboard
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

CSS3 Progress Bars
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

Hover on “Everything But”
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Creating a Sphere With 3D CSS
With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

CSS3 Planetarium
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Natural Object-Rotation with CSS3 3D
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

CSS Drop-Shadows Without Images
Nicolas Gallagher shares presents his CSS drop-shadows without any images.

Incrementable Length Values in Text Fields
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Beveled Corners & Negative Border-Radius with CSS3 Gradients
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Flexible Height Vertical Centering With CSS, Beyond IE7
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Coding up a semantic, lean timeline
This article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed Boxes
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

Quick Tip: Nonintrusive CSS Text Gradients
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Bokeh with CSS3 Gradients
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Different Transitions for Hover On / Hover Off
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Styling children based on their number, with CSS3
Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS Modal
Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

Rotating Feature Boxes
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

When and How to Visually Hide Content
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

How to avoid common CSS3 mistakes
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

Introduction to CSS Escape Sequences
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS Generated Content
Trevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizing
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Revisit Hardboiled CSS3 Media Queries
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.

iPad Orientation CSS
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.

CSS Value Lengths, Times, Frequencies and Angles
In this article the authors go over all the math type units that can be applied as property values in CSS.

CSS Tools

320 and up
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS3 Generator – By Eric Hoffman and Peter Funk
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern Generator
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

Griddle.it – Web page alignment made easy
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

The 1140px Grid: Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Fighting the @font-face FOUT
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.

CSS3 Github Buttons
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook Buttons
CSS3 Facebook Buttons

Minimee
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Live.js
one script closer to designing in the browser.

Bootstrap.less
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Animatable: Create CSS3 animations and advertising for Webkit browsers
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Ceaser: CSS Easing Animation Tool
Ceaser is an CSS Easing Animation Tool.

Shower
This is provided without warranty, guarantee, or much in the way of explanation.

CSS Pivot
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

Roots WordPress Theme
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Free Online CSS3 Typeset Style Generator
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

CSSPrefixer
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

Type-a-file
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

A Best Practice Baseline for Your Mobile Web App
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Code Beautifier
This tool allows you to format, clean up and optimize your stylesheets.

Markup Generator
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

CSS Sprite Generator
This tool allows you to create and maintain your CSS sprites.

Respond
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Adapt.js – Adaptive CSS
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.

Firmin, a JavaScript animation library using CSS transforms and transitions
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.

Command-line CSS spriting
The author shows, how to create CSS sprites from the command line alone.

Last Click

Code Standards
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

How to Manage CSS Explosion
A very useful thread on StackOverflow on how to keep CSS files organized and clean.

Here you go, pretty sure some of them will be really useful.

• Sticky Sidebar This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers.
• Waypoint Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
• Better Checkboxes In this short tutorial, the author will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
• Thumbnails Navigation Gallery In this tutorial the author is going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation.
• Sausage UI for contextual pagination Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
• Diagonal fade Diagonal fade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away.
• jRumble jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.
• Image Len Use this jQuery plug-in to add lens style zooming effect to an image
• Backstretch Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

About the Author

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

The CSS

The first task is creating the base animation with @-webkit-keyframes:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

The -webkit-transform property is the animator in this animation.  Define that at 0% the element is at 0 rotation and scaled to 1 — that is the original state of the element.  At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

With our named animation created, it’s time to apply the animation to an element upon its hover state:

a.advert:hover {
	-webkit-animation-name:rotater;
	-webkit-animation-duration:500ms;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease-out;

	-moz-transform:rotate(720eg) scale(2);
	-moz-transition-duration:500ms;
	-moz-transition-timing-function: ease-out;
}

The event is assigned using the -webkit-animation-name property.  Additional properties are assigned:  -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Here’s a collection of 14 useful jQuery plugins and scripts for web designers and web developers. This set contains jQuery sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive calendar, image rotators, plugins for tabs, accordion menus, user interface elements, web contact forms, modal windows, tooltips and many other fresh jQuery solutions collected in one place.

jQuery Plugins Scripts

elRTE

elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.

demo / download

Catch404

Catch404 is a jQuery and CSS3 modal plugin for handling broken links elegantly.

demo / download

wdCalendar

[adsense]

wdCalendar is a jquery based google calendar clone. It cover most google calendar features. Day/week/month view provided, create/update/remove events by drag & drop, easy way to integrate with database, and much more.

demo / download

Lightbox Me

Lightbox_me handles overlay resize when the window is resized, overlay size in cases where the document is smaller than the window, position fixed in all browsers and position fixed automatically swaps to position absolute when the window size is smaller than the modal, so the user can scroll to see the contents.

demo / download

SliderNav

SlliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything, however longer words may look slightly awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list.

demo / download

Like it? Tweet it!

Like it? Tweet it! is a jQuery-powered JavaScript widget that enables visitors to your website or blog to write a tweet about the site directly in a box displayed in the corner of the website, with a link to the site already embedded in the input field.

demo / download

Nivo Slider

Awesome jQuery image slider includes features: 9 unique transition effects, simple clean & valid markup, loads of settings to tweak, built in directional and control navigation, packed version only weighs 6kb, Supports linking images and free to use and abuse under the GPL license.

demo / download

Uniform

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

demo / download

Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in long web pages.

demo / download

jFlickrFeed

jFlickrFeed is a jQuery plugin that makes it easy to pull Flickr feeds and display them on your site.

demo / download

Chromatable jQuery Plugin

A jQuery plugin to create scrolling tables with fixed headers. A jQuery plugin to keep the code contained in one location and allow users to call the chromatable method on any table, or many tables on the same page.

demo / download

Uploadify

This plugin allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server.

demo / download

Easy Slider

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

demo / download

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

demo / download

Clouds Template — Download Link

36 Basic | Flexible Templates — Download Link

Simon Collison (Retro Stripes) — Download Link

Outdoorsy Template — Download Link

45royale | Boutique — Download Link

Company Newsletter — Download Link

Medieval Style Layout — Download Link

Nature — Download Link

Industrial Template — Download Link

Army Look — Download Link

Grunge — Download Link

Company Newsletter — Download Link

Newsletter Template 2 left sidebar — Download Link

Company Newsletters — Download Link

Meagan Fisher (Air Mail) — Download Link

MetaLab (Acrylic) — Download Link

2 column, RSS Newsletter — Download Link

Mike Kus (Worn) — Download Link

Mike Kus (Color Direct) — Download Link

1 column, Skinny Format — Download Link

Dark and Dirty — Download Link

Welcome Template — Download Link

Meadows Template — Download Link

Malibu Template — Download Link

Tech Newsletter — Download Link

MetaLab Cool Template — Download Link

Fabric Template — Download Link

Free HTML Email Template — Download Link

Holiday | Seasons Greetings — Download Link

Holiday | Happy Holidays — Download Link

Free Sample Newsletter Template — Download Link

Friuts Store Template — Download Link

Free Newsletter Templates — Download Link

Free Newsletter Templates — Download Link

Free Newsletter Templates — Download Link

Free Newsletter Templates — Download Link

Modern Age Technology Template — Download Link

Elliot Jay Stocks | The Cool Collective — Download Link

Company Newsletter — Download Link

Newsletter Templates — Download Link

Blue Newsletter — Download Link

Clean Newsletter — Download Link

Free Coupons Newsletter — Download Link

Gold Autumn — Download Link

Classic Template — Download Link

Elegant Template — Download Link

High Impact — Download Link

Spring Template — Download Link

Cotton Rag — Download Link

Mute Template — Download Link

This update to the TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like. A sample call would look like the following:

Parameters include (tag – description (type) – default):

Nearly all of the parameters above are optional. Of course you must include either the html, iframe, url, or image parameters as they drive the content. Height and width are option and will be calculated based on offsetWidth and offsetHeight in the case of HTML or Ajax content else by actual width and height with images. Iframe calls must include a height and width. By default the box will animate in the center of the screen in a fixed position.

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. This is a never-ending work in progress and I welcome any bug reports.

A lot goes in designing the backgrounds with different textures and patterns, choosing the right colors and a lot other factors. Not only the backgrounds but buttons, logos, scrollbars, texts, and a lot is important when it comes in designing and it does involve a lot of creativity and time to zero in the final one. Not to worry, these tools are not to compromise on the creative aspect but are developed keeping the time factor in mind.

Useful Online Generators for Designers

Here is a presentation of such online generators for designers which are quite small, simple to use and produce excellent results with maximum combinations in a fraction of time. No installation or download required to use these tools, and the results can be saved for your purpose.