jQuery Elastic SVG Menu

View demo      Download source
Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.

Read More

Expanding Image Menu with jQuery

View demo     Download source

In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream.

Read More

Advanced jQuery Tabbed Box Techniques

Click here for demo  Download

Read More

Related Posts Slide Out Boxes with jQuery and CSS3

View demo Download source

The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.

Read More

Slide Down Box Menu with jQuery and CSS3

View demo   Download source

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Read More

Interactive Photo Desk with jQuery and CSS3

View demo   Download source

In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.

Read More

JQuery TabContainer Theme with Tab Transition Animations

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition.
Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)

Read More