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.
A nice sliding effect in Joint Media portfolio shows the captions hidden underneath each pic.
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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.
Coolspotters is a online service that makes it easy to discover and buy the products, brands, and fashions being used by your favorite celebrities – in their real lives, and in movies and television. Coolspotters’ website features an interesting and quite articulate system of displaying error messages, while you’re still filling the sign up (or [...]
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 [...]
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 [...]
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, [...]
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.