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!
i looked at my site on the iphone and everything works just fine except the fixed scrollbar at top doesn’t stay fixed. Is their a way around this?
really good tutorial!
BUT how you manage a variable number of object? I mean if the number of scroll box will increase or decrease?
this layout have a fix layout
“width: 6000px;”
:-S
This was a really useful tutorial but I’m having trouble implementing Lightbox2 with it. Usually what happens is the smooth scrolling doesn’t work,it doesn’t skip to the right area, and the the black opacity only shows up on the far left.
If anyone has a solution it would be really helpful. Thanks in advance!
Thank you soooo much for this! You really made my day!
@Rosie: If you wanted the bar to attach itself to the right side, you could go into the CSS and find the section “#menu ul li”. Change the property “display:inline” to “display:block” to get the nav bar to list itself up and down instead of left to right. Then remove the transparency on the bar (delete “z-index: 500; filter: alpha(opacity=75); opacity: .75;” from #menu) and stretch it the width of the page (add “height:100%;” to #menu). That oughta do it!
@Lebenou: To hide the horizontal scrolling bar, just add “overflow-x:hidden;” to the css code under “body”.
@Ruana: Thanks for those links- super helpful!
@Rob: I also want to start the site in the center; say, at box#3. Has anyone figured out how to get there yet?
And time for my own question: when I download the whole package and open it up in Dreamweaver, previewing in Safari errors out as though I’ve declined to run the ActiveX… but I don’t get an allow or error message. Previews just fine in IE7. Anyone else running into this?
Thanks for the awesome tutorial!
C
FIrst of all thanks a lot for writting such a nice piece! This is exactly what I was looking for.
However, strange thing happened. At first I went through the tutorial and the result was perfect in my Safari. But after some time it suddenly stopped to work! The strandest part is that everything is fine in Opera and Firefox, as well as the on-line demo is working in Safari, but not the demo files downloaded locally (from the zip at the end of the tutorial).
Where the problem may be?
nice tutorial
it helps me a lote
so how can we do it with easing effect
Not working in IE 8
nice easy thnx
First of all: Thank you for the great tutorial! I was working on a horizontal website, but it was really hard. Your tutorial really helped me out!
Second: @Rob: To start the webpage at (for example) box 5, you need to edit the url to that webpage and add ‘#box5′ to the end.
example: My website is called http://www.muurtegel.com and the horizontal page is located at http://www.muurtegel.com/portfolio
To start the page at the center box (box 5) I edit the url to the portfolio site to: ‘www.muurtegel.com/portfolio#box5′
It works for me
Nice work guys. Yeah I’ve seen plenty of examples on the net using that technology and like it a lot. I think it uses the screen realestate a lot better than vertical scroll bars. Thanks for sharing guys…
Love the horizontal sliding, but unfortunately this doesn’t work in Safari…
I followed this tutorial to a T and cannot get jQuery to work :/ I have no idea why. I even downloaded the zipped package and it still doesn’t work.
For jQuery to work do I need to upload my site onto a server or should it work locally?
thanks!
Amazing tutorial.
Thanks for sharing man! It was really helpful!
hey. this is absolutely great!!!!!! thank you very very much for this!!!!!!!!!!!
Hi,
Great tut ~ thanks!!!! …but it isn’t working on Safari – Mac. Anyone have any thoughts?
Thanks again!
Carl
Ok I have a question? Why are web Browsers still thinking in 2d not 3d… Meaning Why can’t we scroll left or up in the negative? I understand the browser has to have a horizontal and vertical starting point of 0… But why don’t they think out side of the box and allow developers the ability so send the user any where on a page (and the word “page” should be changed to “space”). Breaking the space into four quadrants. Top Left, Top Right, Left, and Right (Right is where we will start. It’s the normal starting position. The space we currently use).. This would allow for creative web page design.
Thanks a lot for this tutorial, it fits what I need to do perfectly!
Awesome.
PS. Being able to break the rules is one of the great things about knowing the rules. Great work man.
this is really nice but bugs out in safari once downloaded (its fine when viewed on the site).
I’ve used local copies of jquery library but couldn’y fix the issue.
Any ideas?
I have managed to center the boxes utilizing a full-screen option on a MacBook Pro. Obviously, it will look off on a bigger screen size, but I am working on a way to do this as well. Anybody who wants the css for the MacBook Pro centered CSS, feel free to ask via the contact form on our site.