Having some fresh and maybe even unexpected effects on a website, can juice up the experience for the user. Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.

We’ve collected some wonderful examples of such effects for your inspiration. Dive in!

Edits Quarterly × Ian Coyle

Edits Quarterly is a great example of a whole new navigation experience. You can scroll down or simply use the arrow keys to view the beauty of it.

neotokio!

Neotokio! will surprise you with different kind of animations while you scroll down the site.

Kyan

Kyan has an awesome slider that just animates wonderfully has gives a real 3D feel to it.

Adrian Baxter

Adrian Baxter’s website has an interesting and original parallax effect. Oh, and don’t scare when you check out the contact form :)

Alpis Design

Here we have a nice hover effect in the about section.

Dawid Wadach

Dawid Wadach has a very interesting hover effect which reveals his portfolio items. A combination of lines and boxes that move make this effect very original.

Dangers of Fracking

“Dangers of Fracking” which is designed by brilliant Linda Dong, is just a beautiful on-scroll piece of art that explains the dangers of hydraulic fracturing, a process that is used to release natural gas. See, how the story is being told using this wonderful visualization method.

AIGA 50 DC

AIGA 50 uses this great “cut-out” technique that reveals the images of a slider which always seems to be beneath the other content slides.

Create Digital Media

Create Digital Media has a unique slider that shows content and images in an original way.

Mezcal Buen Viaje

Now, THAT I call a scrollbar! :) “Mescal Buen Viaje” is like entering another world: everything is very original, from the scrollbar to the navigation to the way images are displayed: it’s such a fresh experience. And check out those cute kolibris that flap their wings on scroll.

Alex Pierce

Alex Pierce has some nice sliding happening right after the page is loaded with CSS3 animations. Hovering over the main navigation will make the whole navigation bar move a bit. Also, other subtle (hover) effects make a visit to his website a really nice experience. And don’t you just love the typography?

Styiens – Label Musical

Styiens has a very interesting slider that moves around that central circular element.

Lavazza 20Calendars

20 Calendars of Lavazza uses a beautiful full-page accordion that slides open elegantly when clicking on one of the headlines.

Shelton Fleming

Shelton Fleming divides its content into “Experiences” and “Ideas”, presenting each on one side of the page and making their sub-content slide originally when opening a menu item.

Toast!

Toast! has a really cool and original slider.

Five Thirty Brew by blenderbox

Five Thirty Brew by blenderbox is an exciting scrolling roller-coaster that will present you their fine beer and the process of making it.

CaptainDash

The delicate and original layout and design of CaptainDash makes the sliding content very interesting.

Sir John A Day

Sir John A Day has some really cute subtle details that are not visible at first sight. But once you dive in, you will see those tiny animations, that complement this beautiful design and add life to it: there is something animating in every section of the page.

We hope you liked this little collection and got inspired!

With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. I will go over the development of dynamic, and generative banners to give your website that little extra wow!

If you are interested in reading more about the HTML5 spec, this is a great resource: Dive Into HTML5 by Mark Pilgrim

Markup

The HTML markup is very simple, since we will be doing all the work with JavaScript, on the canvas element:

	<canvas id="banner"></canvas>

JavaScript

As expected, it will be JavaScript doing all the heavy lifting here. But first and foremost, we will need to check if our users are using a modern browser that supports the canvas element. If it’s not supported, we want to dish up the next best thing: a static image. We will be using Modernizr to check on this.

Variables

Let’s start defining some variables:

		//The words to be written on the banner
		var keyword 	= "HONEY",
		canvas, context,
		bgCanvas, bgContext,
		density 	= 13,
		particles 	= [],
		colour 		= '#fff0a4',
		mouse 		= { x:0, y:0 },
		isDrawing 	= false,
		canvasW, canvasH;

A little explanation: The keyword here is going to be the word which you want to display on the banner.

