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
Farmhouse Fare
Work at Play
Enterro da Gata
Benek Design
Front-End Design Conference
Pixelounge
Frank Giacobbe
Eric Johansson
Carrot Creative
Graphic Evidence
Lucuma
Artist in Design
We Shoot Bottles
Swear Words
Gavin Castleton
Vanity Claire
Synthetic Infatuation
Sursly
Wall Swaps
Contraband
Publicidade Viva
Alex Flueras
Miguel Perez
Richard McCoy
LoveBento
Visuall
Peter Pearson
Hasrimy
Suie Paparude
Dean Oakley
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
Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery
Create a Horizontal Scrolling Website
Useful tips to design horizontal website layout
Comments
Post a Comment