Experimental Navigation with CSS3 Transitions and Transforms

02 Feb | AUTHOR: Andy | COMMENTS: 1 Comment | TAGS:

Back in late 2010, I saw an interview with the author Iain M. Banks in which he was talking about the web. He commented that he couldn’t understand why web designers and developers didn’t build sites where all the pages were instantly viewable and accessible to the user.

I started thinking about the statement and if it were possible. There have been loads of sites recently that use the jQuery scrollTo plugin to enable the whole site to be on one page and then users click on the navigation to go somewhere in the site (eg Bounty Bev), but I wanted the whole page to be visible to the user.

By using this way of navigation, the usual navigation bar or column is now redundant which leave more space to highlight content. Always a good thing!

So in practice, we’re using CSS3 transition and transform properties, and in particular transform: scale (); You can take a look at the CSS here

Check out the basic experiment and feel free to build upon it. One thing that has come out of this experiment is that it would be really handy if the z-index property could be included in the properties that are able to transform. So if you’re on the W3C CSS Working Group, or are involved in Webkit or Firefox development feel to add it!

Oh, and by the way, this should work in Google Chrome, Safari and nightly builds of Firefox, but not IE.

↓ LEAVE A COMMENT ↓ | Back to the Lab | Back Home

Comments

  1. 07
    Feb

    this is a really cool way of presenting information to the user! it is a little confusing at first trying to get the pages to stay maximized, but I could see how this could make for some really cool sites. keep up the great design :)

    Comment by cheriana