The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Single page websites

  • # April 6, 2013 at 6:25 am

    How would I achieve an effect very similar to [This.]( “”)
    Can someone outline a step-by-step of how it’s done and maybe link me to some external resources please!


    # April 6, 2013 at 7:41 pm

    Is it possible for you to provide a screenshot of the website that you’re linking to? I’m on my smartphone and I’m having trouble viewing it properly. :)

    # April 6, 2013 at 7:45 pm

    That’s probably not a good thing ^^^

    # April 6, 2013 at 7:49 pm

    A full step-by-step guide would be a little much, also not knowing what you already know. Step 1 would probably be to look into jQuery.

    # April 7, 2013 at 10:47 am

    Looking at the site, my best guess would be through using JavaScript extensively. The website that you linked to uses jQuery to detect mouse events and similar things to display content. But **why** would you want to have a site like that? To confuse your users? Keep it simple – let viewers see what they came for. Don’t make them have to go the extra mile of looking for ways they could navigate around the site.

    # April 9, 2013 at 4:33 pm

    This reply has been reported for inappropriate content.

    I’d have to agree with @sharikul. The site is aesthetically pleasing, no doubt, but it wreaks of “mystery meat” nav design wise.

    And the loading? What is it loading? Why is it loading? What should I expect for waiting?

    Mr. Krug would not approve.

    # April 9, 2013 at 7:15 pm

    This reply has been reported for inappropriate content.

    This seems like a site that is in the “too modern for it’s own good” category. It’s full of all this nifty javascript and metro style navigation that is abstract. But they probably should have stopped to ask how frustrating it is to use the damn thing.

    So I’m clearly on the “don’t make a site like this” crowd :P

    # April 10, 2013 at 10:51 am

    BAD IDEA!!! Do not use this for ANYTHING! I have to agree with many others on this one. If you want to be able to achieve this for whatever reason, you need to know jquery, ajax, html, and css. I ordered it by weight of what is on the page. However, this website does not conform to any real accessibility and usability practices that I know of on this planet. May be useful on mars in a about 100 years… lol

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed