Hey guys. As a follow up to HTML5 in Under 5 Minutes, in this week’s screencast I’m going to show you how to create a useful piece of jQuery code for making your own graphical tooltips and the I’m going to show you how to turn it into a fully customizable jQuery plugin. Click on the preview above to go to the dedicated micro-site for this screencast or here to start watching it now. You can also download the sources from that page. I hope it helps!

Hey guys. I recorded you a screencast on HTML5 over the weekend – I hope you like it!. It covers a lot of the core features HTML5 will bring including code samples for any material covered. Just click on the HTML5 thumbnail above to be taken to the HTML5 in under 5 minutes micro-site where you can play or download the screencast. I hope it comes in useful! Thanks – Addy.

Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below!

Demos and text are available for anyone that wants to read/see them in the rest of the post.

View Demo  Download Source

Today’s animations are created using a really useful jQuery plugin called Spritely. You can download the Spritely plugin here. Spritely allows you to create your own animations using two simple functions.The pan() function which lets you pan (move) an image across the screen in a particular direction; and the sprite() function which lets you work with multiple frames and add more complex behaviours to your animations. In the screencast I show you how to first use pan() to create a moving silhouette of a city and then we use the sprite() function to add an animated plane to it. To help you with your own creations, I’m including code for both of these below.

Basic Example using Pan()

How complex your animations can get really depend on what you’re trying to achieve. If you’re trying to create a moving landscape scene, you’ll probably be able to knock that out fairly quickly because all you need to do is pan your images across the screen at a particular speed.

Here’s the sample code I used to create the city skyline panning effect:

The jQuery

			$(document).ready(function() {
				$('#city').pan({fps: 30, speed: 2, dir: 'left'});
				});

The HTML

The CSS

		body {
			background: #fff;
			margin:0 auto;
		}

		/*City Silhouette*/
		#city {
			position: absolute;
			width: 99%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;
			border: 1px solid black;
		}

Advanced Example Using Pan() & Sprite()

If however you’d like to create something a little more detailed like a 2D or 3D character with movement, you’ll need to use a package like Maya, 3DMax or even Flash to output the animation as frames with a transparent background. Next, follow my steps below to create the jQuery animation for it.

1. Output your frames as transparent PNG files to a directory on your drive. Because animation can sometimes be a memory intensive task, you’ll want to minimize this as much as possible. This can be achieved by outputting 1 frame for every 5-15 in your original animation. Don’t worry! The Spritely plugin supports setting custom frame-rates so you can still make your final animation look relatively smooth.
2. Use a Sprite Generation tool such as CSSSprit.es or CSSSprites.com to stitch your frames together as a single image file. Try to keep the final filesize down to within a few megabytes (I would say 2MB should really be the higher end of that filesize).
3. Next animate your content using Spritely as I did in my demo. You can find some sample code for this below.

The jQuery

  (function($) {
			$(document).ready(function() {

			    /* City 1 */
				$('#city1').pan({fps: 30, speed: 1, dir: 'right'}); 

				/* City 2 - This gives the animation a depth of perspective
				as one city silhoette is slightly away from the other*/
				$('#city2').pan({fps: 30, speed: 2, dir: 'right'}); 

				/*The clouds and sky*/
				$('#sky').pan({fps: 30, speed: 0.5, dir: 'right'}); 

				/*The Plane animation*/
				var stage_left = (($('body').width() - 866) / 2);
				var stage_top = 30;

				/* Spritely's sprite function allows you to define
				more complex animations which contain more than 1
				frame. You can also use the spRandom feature to define
				random behaviour.
				*/
				$('#plane1').sprite({fps: 8, no_of_frames: 14})
					.spRandom({
						top: 40,
						left: stage_left + 20,
						right: 400,
						bottom: 140,
						speed: 3500,
						pause: 1000
					});

			});
		})(jQuery);
  

The HTML

