Category Archives: Ajax & Effects

Ajax in web design: a great showcase of ajax effects, scriptacolous, javascript, dynamic content, slideshows and many other effects at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Beautiful three columns scrolling page


Interview Magazine‘s home page is nicely split into three columns: one is for the main content, one for extra features or links and one contains a big black box with the section title.
When you scroll, the latter is fixed while the others two move down until a new section starts: when it happens, the three columns stop and align simultaneously to the bottom, creating a pleasant visual effect and suggesting the beginning of a new content area.

Add to cart button with animation


Heppo.se is a Swedish ecommerce website (unfortunately, there isn’t yet an English version) with a sleek, edgy layout: though there are many reasons to be fond of this website, the motivation for having it showcased on Web & Patterns is its add-to-cart button.
When you click on it, a bright, trasparent rectangle appears above it and moves quickly over the page towards the cart area (top right corner), shrinking and fading.
This is obviously a minor feature, but it really shows a deep attention and care about the design of an effective user experience.

Mocapoke scrolling panels

Gradually revealing your website’s content is one of the most important trick to learn because helps your readers to easily focus on a few, relevant, informations and helps you keeping the design clean and uncluttered. One of the most common trend in grouping and progressive revealing content is making them slide using transitional effects (in this case, a quick, smooth vertical movement).

Muccadesign’s about page grid

Can you judge a book by its cover? And a creative agency by its about page?

I really think so: here you are a creative “about us” page form the award winning agency Muccadesign, that consists on a list of pics arranged on a simple squared grid. Faces follow your mouse movement with a nice script effect and you can read each person’s bio on a baloon that occupies exactly 4 modules.

Menu Pages expanding search form

MenuPages.com is simple: Before you go there, you come here. We’ll help you find the restaurant that’s got the food you’re craving in the neighborhood (and price range) you want. Not up for going out? Download a delivery menu from your favorite takeout place.

Being here in Milan, we cannot benefit from all this,but we still enjoy this clever search form that smoothly and instantaneously expands when you click on the advanced option (Ajax may always be blessed).

Mikey Burton’s drop down menu

mikey-burton-inspirational-menu.jpg

I was firstly drawn to Mikey Burton‘s portfolio, attracted by his beautiful illustrations and identity works. Then I’ve started admiring the unparalleled simplicity of his portfolio’s navigation menu: a simple list of gray links, with an open/close ajax effect, whose aim is just helping users to browse in the most efficient way.

This website’s menu certainly is not a scene stealer and it works well only if displayed with some strong graphic assets (otherwise it will look miserable, I presume), but the pros are:

  • easy to build and to use;
  • basically it’s html text so it is also light on code and kbs;
  • it keeps track of the visited items which are displayed as stroked links.

Fudge Photoshop-like layout

Fudge agency layout and ajax controls

We love so much Fudge Studios’ layout that we wonder whether we have to be happy for or just loathe the fact a new website is coming up.

This website simulates a photoshop (or generally a graphic editor) workspace soooo well that becomes difficult, if not impossible, writing what we’ve liked most.

The favicon shaped as a precise picker cursor? The cyan guides? The transparency grid used as a background or the cursor’s blinking in the fake text-area?

I know it sounds quite naive but I do love the way images scroll down when you roll the mouse wheel: ok it’s a quite obvious ajax effect, but, nonetheless, in this context, looks like a very smart choice.

Mobily’s pagination

Mobily's portfolio pagination

Mobily’s website oddly mixes main navigation (home, about me, contact) with portfolio’s pagination (previous/next).

That’s kind a strange and incorrect from a stricly functionalistic standpoint, but, being this website an one-page website, rather easy to navigate, I don’t think it’s a big deal if the designer wanted to shuffle things a little . Aside form that, the ajax horizontal sliding it’s quite enjoyable (if you don’t click too fast, otherwise it will make you feel dizzy).