The canvas, is a variable which will hold the HTML canvas element. This will be assigned later. The context is what allows us to drawn and write to the canvas.

The density variable holds how many pixels we want to have (both horizontally and vertically) between each banner particle.

The particles array will store all the particles and their respective settings.

The colour variable is the colour that each particle will have.

Finally, the isDrawing variable let’s us know if we are hovering over the banner, and the canvasW and canvasH are the canvas’ width and height respectively.

Setting up the banner

The first step is to call the reload function which we will also call on window resize:

this.initialize 	= function( canvas_id ) {

		reload( canvas_id );

		window.onresize = function(event) {
			reload( canvas_id );
		}

};

In the reload function we initialize the canvas and context and set the respective sizes. Then we call the prepare, setupParticles and draw functions.

var reload			= function( canvas_id ) {

	canvas 			= document.getElementById( canvas_id );

	if ( !window.HTMLCanvasElement ) return false;

	context 		= canvas.getContext('2d');

	canvasW			= window.innerWidth;
	canvasH			= 300;

	canvas.width 	= canvasW;
	canvas.height 	= canvasH;

	bgCanvas 		= document.createElement('canvas');
	bgContext 		= bgCanvas.getContext('2d');

	bgCanvas.width 	= canvasW;
	bgCanvas.height = canvasH;

	prepare();
	setupParticles();
	draw();

};

The first thing to note here, is that the function takes a string variable, which should match the element ID in the HTML. In our case, we would pass “canvas-banner”.

As you can see, both, the background canvas and the main canvas are set to the same size. We will get into why we are using two canvas elements in the next section.

The Background Canvas

Ok, now I have some explaining to do: The reason why we have two canvases here, is more or less the core of these banners. The background canvas is where you will be printing the text, or images. Afterwards, we will scan over the image data (pixel by pixel) of the canvas. If we run into a black pixel we will know that we have drawn on this location, and hence, will create a particle in its place.

var prepare 		= function() {

	//Chose the font, and size that we want.
	bgContext.font = "300px 'Jockey One'";

	//Fill the keyword text onto the canvas.
	bgContext.fillText(keyword, ( canvasW / 2 ) - ( Math.round( bgContext.measureText(keyword).width/2 ) ) , 260 );

};

The fillText command above, takes three parameters: The first being the text to write, the second and third being the x and y co-ordinates respectively.

Next, we will create our particles. These will soon be drawn onto the main canvas, but for now, we will just store them in our particles array:

var setupParticles 	= function() {

	particles = [];		

	//Declare our local variables
	var imageData, image_Data,
		pixel,
		width	= 0,
		i		= 0,
		slide 	= false;

	//Get the image data - from (0,0) to the edges of the canvas
	imageData = bgContext.getImageData( 0, 0, canvasW, canvasH );
	image_Data= imageData.data;

	for( var height = 0; height < canvasH; height += density ) {

		++i;
		slide 	= ((i % 2) == 0);

		width	= 0;

		if (slide == true) {

			width += 6;

		}

		//Iterate horizontally over the image data
		for( width; width < canvasW; width += density ) {

			//Get the pixel located at our current iteration
			pixel = image_Data[ ( ( width + ( height * canvasW )) * 4 ) - 1 ];

			//Pixel has been drawn on.
			if( pixel == 255 ) {

				//Add the coodinates and colour to our particle array.
				particles.push({
					colour	: colour,
					x		: width,
					y		: height
				});

			}
		}
	}
};

Yes, that is a large chunk of code, I’ll go over the tricky parts now.

Really, all we are doing is looping over every n-th pixel, where n is the density set at the start.

getImageData takes four values, the x and y of the top left corner, as well as for the bottom right. In our case, we passed it two zeros (the very top left) and the canvas width and height, which are the coordinates of the very bottom right. It returns a very big list, containing the color data of every single pixel on the canvas. Why are we multiplying this by four? Because within this list, each pixel is represented by four values, red, green, blue and an alpha value.

