Image Cross Fade Transition

11Apr

Background

A frequent query and request I receive (and have myself) as a developer is: "how can I fade one image in to another?".

In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left.

Image rollovers were the staple JavaScript nugget of [...]

Coda Popup Bubbles

3Mar

Background

Coda is one of the new web development tools for the Mac - and it's popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

In particular, Jorge Mesa writes to ask how to re-create their 'puff' popup bubble shown when you mouse over the download [...]

Slider Gallery

18Feb

Background

Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

This 'product slider' is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

jQuery already [...]

Image Loading

4Feb

Background

Daniel Mee requested a tutorial and writes:

I have a large image (500k). I have a loading gif (little rotating circle thingy from ajaxload.info). I want the animated gif to be swapped with the large image once it's loaded. The event may be on page load or may be some button onClick...

This is similar [...]

jQuery Tabs

18Jan

Background

Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript.

For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if [...]