20 incredible examples of smooth horizontal and vertical sliding navigation websites

There is an effect that I especially love on the websites, I don’t know if you have ever seen this effect often used for portfolios or photographic galleries, I can name it a smooth sliding navigation.

This concept is to put a lot of content, generally a bio, references lists, services, and a contact form on a same page but separated by a large space. The result is a very very long page … not really easy to browse it, but you can switch the steps with a menu and with a sliding animation.

The must on these websites:

You can load the website just one time and you can browse it really fast after its upload
You can separate the different parts of the page with different universes
You can create a really KISS website (easier using and reading)

Ok it’s my mind, I find this effect really cool, and my future website (my portfolio) will use this sliding effect!

To persuade you I done a really good selection of 20 different websites using this sliding navigation, I cheer you to visit each of them, because they are really impressive! And finally, if you are sure to dislike this effect let me know your thinking in the comment: Why you dislike?

Example:

And look at this example with a little explanation:

Showcase:

I selected 20 websites using this effect, look at this showcase now.

So thank you very much to you to read and to see my showvase, if you enjoyed this post, and this blog please follow us up on RSS or Twitter See you later by another 2expertsdesign.com tutorial!

Author: 2Expert
2ExpertsDesign is a creative and graphic design resources blog that aims to provide readers to wide variety of resources such as graphic design, logo design, web design, advertising, branding, typography, other graphic and web designer portfolio, blogging in general, resourceful material, useful tips, tutorials, photography, color, marketing and much more.

If you love it. Share it!

Discussion

6 Comments Leave a comment

javo

Muchas gracias por la mención, muy buen aporte.
Stephen Webb

I have always thought the sliding transition of effect on website worked particularly well, especially with personal portfolio sites. Usage of it is certainly quite a recent thing, as it has only come into mainstream usage over the last year or so.

I feel the only downside to the type of layout is that some users could become slightly confused by it, as it doesn’t follow the standard separate pages design that web users are used to. Also I would like to see how compatible the effect is across all browsers, particularly IE6.

Maybe a tutorial on designing such a site would be very useful, as I believe there would be a lot of planning involved in order to get the menus to work successfully. I’ll look forward to reading other users comments and their experiences of using this effect.
Federica Sibella

Nice summary, thank you.
As to sliding transition, we just completed two projects that use this kind of navigation.
The first is very experimental (and maybe confusing) but gives you the idea of what can be done with jQuery and has a nice demo that you can download for free. To visit: http://centratissimo.musings.it
The other is more “classical” but gives also a pleasant smooth effect: http://www.festeggiano.it
I hope you’ll enjoy them.
@StephenWebb: no IE6 is not supported, but both websites are fully functional across all other browsers
wonkastudio

Another example http://www.glasshouse.co.za
webdesign bremen

great great great!!! you are a really great dude,stay creative and greetings from bremen.
phpscripts

Love the varied information on your site, extremely useful.

Graphic blog, Webdesigns tip&tricks, Photoshop tutorials