By default, all the canvas imageData contains, is a long list of zeros – by drawing on this canvas (in our case, using fillText), the pixels now contain proper color data.

Finally, we have pushed the x and y coordinates into a simple dictionary, which we will now use to draw our banner.

Drawing the banner

Here, we finally pull everything together. With our list of x and y positions, stored in the particles array, we can draw out the banner.

var draw = function() {

	context.clearRect( 0, 0, canvasW, canvasH );

	var dx, dy, sqrDist,
		scale = 1;

	for ( var i = 0, len = particles.length; i < len ; ++i ) {

		...

		context.beginPath();

		context.moveTo( x, y - height / 2 );
		context.lineTo( x + width / 2, y - height / 4 );
		context.lineTo( x + width / 2, y + height / 4 );
		context.lineTo( x, y + height / 2 );
		context.lineTo( x - width / 2, y + height / 4 );
		context.lineTo( x - width / 2, y - height / 4 );
		context.lineTo( x, y - height / 2 );  

		context.closePath();
		context.fill();

	}

};

We loop through each of the particles we stored previously to set the color and to draw a shape on that (x,y) point.

With that, we have a very simple static banner… now for the fun part, let’s add some interactivity.

Adding Interactivity

The fun thing about this is that we can be as simple, or complex as we want. The first thing we will want to do though, is track the user’s mouse position while it is over the banner.

var mouse = {x:0, y:0, o: false};

The mouse variable will be updated by two functions, one tracking the movement, and one tracking whether the mouse has left the canvas element:

var MouseMove 		= function( e ) {

	mouse.x = e.offsetX || ( e.layerX - canvas.offsetLeft );
	mouse.y = e.offsetY || ( e.layerY - canvas.offsetTop );

	if( !isDrawing ) {

		isDrawing = true;
		drawTimeout = setTimeout( function() {
			draw();
			isDrawing = false;
		}, 60);

	}

};

var MouseOut 		= function(e) {

	isDrawing = false;
	clearTimeout( drawTimeout );
	draw();

};

In order to make these work, we also need to attach JavaScript events to our canvas element. These will go right back up into our reload function.

	canvas.addEventListener('mousemove', MouseMove, false);
	canvas.addEventListener('mouseout', MouseOut, false);

Now that we can track the mouse, we need to change up our draw function a little, based on how we want to interact with the mouse.

...

var p   	= particles[i];

dx 			= p.x - mouse.x;
dy 			= p.y - mouse.y;

// distance from mouse to particle
sqrDist 	= Math.sqrt( dx * dx + dy * dy );

( isDrawing ) ? scale = Math.max( Math.min( 3 - ( sqrDist / 10 ), 10 ), 1 ) : scale = 1;

var width  	= density / scale - 4,
	height 	= density,
	x 		= p.x,
	y 		= p.y;

context.fillStyle = p.colour;

...

Above, we calculate the distance between the current particle and the mouse. Then we update the variable scale to fall between 1 (meaning no scaling) and the distance between the mouse and the particle (but not bigger than 10).

All that’s left now, is to tell our canvas to draw at regular intervals, rather than just once at the start. At risk of getting too complicated I’m just going to keep it simple and use setTimeouts when the user hovers over the banner – but if you are interested in looking more into canvas animations, the function you will be looking for is requestAnimationFrame

Let’s get some color

We have a neat working banner, why not add a little color. Fortunately, we have already done most of the work here, we only need to change 2 lines.

//A variable to store each of the colors we want to use
var colors = ['#fff0a4', '#ffe98f', '#ffcf52', '#fbad1d', '#c48d1c'];

	...

//When creating the particles, we assign a color from this list.
color: colors[Math.floor(Math.random() * colors.length)],

And there we have it! A unique, generative and colorful banner, made just for you. Take a look through the demos to see a few other examples, of just what you can do.

View demo Download source

jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.

The following will demonstrate the methods for storing and retrieving data using jCookies and will show how to retrieve data using server side code such as C# and PHP.

Note: Data is stored in the cookie as JSON data then Base64 encoded to enable the survival through transport layers that are not 8-bit clean. JSON and base64 functions are included in the script and if trimmed out, provided they exist elsewhere, would reduce the size by 70%.

Creating Cookies

To create a cookie you call jCookies and must pass two properties, name and value.

$.jCookies({
    name : 'Listening To',
    value : { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}
});

As you can see you can store pretty much anything. By default cookies are set to expire after 27 days. You can edit the expiration by settings one of the following properties: seconds, minutes, hours, days. The value entered for these properties must be a valid number or they will be ignored.

$.jCookies({ name : 'User', value : { username : 'Bob' , level : 5 }, minutes : 60 });

Note: If you plan on retrieving data from the server side via ASP.net keep the cookie data very simple. More on this later.

Retrieving Cookies

To retrieve a cookie you call jCookies and pass a single properties, get.

var listening_to = $.jCookies({ get : 'Listening To' });
    // response: { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}

var rutabaga = $.jCookies({ get : 'Rutabaga' }); // (cookie was set by another proces)
    // response: false

Data is returned just as you would expect it to. If there was no cookie stored with that name, the cookie has expired, or there was an error then the response would be false. If you want to see if there was an error with the cookie you can set the optional property error. By default this property is set to false.

var rutabaga = $.jCookies({ get : 'Rutabaga', error : true });
    /* response:
        Error : {
            arguments : undefined,
            message : "Invalid base64 data",
            stack : "—",
            type : undefined
        }
    */

This is an error response from Chrome. Depending on your browser your results may vary.

Erasing Cookies

To erase a cookie you call jCookies and pass a single property, erase.

var erased_listening_to = $.jCookies({ erase : 'Listening To' });
    // response: true

var rutabaga = $.jCookies({ erase : 'Rutabaga' });
    // response: false

If a cookie existed and was erased successfully true is returned. If the cookie never existed false is returned.

jCookies Server Side

Dealing with HTTP Cookies created by jCookies on the server side is a cinch you simply need to Base64 decode the data then JSON decode the data.

Setting cookie in JavaScript

$.jCookies({name:'user',value:{name:'brian',level:'awesome'}});
    // response: true

Retrieving the cookie in PHP

<?php print_r(json_decode(base64_decode($_COOKIE['user'], true))); ?>
    /* response:
        stdClass Object
            (
            [name] => brian
            [level] => awesome
            )
    */

With PHP it couldn’t be easier. In the demonstration above I am printing out the entire cookie.

Retrieving the cookie in C#

Dictionary<string,object> user =
  new JavaScriptSerializer().Deserialize<Dictionary<string,object>>
  (Encoding.UTF8.GetString(
	Convert.FromBase64String(Page.Request.Cookies["user"].Value)
  ));

Page.Response.Write("user : name  = " + (string) user["name"]);

With C# its a bit more difficult. You have to set the type of each bit of data that comes back before you can use it. That is why I am storing the data as Dictionary<string,object>. We set the property to string to make it accessible and set the value to object for casting later. If you knew exactly the format of the cookie beforehand you could always create your own class and store that data in that class.

That about does it. If you want to know more visit my site or the jQuery plugin page.

Download jCookies

The Markup

The HTML structure is going to consist of a main container with the class ‘get’. This container stores all data that we need to draw the arcs. Then we create a new div element with the id ‘diagram’ which will be the container for the arcs:

