Videos tagged with jQuery for Designers

Gareth Rogers asked how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

A few years ago Digg released a very cool little visualisation tool they dubbed the Digg Spy (it's since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper to accompany LittleSnapper. It's the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I'll explain how to produce.

Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. So this episode of J4D demonstrates the same effect used in two completely different ways. The first is a scrollable timeline. A couple of readers requested a demo of how Plurk's browse timeline works. In addition, in the last month, Google releas...

jQuery has got good base level support for effects out of the box. Setting them up and using them to reveal and hide elements is exceptionally easy.However, on more than one occasion I've found that after creating a sliding effect, the animation jumps on completion.Having found the cause, I thought it only fair to share and explain why it's happening and how to avoid it.

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.

Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it. How to Solve the Problem Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the followi...

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 the 90s, and for a lot of JavaScript developers I know, one of th...

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 image. In essence the effect is just a simple combination of effect, but there's a few n...

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 has the plugins to create these effects so we don't have to go about cr...

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 to how a LightBox would work, except Daniel wants complete control of the the load event. This ...