Line25

Horizontally Scrolling Websites Showcase & Tutorials

Read the full post

Love them or hate them, horizontally scrolling websites are scattered around the net, and there’s some fantastic examples. Unlike the traditional layout of a website that scrolls up and down, horizontal websites flip things around and scroll from left to right. Sometimes they’re enhanced with Javascript to offer an even richer user experience, such as auto-scrolling effects. Check out this collection of 30 inspiring examples, and follow on to a hand full of brilliant tutorials that give an insight into the theory and practice of creating a horizontal site of your own.

The usability of such sites is often questioned, but I personally think they’re great, although one important factor I’d advise considering is to tap into the user’s mouse scrollwheel to enable it to scroll the website horizontally. This is a technique employed by a bunch of the sites in this showcase, and as you’ll find when browsing, it makes them much more usable.

Daniel Stenberg

See the horizontally scrolling website

Farmhouse Fare

See the horizontally scrolling website

Work at Play

See the horizontally scrolling website

Enterro da Gata

See the horizontally scrolling website

Benek Design

See the horizontally scrolling website

Front-End Design Conference

See the horizontally scrolling website

Pixelounge

See the horizontally scrolling website

Frank Giacobbe

See the horizontally scrolling website

Eric Johansson

See the horizontally scrolling website

Carrot Creative

See the horizontally scrolling website

Graphic Evidence

See the horizontally scrolling website

Lucuma

See the horizontally scrolling website

Artist in Design

See the horizontally scrolling website

We Shoot Bottles

See the horizontally scrolling website

Swear Words

See the horizontally scrolling website

Gavin Castleton

See the horizontally scrolling website

Vanity Claire

See the horizontally scrolling website

Synthetic Infatuation

See the horizontally scrolling website

Sursly

See the horizontally scrolling website

Wall Swaps

See the horizontally scrolling website

Contraband

See the horizontally scrolling website

Publicidade Viva

See the horizontally scrolling website

Alex Flueras

See the horizontally scrolling website

Miguel Perez

See the horizontally scrolling website

Richard McCoy

See the horizontally scrolling website

LoveBento

See the horizontally scrolling website

Visuall

See the horizontally scrolling website

Peter Pearson

See the horizontally scrolling website

Hasrimy

See the horizontally scrolling website

Suie Paparude

See the horizontally scrolling website

Dean Oakley

See the horizontally scrolling website

How to Create Your Own Horizontally Scrolling Website

Fancy building a horizontal site of your own? Check out these handy articles and tutorials. Each one offers expert advice on the coding techniques used, and the best practices when considering going the horizontal way.

How To Create a Horizontally Scrolling Site

See the tutorial

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

See the tutorial

Create a Horizontal Scrolling Website

See the tutorial

Useful tips to design horizontal website layout

See the tutorial

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

