Posted by pkcho on July 15, 2011 at 2:53am
I came across this site and this simple, yet cool effect. Can someone explain how this was done? Click on the navigation.
My guess... full width/page carousel?
Thanks,
Joe
I came across this site and this simple, yet cool effect. Can someone explain how this was done? Click on the navigation.
My guess... full width/page carousel?
Thanks,
Joe
Comments
It looks like a bit of css
It looks like a bit of css and javascript. You right, it's basically a giant carousel. Basically, the entire site is output on the page and they are using javascript to move the inner container left and right. If you have a really wide screen (or dual monitors configured side by side), you can stretch the window really wide and see the other sections of the page.
It looks like they've styled the page so that each of the "pages" are a container that are laid outside by side with plenty of space in the horizontal margins. All of the pages are wrapped in a surrounding div that can be accessed by JS to slide back and forth. I haven't taken a look at the JS they are using, but there's probably a bit of calculation they are doing to see what coordinates the wrapping container is at and how much they have to move it left or right based on the navigation.
One of the main problems with this is that I think it kills their SEO (if they are going for that sort of thing). They are using hash tags / anchors which may be good for history, but is not so for SEO. The concept for SEO is built on the linking of pages and the context of the information on those pages. With the way this site is structured, the context of the information gets blurred.
raggax2, thanks for taking
raggax2, thanks for taking the time to explain this to me, especially the SEO part.