<div id="diagram"></div>
<div class="get">
	<div class="arc">
		<span class="text">jQuery</span>
		<input type="hidden" class="percent" value="95" />
		<input type="hidden" class="color" value="#97BE0D" />
	</div>
	<div class="arc">

		<span class="text">CSS3</span>
		<input type="hidden" class="percent" value="90" />
		<input type="hidden" class="color" value="#D84F5F" />
	</div>
	<div class="arc">
		<span class="text">HTML5</span>
		<input type="hidden" class="percent" value="80" />
		<input type="hidden" class="color" value="#88B8E6" />

	</div>
	<div class="arc">
		<span class="text">PHP</span>
		<input type="hidden" class="percent" value="53" />
		<input type="hidden" class="color" value="#BEDBE9" />
	</div>
	<div class="arc">
		<span class="text">MySQL</span>
		<input type="hidden" class="percent" value="45" />
		<input type="hidden" class="color" value="#EDEBEE" />
	</div>
</div>

The CSS

In the CSS we will only do two things: hide the elements with the class ‘get’ and set the width and height of the div with the id ‘diagram’:

.get {
	display:none;
}

#diagram {
	float:left;
	width:600px;
	height:600px;
}

The JavaScript

The main idea is to first create a new Raphael object (variable ‘r’) and draw our first circle with a radius that we specify in ‘rad’.
Then we create a new circle in the Raphael object. We center the circle (x: 300px and y: 300px) and we add some text to it.

var o = {
	init: function(){
		this.diagram();
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

	}
}

Now, let’s go one step further.
We’ll extend the Raphael object with some custom attributes:

• alpha – angle of the arc
• random – random number from the specified range
• sx, sy – start drawing from this point
• x, y – end drawing at this point
• path
  • M – move to the starting point. No line is drawn. All path data must begin with a ‘moveto’ command.
  • A – radius-x, radius-y x-axis-rotation, large-arc-flag, sweep-flag, x, y (read more: https://developer.mozilla.org/en/SVG/Tutorial/Paths)

var o = {
	init: function(){
		this.diagram();
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

		r.customAttributes.arc = function(value, color, rad){
			var v = 3.6*value,
				alpha = v == 360 ? 359.99 : v,
				random = o.random(91, 240),
				a = (random-alpha) * Math.PI/180,
				b = random * Math.PI/180,
				sx = 300 + rad * Math.cos(b),
				sy = 300 - rad * Math.sin(b),
				x = 300 + rad * Math.cos(a),
				y = 300 - rad * Math.sin(a),
				path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
			return { path: path, stroke: color }
		}

		$('.get').find('.arc').each(function(i){
			var t = $(this),
				color = t.find('.color').val(),
				value = t.find('.percent').val(),
				text = t.find('.text').text();

			rad += 30;
			var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

			z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
					this.toFront();
				title.animate({ opacity: 0 }, 500, '>', function(){
					this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
				});
            }).mouseout(function(){
				this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
		});
	}
}

Then we’ll retrieve all the data needed, such as the percentage value, the color of the arc and the text. We increase the radius value for each arc and finally create a new arc path.
In the last step we are adding some animations on hover. When the mouse will be over the arc the title (which is placed in the main circle) is changing. Also, we’ll make the arc a little bit bigger.

Conclusion

In today’s tutorial you’ve learned some first steps on how to use Raphaël. It is a powerful library and you can do a lot of great stuff with it. Visit the Raphaël website for more examples.

View demoDownload source

“Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It’s basically a simple demo for canvas “imageData” functionality.” David DeSandro

Created by

David DeSandro

Source

http://desandro.com/resources/close-pixelate/

Demo

http://desandro.com/resources/close-pixelate/

The following generates a real-time image heatmap with javascript and the HTMLCanvas element depending on the user’s mouse movement.

Source

http://www.patrick-wied.at/static/heatmap/

Demo

http://www.patrick-wied.at/static/heatmap/

This article shows how to implement Drag and Drop files in browser. Along with JavaScript code there are tip how to implement server side backend to handle uploaded files.

Source

http://www.ajaxline.com/drag-and-drop-files-in-browsers

Demo

http://www.ajaxline.com/drag-and-drop-files-in-browsers

This plugin allows you to animatedly sort a table based on a particular column. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Source

http://mitya.co.uk/scripts/Table-sort—now-REGEXP-friendly-111

Demo

http://mitya.co.uk/scripts/Table-sort—now-REGEXP-friendly-111#part3

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

So let’s start!

The Markup

The HTML will consist of a wrapper container where we will place a form with fieldsets. Each fieldset will be a step in our sliding form:

<h1>Fancy Sliding Form with jQuery</h1>
<div id="wrapper">
	<div id="steps">
		<form id="formElem" name="formElem" action="" method="post">
			<fieldset class="step">
				<legend>Account</legend>
				<p>
					<label for="username">User name</label>
					<input id="username" name="username" />
				</p>
				<p>
					<label for="email">Email</label>
					<input id="email" name="email" type="email" />
				</p>
				<p>
					<label for="password">Password</label>
					<input id="password" name="password" type="password" />
				</p>
			</fieldset>
			<fieldset>
			...
			</fieldset>
		</form>
	</div>
	<div id="navigation" style="display:none;">
		<ul>
			<li class="selected">
				<a href="#">Account</a>
			</li>
			<li>
				<a href="#">Personal Details</a>
			</li>
			<li>
				<a href="#">Payment</a>
			</li>
			<li>
				<a href="#">Settings</a>
			</li>
			<li>
				<a href="#">Confirm</a>
			</li>
		</ul>
	</div>
</div>

The navigation with all the links to the steps will be an unordered list that is initially hidden. We will show it in our JavaScript function.
Let’s look at the style.

The CSS

The main wrapper and the steps container will have the following style:

#wrapper{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    background-color:#f9f9f9;
    width:600px;
    overflow:hidden;
}
#steps{
    width:600px;
    overflow:hidden;
}
.step{
    float:left;
    width:600px;
}

The class step will be given to each fieldset. Let’s style the navigation:

#navigation{
    height:45px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
#navigation ul{
    list-style:none;
	float:left;
	margin-left:22px;
}
#navigation ul li{
	float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
	margin:0px 2px;
}

The single link elements will have a neat CSS3 gradient as background:

#navigation ul li a{
    display:block;
    height:45px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:45px;
    padding:0px 20px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}
#navigation ul li a:hover,
#navigation ul li.selected a{
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

When a step get’s validated, we will either add a span indicating that everything is fine, or a span that shows that something is wrong in the form step:

span.checked{
    background:transparent url(../images/checked.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
span.error{
    background:transparent url(../images/error.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}

The styles for the form elements look as follows:

#steps form fieldset{
    border:none;
    padding-bottom:20px;
}
#steps form legend{
    text-align:left;
    background-color:#f0f0f0;
    color:#666;
    font-size:24px;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    float:left;
    width:590px;
    padding:5px 0px 5px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}
#steps form p{
    float:left;
    clear:both;
    margin:5px 0px;
    background-color:#f4f4f4;
    border:1px solid #fff;
    width:400px;
    padding:10px;
    margin-left:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
    width:160px;
    float:left;
    text-align:right;
    margin-right:15px;
    line-height:26px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    background: #ffffff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
}
#steps form input:focus{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:#FFFEEF;
}
#steps form p.submit{
    background:none;
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
#steps form button {
	border:none;
	outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}
#steps form button:hover {
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

And now, let’s add some JavaScript magic!

The JavaScript

In our function we will first take care of the display of the slider. For that we need to calculate the width of the elements inside. We will also take care of the sliding when we tab through the inputs. When the user hits tab when he is in the last input of a fieldset, we make the next fieldset slide into place and focus on the first field.

The validation of the form is based on all inputs being required fields. If we slide to the next fieldset and did not fill out all the inputs of the previous one, we will mark the missing inputs with a red background and add our little error span to the navigation item. If everything was fine, we will add the span with the check mark so that the user knows, the step was correct. We will not allow the user to submit the form if one of the steps contains errors.