52 Comments

  1. Kawsar Ali says:

    Nice round up Chris. The tutorials should be useful

  2. jay design says:

    Thanks for the tutorials. These are some of the nicest sites I’ve seen of late. Any idea how building a site like this using jQuery would affect SEO?

  3. Indrek says:

    Nice collection. Out of these my favorite would be Carrot Creative. The scrolling is smooth and there’s no bottom scrollbar (like some others had).

  4. Azizuan Aziz says:

    It’s very2 cool. It feel like we’re walking. lol. I wonder how blog will look like with horizontal scrolling..lol

  5. Dan Denney says:

    Great collection! Thank you very much for including the Front-End site :-)

  6. Very nice selection their!

  7. Really great collection, going to look at the tutorials Wednesday, when I have some more time.

  8. Sebastian says:

    hi chris. very nice collection – beautiful inspiration and helpful tutorials. thx. keep on rockin’!

  9. zman says:

    Great collection! How about adding subsetm.com to the list? Built in flash, but fun nonetheless. :)

  10. valeriano says:

    WOW! You gave me lot of inspirations with this post! Thanks.
    P.S. Erick’s J is the funniest and most creative.

  11. Thanks for the feature. There are some really nice designs here. Eric’s site is very cool.

  12. Josh says:

    Awesome. Now everyone has wheels on their mouses now and as designers we don’t have to worry about long pages anymore so that people will not get annoyed with scrolling… UNLESS WE DO SOME DUMB ASS THING LIKE MAKE OUR SITE SCROLL THE OTHER WAY!!! Sweet! Now we can annoy everyone again with our avant-garde website design.

  13. @Josh – This is for you! http://bit.ly/1O4uQr

    BTW, these sites are awesome. I haven’t seen some of these before. Great job on the roundup Chris!

  14. Another one I was involved with was http://armysarmy.com/. It’s a fun way to interact with a typical site.

  15. Josh says:

    @DI: Thank you, may I have another?

    It’s really the lack of UI consideration that is the subject of my rant, not the designs. But I guess omeone has to push the envelope. Maybe if there were more of these annoying side-scrollers we would get hardware on our mouses for that too.

  16. Joe says:

    There was a time when this was considered wrong, gotta love rule breakers.

  17. Farhodjon says:

    Nice article!
    Also one website to adding this article: http://www.paritet98.ru/en/

  18. Alex Flueras says:

    Hey Chris, thanks for listing my site!

  19. ian says:

    I quite like them when done well, as a lot of these example are (hence you included them!).

  20. Tyler Tate says:

    Great selection! Another good one is Rebecca Ruth Photography.

  21. Vishnu says:

    Very nice and great collection… Very much inspiring!

  22. sittipong says:

    You rock!! I’ve found horizontal style website for a long time…

    You awesome, Thanks a lot!!

  23. Ajay says:

    Great Collection! Much appreciated.

  24. Thanks for the comments everyone, and a couple of great suggestions here in the comments too!

  25. Elmar says:

    Going horizontal is surely a great way of “making a diference”. And the sites you picked are design-highlights. BUT: With upcoming netbooks (I use one with resolution of 1024×576) some of them just don’t fit to the screen and a vertical scrollbar appears and even ruins the design. Even in fullscreen view.

  26. Oh cool! Some of these sites have inspired my own website. Check it out and let me know what you think of it. Thanks!

    http://squeezeoflimestudio.com

    It also uses jQuery for horizontal navigation.

    @SiskaFlaurensia

  27. Andy says:

    Protest Boardwear’s Collection page (at least the european version) also has horizontal scrolling.

  28. Dave Pixonu says:

    Great post! Never really thought about doing a site this way before! Really love the Lucuma & Peter Pearson designs :)

  29. Gianni says:

    Really great collection!
    Where can i look the tutorials for this works?!I love this examples but i ‘don’t make…

  30. TOZE BAIAO says:

    It is a privilege to me that you Chris have mentioned one of my designs (Publicidade Viva) in this post, since I have had you in my Reader since the beginning on Spoon. It gives me power to carry one, as I am out of work at the moment.

    TZ

  31. Hahaha. Crazy stuff. I’m also in web design, but never came up to that idea. Horizontal scrolling, excellent!

  32. esranull says:

    good tutorial I love this examples but i ‘don’t make…

  33. lawoman says:

    These sites are awesome, but I’m wondering how this type of one page site effects SEO.

  34. I have tried several times to get clients to buy into this effect – loving it in these examples – great post!

    Ryan – Liminal Design

  35. Jakub says:

    In my opinion it’s more natural than vertical scrollling because our eyes working horizontal, we have horizontal screens and when we are reading magazines and books we’re moving horizontal… I’m also interested in SEO aspect of this solution

  36. Amazing.. This really rocks.. I love Visuall one. Great..

  37. mindxstudio says:

    Happy to found such nice collection, it’s Great.

  38. Good to see this collection … I thought I’d take a look and see if it could win we over to designing a website as a side horizontal scroller. Hmm … not sure they did … but very interesting designs ….

  39. Mike Cane says:

    Judging from Comments, this was published in November 09. This subject takes on added urgency now that the iPad is coming.

    See my post here:
    Web Designers: Wake Up And Smell The Touchscreen Coffee!

Sorry, comments are now closed