As users we’re accustomed to being able to scroll up and down a page on a website. It simply makes sense. But there are some rare cases when it’s fun to experiment. Lately I’ve been seeing more and more people designing horizontal websites, mostly portfolio sites.
Those kind of layouts simply scroll horizontally instead of vertically. While this format may not be suitable for most projects, it’s always interesting to think outside the box and see what else can be done instead of always sticking to the traditional ways.
Of course horizontal scrolling websites have some flaws. They are mostly related to the user experience and usability. But that’s what happens when you push the boundaries, even just a little bit.
Here are two very important things to keep in mind should you decide to build a horizontal scrolling website:
- Users may not understand right away that they can scroll horizontally. If it takes too long for them to figure it out, they’ll leave.
- The computer mouse is not made for scrolling horizontally but vertically.
So, even though the idea of a horizontal scrolling site has some flaws, it’s still possible to create one and try to find workarounds. In this tutorial we’ll go through the process of writing the markup and CSS for a horizontal site, and we’ll also use jQuery and some nice plugins to scroll smoothly across the page.
Here’s the idea:
Let’s get started!
What We’ll Need
First of all, we will need an index.html, a style.css file and a logo. We will also need the jQuery library and the ScrollTo and LocalScroll plugins. You can download those files now.
We’ll start by writing out markup, then the CSS, and then we’ll integrate jQuery and the two plugins. But first let’s have a look the the demos. One is simply html and css and the second one has jQuery.
Demo Without jQuery
Demo With jQuery
Let’s Write Our HTML
We’ll start by declaring a Doctype (1.0 Transitional in this case). Then we’ll reference our stylesheet and jQuery library and plugins. You can create your index.html and style.css files now.
Here’s the head of our document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Horizontal Scrolling Website With jQuery</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'> </script> <script src="js/jquery.localscroll-min.js" type="text/javascript"> </script> <script src="js/jquery.scrollTo-min.js" type="text/javascript"> </script> </head>
You’ll notice from the code above that I chose to let Google host the jQuery library and that I put the 2 plugins I downloaded in a folder called /js. We’ll come back to the head section a little later and write our jQuery but this is fine for now.
Now let’s create our menu:
<body> <a name="home"></a> <div id="menu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#box1">Box 1</a></li> <li><a href="#box2">Box 2</a></li> <li><a href="#box3">Box 3</a></li> <li><a href="#box4">Box 4</a></li> <li><a href="#box5">Box 5</a></li> <li><a href="#box6">Box 6</a></li> <li><a href="#box7">Box 7</a></li> <li><a href="#box8">Box 8</a></li> </ul> </div>
In the menu, I put a home link and then 8 more links that will point to our content boxes, which we’ll create in the next step. I also added an anchor link called ‘home’.
I went with 8 content boxes because I figured it’d be perfect for the purpose of this tutorial. Each box will have a set width and the over all width of our layout will exceed the browser window resulting in a horizontal scrollbar. Which is what we want, right?
Here’s our main content area including a div titled ‘header’ which contains a logo and an introduction paragraph. Much like we’re used to seeing on ‘normal’ websites. The 8 content boxes have a H2 and a paragraph with some Lorem Ipsum to fill up some space.
<div id="container"> <div id="header"> <h1><img src="images/logo.png" alt="Logo"></h1> <p>This simple page is an example of a horizontal scrolling website. While we may not be used to this format it can certainly be used in creative ways. After all, we either read from left to right or from right to left. Right?</p> </div> <div id="box1" class="box"> <h2><a name="box1">First Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box2" class="box"> <h2><a name="box2">Second Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box3" class="box"> <h2><a name="box3">Third Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box4" class="box"> <h2><a name="box4">Fourth Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box5" class="box"> <h2><a name="box5">Fifth Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box6" class="box"> <h2><a name="box6">Sixth Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box7" class="box"> <h2><a name="box7">Seventh Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> <div id="box8" class="box"> <h2><a name="box8">Eighth Box</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> </div> </div>
See how I added the anchors to the H2 tags using ‘a name’? We’ll need those so that when a menu item is clicked, the browser will take the user to the right box.
You can then end the document with the usual closing body and html tags. On to the CSS!
Let’s Style This Puppy!
Here is the CSS in it’s entirety. I’ll explain the horizontal scroll bar and overall width in a minute:
body {
background:#0a0a0a;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}
a {
color: #ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:visited {
color: #aaaaaa;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:hover {
color: ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
h1 {
width: 600px;
border: none;
padding: 35px 0 0 0;
}
h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}
p {
color:#fff;
font-size: 20px;
line-height: 38px;
font-family: 'Trebuchet MS', verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
img {
border:none;
}
#header {
width: 360px;
float: left;
margin: 0 15px 0 0;
padding: 0;
}
#menu {
background: #333333;
position: fixed;
top: 40px;
left: 0;
border: 1px solid #000;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}
#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 120px; left: 40px;
width: 6000px;
margin: 0;
padding: 0;
}
.box {
background: #111111;
border: 3px dashed #222222;
width: 500px;
float: left;
line-height: 22px;
margin: 30px;
padding: 5px 30px 30px 30px;
}
.box p {
color:#aaaaaa;
font-size: 16px;
line-height:24px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
As you can see, the ‘container’ div has a width of 6000px and each one of the 8 boxes has a width of 500px. If we add up the width of the header section, paddings and margins, we still have some room left, so we’re good.
I know there are other ways to achieve a similar result, using tables for examples, but I wanted to go with CSS and divs only since it works fine. This may not be the best solution for dynamic websites like blogs since the content length may vary, but even then it could be adapted. I find it works well for a static website like a portfolio.
You’ll see I made the menu transparent using the following lines:
filter: alpha(opacity=75); opacity: .75;
The reason I put some transparency in the menu was because I used fixed positioning (left) on the menu div. I want the menu to be always visible no matter what box the user is viewing and no matter the size of the browser window. I also used z-index to make sure the menu would always be on top.
As you may know IE6 doesn’t like fixed positioning and transparency, so you could always remove the transparency, but we’ll still need the fixed positioning for modern browsers. After all, when IE6 came out, horizontal websites were not exactly the latest trend, so we can’t really complain.
Here’s a demo of what we have so far, without jQuery
Try clicking on a menu item! Depending on the size of your browser window you’ll notice that the anchor links simply don’t work if the box associated with the link you’re clicking on is visible. That’s one of the problems with anchor links on a horizontal website. We’ll use jQuery to make this behave more nicely. jQuery will also make the scrolling much smoother. Let’s get to it!
jQuery And ScrollTo/LocalScroll
Remember the 2 jQuery plugins we downloaded? The LocalScroll plugin needs the ScrollTo plugin to work. That’s why we referenced to both (+ the jQuery library) in our head section earlier in this tutorial. Now we’ll write just a couple lines of jQuery, like this:
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
This code goes in between the last referenced file in the header and the end of the head.
The LocalScroll plugin is simply wonderful! It does all the job for us really. The ‘defaults.axis’ value of ‘x’ tells the browser to scroll horizontal. A value of ‘y’ would be to scroll vertically. Then the LocalScroll plugin will simply grab our anchor links and do the rest automatically.
Click here to try out the demo with jQuery
Note that it may behave differently depending on the browser you’re using. It works pretty much the same in all modern browsers but is (expectably) a little buggy in IE6 and IE7.
Demos And Downloads
I hope you enjoyed this tutorial! As I mentioned earlier, this is just an example of what can be done using HTML, css, 2 jQuery plugins and some pretty basic code. You could of course take this much further and scroll vertically and horizontally, or even diagonally! It’s up to you!
Here are the 2 demos again:
Demo Without jQuery
Demo With jQuery
You can also download a zip file containing the 2 demos with all the necessary files. Feel free to experiment!
Not something I’d do everyday, but the article is well put together and your content is sound. I can see the use for this on a site that’s trying to stand out from the crowd.
Another approach based on your scrolling center section is to absolutely position a div block in the center and set the overflow value to allow a scrollbar and give it a width like you do for your content here. Then with your floating elements you’ll get the same (or similar) effect!
Good article!
Woow great tutorial. THX for shareing
This is a good article on a foolish topic.
In most cases, “pushing the boundaries” is worthless. It’s usually shorthand for, “using some fancy effect that users hate.” It also says: “I’m a web designer, but I wish I were an artist.”
Web designers get bored making websites, because most websites are basically the same (apart from the content). Boredom, and the desire to be admired by their peers, leads them to “pushing the boundaries” — or pushing the envelope, or raising the bar, or creating a new paradigm, or thinking outside the box. When you hear one of these fatuous platitudes, beware: muddy thinking lurks behind it!
If a decision can only be justified by platitude, then it’s the wrong decision. In nearly every case, horizontal scrolling is a bad design choice.
And you are one of those people who thought the earth was flat…..
At one point in time pngs where taboo as well
Designed well and with the user in mind you can intuitively allow them to navigate the site. Yes it is a learning curve but if it’s a site that fits within the realm of the horizontal layout well, why not use all the space.
Come back in a few years and let me know if you fell off the edge
@Jon: Thanks! Yeah, I think positioning a div in the center would also work nicely for a similar effect. I’d have to try it
@Ivan: You’re welcome, thanks for your comment!
@MikeHopley: Well, I think we wouldn’t be where we are right now with web-design and development if it wasn’t for people pushing the boundaries (or the envelope, or whatever else you can raise or push) In fact you wouldn’t be commenting on this article if some folks, years ago, didn’t think of raising the bar and come up with WordPress. The reason things evolve, in my opinion, is because people wanna be different and try different things. I think it’d be very very boring if everything was identical. All websites don’t have to be the same. Agreed, a horizontal scrolling site may not be the best design decision, but it works for some people. You just can’t please everyone
Hi Jon; thanks for this. I’ve been working designing on a horizontal scrolling website recently, and it’s been good to see how someone else approaches the task. I’ve been using the “The Horizontal Way” JavaScript code for the scrolling effect, because it was small and easy; but it’s a bit ragged compared to the solution you’ve used, so I’m going to give jQuery a shot.
One question I have is regarding the anchor links: as far as I can tell, these are redundant. Since you’ve defined ids on each of the divs, the menu links will still work fine without the anchors. Is there a good reason to include them anyway? It seems like they just add complexity to the code without any real benefit. What are your thoughts on that?
Regards,
Bnonn
I’m not arguing against innovation; I’m arguing against justifying a decision by saying, “I’m innovating”. There is a world of difference! Effective innovation is occasionally random, but more often the innovator has a good reason for his idea.
You haven’t given a reason for horizontal scrolling, other than, “I’m innovating”. And there are powerful reasons against it (“users hate it”).
So why do it? I can think of one reason: you’re making a site where novelty is more important than user experience. This might work on a web design portfolio (although even then, I’m sceptical).
With very few exceptions, websites exist to communicate information to the user, and to enable certain user actions (such as buying a product). The design itself, although important, is subservient to the message. A design choice that significantly reduces usability is a bad choice.
In other words, designers need to think about themselves less (“I want to make cool stuff and be admired”) and think about their users more (“How can I make this site as intuitive and effortless as possible?”). Sadly, the latter is less fun than the former.
I think web design is boring, and is becoming more so. In the early days, when websites were crap, at least we all enjoyed the “anything goes” aesthetic. The standards were low, so you could indulge in dubious excesses of creativity. Nowadays, we’ve become more professional; websites are more similar to each other than before, not less.
From a designer’s point of view, it’s depressing: you can’t innovate as much, now the medium has become more established (because in most cases, your innovation will be worse than the convention). From a user’s point of view, it’s great: websites look better, they work better, and they are more predictable (they follow conventions).
To avoid depression, I prefer to think of myself as a user foremost, and as a designer last.
Hence my website: conventional design, but brilliant content. What then shall I do, if I feel the need to express artistry rather than craftsmanship, or individuality rather than conformity? I shall write, or take up painting, or buy a jaunty hat. 
Well done Jon, thank you.
@MikeHopley: I did a quick search and found the Badminton Bible. Please tell us this is not you. I would be so embarrassed for you.
Long live horizontal scrolling – for the few of us that appreciate it, when applied appropriately.
Thanks for the tutorial Jon. I’ve always wanted to have a good “look under the hood” of a horizontal scrolling website.
I hope someday I have a chance to use this tutorial in my freelance business.
Hi is it possible to modify the code so it centres each box you select? (Instead of aligning it to the left hand edge of the browser). I.e. When you click a menu item and go to the corresponding box, that box is centered within the browser window…
Please help if you can!
Hi, I really like this tutorial as it’s helped me to “play” with some of the features of css and jquery.
Similar to mike’s question, how do you centre each box?
Thaaaaaaaaaaaanks! it’s working like a charm!
works great in all browsers except IE 6, any body got any idea how to make the menu stay put in IE 6?
Great tutorial been looking for something like this for ages
Manny
you just saved me at least an hour or 2… thx!
Hi, thanks for the tutorial, really cool. One question: is there a way to just use back and forward arrows going to next or previous link, instead of specifying each link??
Thanks very much,
Oats.
Hi, nice tutorial. I just have a question: how can I move the menu bar to the right side of the page with a logo on the left side and fix them there?
Thanks,
Rosie
Hey!
I saw someone posted on how you would center the boxes so only one box were visible. Could you perhaps explain how to achieve this effect?
Greatly appriciated!
The tutorial rocked!
@MikeHopley: sounds like the web business has got you down and depressed!
Anyway thanks for the tutorial! Can’t wait to try it out. I’m just wondering if anyone knows if its possible to take an example like this and start the page off on the far right (instead of the left)? Or even start on the far left and automatically scroll to the right when the user arrives at the site.
Thanks!
Hi ,
Great tutorial!! : thanks!
As mike, i’m looking for a solution to centres each box you select. (Instead of aligning it to the left hand edge of the browser).
And how can I mask the horizontal scrolling bar of the browser : i want to navigate only with the navigation menu on the top…
Thanks for help!
Loving the tutorial, I need it to centre on the page but this is a great place to start so thanks.
Does anyone have any developments on this code?
Cheers
Ryan
And what if we want the site to start in the center (page 5 in your example)?
I’ve tried all the usual and after 3 days of tearing my hair out hand you the gauntlet……
Although this is a while after you posted, can’t you just add #page-5 with page five being whatever you choose?
First of all: thank you for this very clear written tutorial.
I played a little with the code and it works absolutely sweet in IE7 and Firefox. Not tested IE6 and Safari yet.
@MikeHopley you wrote: “In most cases, “pushing the boundaries” is worthless”. I totally disagree. If developers weren’t pushing the boundaries we still would create websites in the 1998-style. Of course, content should be king – always. However, it’s not (as you wrote): “I’m a web designer but I wish I were an artist.” As a web designer/web developer I AM an artist as well. A great surfing experience is based on several equally important things. The page must provide the information the user is looking for. It must be accessible at least with the common browsers. It has to be user friendly (also for beginners) AND it MUST be pleasing for the eye. This is were the artistic skills become an issue.
Innovative or experimental websites are certainly not for every client and/or business. But they can be great for showing off your skills and for the, well, in my view necessary pushing of the boundaries. If web design becomes boring, as you say – and I agree to a certain extent, then it’s even more important to explore new ways in our field.
Sorry for the double posting.
@readers who asked for help on centering the boxes you may want to check out the following two resources:
http://woork.blogspot.com/2009/02/useful-tips-to-design-horizontal.html
http://line25.com/articles/horizontally-scrolling-websites-showcase-and-tutorials
The latter site is where I came from and it offers a list of sites and tutorial-sites on horizontal scrolling pages.