The CSS

			body
			{
			background: #fff;
			margin:0 auto;
		     }

		#sky {
		  position:absolute;
		  width:100%;
		  height: 416px;
		  background: transparent url(sky.jpg) 0 0px repeat-x; 

		}

		#city {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;

		}

		#city2 {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city2.png) 0 130px repeat-x;
		}

		#plane1 {
			position: absolute;
			width: 730px;
			height: 167px;
			background: transparent url(planesprite.png) 0 50px no-repeat;
		}

		#content {

		   width: 100%;
		   position:relative;
		   clear:both;
		}

		#leftcontent {
		  width:70%;
		}

		#rightcontent {
		  width:30%;
		  background-color:blue;
		}

And thats it!. As with all my ‘Under 5 Minutes’ series, you obviously won’t have learned absolutely everything there is to know about sprite animation, but hopefully you will have picked up many of the basics. Please feel free to download the source files and play around with them – I hope they come in useful!

Demo & Download

View Demo  Download Source

Conclusion

This tutorial was created to demonstrate how to create animations in jQuery using sprites. This powerful technique is a simple, effective way of creating cross-browser friendly animations that don’t need to rely on Flash or any third-party plugins to function. To see more demos of how Spritely is being used to add rich animated experiences to web pages, feel free to have a look at the Spritely gallery here. If you enjoyed today’s post, please share it with your friends and colleagues by clicking jQuery & CSS Sprite Animation Explained In Under 5 Minutes

After a few weeks away in the US, I’m back with a brand new jQuery post – this week taking a look at a new style of navigation menu. jQuery has made it simple for developers to define an idea or wireframe for a component and then implement it reasonably quickly, which has certainly helped it become the most popular JavaScript Framework out there at the moment. I feel like some of the navigation options out there right now don’t provide you with enough information about the sections of a site you can visit, so today we’re going to learn how to create a menu that solves this problem. 

Here’s what we’re going to be creating in it’s final form.

First, I’m going to define what the menu can do and we’ll take a look at a rough wireframe I created using MockFlow’s free wireframe generator. We want to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display. This can be seen in the wireframe below.

Next, let’s begin to create this menu using some basic HTML structure and CSS. We’re going to need a holder for the menu, the menu itself, each item and a div for each of the drop-down elements we’re going to display information in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="menuBarHolder">
 
<ul id="menuBar">
 
<li class="firstchild"><a href="javascript:#">Home</a>
 
<div class="menuInfo">I am some text about the home section</div></li>
<li><a href="javascript:#">Services</a>
 
<div class="menuInfo">I am some text about the services section</div></li>
<li><a href="javascript:#">Clients</a>
 
<div class="menuInfo">I am some text about the clients section</div></li>
<li><a href="javascript:#">Portfolio</a>
 
<div class="menuInfo">I am some text about the portfolio section</div></li>
<li><a href="javascript:#">About</a>
 
<div class="menuInfo">I am some text about the about section</div></li>
<li><a href="javascript:#">Blog</a>
 
<div class="menuInfo">I am some text about the blog section</div></li>
<li><a href="javascript:#">Follow</a>
 
<div class="menuInfo">I am some text about the follow section</div></li>
<li><a href="javascript:#">Contact</a>
 
<div class="menuInfo">I am some text about the contact section</div></li>
 
</ul>
 
</div>
</div>

We’re now going to style this content. Because we only want to display the extra information for each section when a user hovers over an “li” element, we’re going to hide the information divs until they’re needed. I’ve also noticed that a lot of the popular browsers you guys use (IE aside) support CSS rounded corners, so I’m including this effect to be used for the drop-down menus – it’s visually more pleasing to the eye than corners in some designs, and if you’d prefer you can drop the last few terms in the “menuInfo” class.

This menu is completely cross-browser compatible (yay!) so it’s possible to use rounded corner definitions without needing to worry about how they’ll render in older browsers – everything should gracefully degrade as per necessary.

 
#menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
#container { margin-top:100px;}
#menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.firstchild { border-left:1px solid #ccc;}
.menuInfo { cursor:hand; background-color:#000; color:#fff;
width:74px; font-size:11px;height:100px; padding:3px; display:none;
position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px;
-khtml-border-radius-bottomleft: 5px;
 border-radius-bottomright: 5px;
border-radius-bottomleft: 5px;
}