$(function() {
	/*
	number of fieldsets
	*/
	var fieldsetCount = $('#formElem').children().length;

	/*
	current position of fieldset / navigation link
	*/
	var current 	= 1;

	/*
	sum and save the widths of each one of the fieldsets
	set the final sum as the total width of the steps element
	*/
	var stepsWidth	= 0;
    var widths 		= new Array();
	$('#steps .step').each(function(i){
        var $step 		= $(this);
		widths[i]  		= stepsWidth;
        stepsWidth	 	+= $step.width();
    });
	$('#steps').width(stepsWidth);

	/*
	to avoid problems in IE, focus the first input of the form
	*/
	$('#formElem').children(':first').find(':input:first').focus();	

	/*
	show the navigation bar
	*/
	$('#navigation').show();

	/*
	when clicking on a navigation link
	the form slides to the corresponding fieldset
	*/
    $('#navigation a').bind('click',function(e){
		var $this	= $(this);
		var prev	= current;
		$this.closest('ul').find('li').removeClass('selected');
        $this.parent().addClass('selected');
		/*
		we store the position of the link
		in the current variable
		*/
		current = $this.parent().index() + 1;
		/*
		animate / slide to the next or to the corresponding
		fieldset. The order of the links in the navigation
		is the order of the fieldsets.
		Also, after sliding, we trigger the focus on the first
		input element of the new fieldset
		If we clicked on the last link (confirmation), then we validate
		all the fieldsets, otherwise we validate the previous one
		before the form slided
		*/
        $('#steps').stop().animate({
            marginLeft: '-' + widths[current-1] + 'px'
        },500,function(){
			if(current == fieldsetCount)
				validateSteps();
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
		});
        e.preventDefault();
    });

	/*
	clicking on the tab (on the last input of each fieldset), makes the form
	slide to the next step
	*/
	$('#formElem > fieldset').each(function(){
		var $fieldset = $(this);
		$fieldset.children(':last').find(':input').keydown(function(e){
			if (e.which == 9){
				$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
				/* force the blur for validation */
				$(this).blur();
				e.preventDefault();
			}
		});
	});

	/*
	validates errors on all the fieldsets
	records if the form has errors in $('#formElem').data()
	*/
	function validateSteps(){
		var FormErrors = false;
		for(var i = 1; i < fieldsetCount; ++i){
			var error = validateStep(i);
			if(error == -1)
				FormErrors = true;
		}
		$('#formElem').data('errors',FormErrors);
	}

	/*
	validates one fieldset
	and returns -1 if errors found, or 1 if not
	*/
	function validateStep(step){
		if(step == fieldsetCount) return;

		var error = 1;
		var hasError = false;
		$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
			var $this 		= $(this);
			var valueLength = jQuery.trim($this.val()).length;

			if(valueLength == ''){
				hasError = true;
				$this.css('background-color','#FFEDEF');
			}
			else
				$this.css('background-color','#FFFFFF');
		});
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		$link.parent().find('.error,.checked').remove();

		var valclass = 'checked';
		if(hasError){
			error = -1;
			valclass = 'error';
		}
		$('<span class="'+valclass+'"></span>').insertAfter($link);

		return error;
	}

	/*
	if there are errors don't allow the user to submit
	*/
	$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Please correct the errors in the Form');
			return false;
		}
	});
});

And that’s it! I hope you liked the sliding form idea!

View demoDownload source

For the clock, I have used images of different dials (which I have downloaded from google) as background. Upon which the clock is drawn through Raphaël.  Luckily, for me, the center of these dials images exactly coincides with the center for clock. Another option I provided in the demo is to change the color of second, minute and hour hand of the clock according to the dial selected by the user.

Source

http://rohitsengar.cueblocks.net/analog-clock-using-javascript-raphael/

Demo

http://rohitsengar.cueblocks.net/analog-clock/