The standard method of navigating a webpage has traditionally been to vertically scroll. On occasions a site may present some horizontal movement, but this is usually confined to the ‘viewing window’ within a vertical page and the elements come from the left or right into view.
It was, then, only a matter of time before someone using the fairly ubiquitous jQuery library would break that mould and present us with something different.
Although not the only example of this kind of navigation, the small jQuery plugin called ‘Full Content’ is a great place to start. Instead of scrolling vertically to the next area of content, the user is now able to define a content block’s position in the ‘map-space’. This means it can be offset a good distance in any direction from the content that is being viewed. When a user clicks one of the links, their browser will take them over to the new content – the effect is achieved by disabling horizontal scroll bars in the browser using a CSS method:
body { overflow-x: hidden; overflow-y: hidden; }
It even offers the developer the ability to include vertical scrolling in some sections via:
stage1 { overflow-y: auto; }
This means that the traditional and familiar aspect of vertical scrolling is maintained, but a new and interesting method of navigation is also introduced, giving the website a vast and spacious feel.
Combined with some parallax scrolling, this could create quite a spectacular effect, setting a website apart from its peers.
- Making colours count - February 22, 2014
- Facebook opens up origami offering - February 15, 2014
- Hello Ruby - February 8, 2014