Finally, let’s take a look at the jQuery for our Fluid Menu. We want to add hover cases to each element of our menu so that when a user moves their mouse over a menu-item, the information div animates into place elegantly. To achieve this, we’re simply going to use jQuery’s built-in slideDown and slideUp effects as they provide the most efficient way to achieve the effect we want with the least amount of code.

We also want users to be able to click on the entire “li” element rather than the links inside them, so we’re going to bind a pseduo-click event to all the menu’s li’s by means of document.location.href and an attribute check on the href of their child links.This is achieved as follows:

$(document).ready(function()
{
 
$('#menuBar li').click(function()
{
  var url = $(this).find('a').attr('href');
  document.location.href = url;
 
});
 
$('#menuBar li').hover(function()
{
   $(this).find('.menuInfo').slideDown();
},
function()
{
  $(this).find('.menuInfo').slideUp();
 
});
 
});

and that’s it!. You can now easily set additional information for any of the menu items in your menu-bar and if needed you can easily extend the length of the drop-downs to suit your needs. You can find a demo and download links to all of the code in today’s post below.

Demo: http://addyosmani.com/resources/fluid-menu/fluid-menu.html

Download: http://addyosmani.com/resources/fluid-menu/fluid-menu.zip

So..what is a Sprite?

Back in 2004, a guy called Dave Shea came up with a simple CSS-based approach to using multiple-images across a website and combining them into a single master image. His concept was quite straight-forward -  to show a single image from the master image you would use the background-position property in CSS to define the exact position of the image to display. It was versatile enough that you could use hover, active or focus effects using the same background-position property for any element displayed. 

Why should I use them? It’s easier to just slice my images separately, right?

CSS Sprites have a lot of different advantages. The first is that your users only need to download a single image file for the graphics on your page (and thus it can complete loading much quicker). Secondly, if you need to update any of the graphics on your page, you only need to release a single image file live to have the chances come into effect. Need to optimize all your images? A master image just requires one round of optimization so you effectively cut down your work exponentially.

Before I learn how to use these Sprite things..who else is using them?

Everybody. Apple.com, Amazon, YouTube, CNN and even Digg.com use CSS Sprites for their graphics. There’s even a website that helps you generate your own Sprites by uploading your image to their server.

Okay..so how are they done?

Lets take the example of a horizontal navigation menu. Normally you would do something like this to set each of the background images for your menu items:

#nav li a {background:none no-repeat left center}

#nav li a.item1 {background-image:url(‘../img/image1.gif’)}

#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}

#nav li a.item2 {background-image:url(‘../img/image2.gif’)}

#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}

For 10 different images that’s a whole 10 different HTTP requests that need to be made. We’re talking about what.. 20-40kb in total that your page needs to load up (just for the graphics?)  We can do better than that..

If instead you use a "master" image to store all your menu backgrounds, it’s as easy as pie to use background-positioning to access the same images:

#nav li a {background-image:url(‘../img/image_nav.gif’)}

#nav li a.item1 {background-position:0px 0px}

#nav li a:hover.item1 {background-position:0px -72px}

#nav li a.item2 {background-position:0px -143px;}

#nav li a:hover.item2 {background-position:0px -215px;}

That means your page just needs to perform 1 HTTP request to grab all your image and it only takes up 15-18kb as you’re not using multiple files with their own image headers.

Here’s another quick and dirty example:

Here’s a master image which contains some pretty cool vector characters. I would like to use the third one, so using PhotoShop, Fireworks or my favourite image editor, I find out how far away the image is from the left and how far it is from the top. As you can see this is -196x and -2px. The image is 115px in width. Accessing the image is thenas simple as doing the following:

.sprite {background:url(sprite.png);} 

.thirdimage {width:115px; background-position:-196px -2px;}

And that’s it!. If I’ve successfully convinced you that CSS Sprites are the way forward,

click here to learn how to get the positions of the images in your "master" so you can start

making your own or check out the CSS Sprite generator here.