This stylish and powerful website illustrating MOMA‘s current exibhithion about childhood in the past century, can definitely convince me that, yes, Flash animation it’s already been replaced by HTML5 technology.
This little “greeting card” website made by Soleil Noir combines exceptionally smooth animations with geometrically stunning illustration.
Mouse hover over Fancy’s logo and an ice cream stick will slide down.
You can mix the content of this dynamic grid layout using a simple but brilliantly styled slider.
I couldn’t shake this feeling that I was missing something in my collection of navigation, so today I picked for you this fine example of textual accordion menu.
This layout, made of different of pieces of paper haphazardly mixed, creates a strange yet fascinating effect.
Dropr is a multimedia collective portfolio AKA a hosting platform that aims to bring together artists of all media & backgrounds by crushing the walls between different art fields.
The HTML droplets falling down in the website’s home page are quite a subtle and poetic effect.
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.
This is absolutely one of the best example of scrolling navigation that I’ve seen in a long time: the movement is fast but smooth and the nice ruler-shaped menu on the left keeps the user aware of the “depth” reached.
Each letter of this website’s titles is coloured in a different shade of the same colour. When you move your mouse over them, titles get a coloured background and the typography slightly changes colours.
I love the way these beautiful, full-screen photos slide underneath the layout, working as a “dynamic background”.
Actually, you can look through navigation and other graphic elements as though they were a sort of glass.
If you click the scissor icon for three times, Kickstarter‘s footer literally falls down, leaving a “transparent” background.
As long as you scroll the page and make the footer appear, a dreamy “Icarus” smoothly glides from left to right.
Moving the mouse over, makes the clouds disappear and the sign up form shine brightly.
Witty quotes fade in and out in this nice colophon displaying all the powers of css3 and html5.
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.
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).
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.
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).
Here you are a spectacular background image, with a nocturnal imaginary from Pixlogic, a web design company: every major “fragment” of this impressive collage moves in the opposite direction of your mouse, with a quite enjoyable and memorable effect.
SlideDeck is a powerful, customizable, script framework that allows you to create self-guided tours, slideshows or powerful and impressive step-by-step presentation that will enhance communication between you and your website’s users.
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.
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 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).
Odopod is a extremely creative digital agency and its site certainly is characterized by the choice of a strong and unusual color.
The menu has a hover effect with an outside expansion of the block that I find very pleasant for its fluency; a similar movement, but downwards, is activated when you expand a link.
Jeff Croft’s web site menu has a very pleasant ajax transition caused by mousing your mouse over any top label. Furthermore, the graphic of the selected item is consistent throughout the site and is used to create buttons and call-out elements.