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

Written by Kevin Liew on 14 Jul 2009 •
708,146 Views • Tutorials

Introduction

Content Sliding website is one of the famous and creative design techniques for portfolio website. One thing, please make sure you put the menu on every single page to avoid confusion/dizziness.

You should put the navigation menu in every single page
Or, fix the position of the menu
Let your visitors know exactly what section they're reading, like highlight the selected menu item and have a clear title

In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! Don't worry, we won't rely on javascript too much, we will use css/html for the layout and javascript only do the scrolling. And hey, it will still work even if your browser doesn't support javascript.

And, thanks to Ariel Flesler, his scrollTo plugin is simply amazing!

1. HTML

Depend on which direction you want to scroll your website, each of them have slightly different layout. For the horizontal and vertical, they use the same layout, whereas for diagonal, you have to add extra div to create the "diagonal". It sounds like a dirty trick, but hey, it works! :)

I put <a name="name"></a>, just in case some of the browsers out there don't support javascript.

Scroll Horizontally & Vertically

<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>
<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>

Scroll Diagonally

<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>
<div id="wrapper">
	<div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a> | 
				<a href="#item4" class="panel">4</a> | 
				<a href="#item5" class="panel">5</a>
			</div>
		</div>
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5 <a href="#item1" class="panel">back</a></div>
		</div>

	</div>
</div>

<div id="wrapper">
	<div id="mask">

		<!-- first row -->

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content">item1 
				<a href="#item1" class="panel">1</a> | 
				<a href="#item2" class="panel">2</a> | 
				<a href="#item3" class="panel">3</a>
			</div>
		</div>
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="clear"></div>

		<!-- second row -->		
		
		<div class="item"></div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">item2 <a href="#item1" class="panel">back</a></div>
		</div>

		<div class="item"></div>
		<div class="clear"></div>
		
		<!-- third row -->

		<div class="item"></div>
		<div class="item"></div>

		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3 <a href="#item1" class="panel">back</a></div>
		</div>
		
		<div class="clear"></div>

	</div>
</div>

2. CSS

The CSS is basically almost the same with the tabbed based content slider tutorial. I have illustrated how it works in that tutorial, so you might wanna check that out as well.

Scroll Horizontally & Diagonally

#mask : height=100%, width = 100% * total of items
.item : height=100%, width = 100% / total of items

body {
	height:100%;
	width:100%;
	margin:0;padding:0;
}

#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:0;left:0;
	background-color:#ccc;
	overflow:hidden;
}

	#mask {
		width:500%;
		height:100%;

		background-color:#eee;
	}

	.item {
		width:20%;
		height:100%;
		float:left;
		background-color:#ddd;
	}
	
	
	.content {
		width:400px;
		height:300px;
		top:20%;
		margin:0 auto;
		background-color:#aaa;
		position:relative;
	}
	
	.selected {
		background:#fff;
		font-weight:700;
	}

	.clear {
		clear:both;
	}

Scroll Vertically

The width and height are opposite from scrolling horizontally. Calculations are:

#mask : width=100%, height = 100% * total of items
.item : width=100%, height = 100% / total of items

	#mask {
		width:100%;
		height:500%;
		background-color:#eee;
	}

	.item {
		width:100%;
		height:20%;
		float:left;
		background-color:#ddd;
	}

3. Javascript

So, you must be thinking how complicated the javascript would be. You'll be surprise! its only a line of code to make the scrolling effect. Thanks to jquery.scrollTo Plugin. What we have to do is solve the layout using css/html, and the plugin will do the rest.

$(document).ready(function() {

	//get all link with class panel
	$('a.panel').click(function () {

                //reset and highlight the clicked link
		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		
		//grab the current item, to be used in resize function
		current = $(this);
		
                //scroll it to the destination
		$('#wrapper').scrollTo($(this).attr('href'), 800);		
		
                //cancel the link default behavior
		return false;
	});


	//resize all the items according to the new browser size
	$(window).resize(function () {
		
		//call the resizePanel function
		resizePanel();
	});
	
});

This resize function have 2 versions. One for vertical and another for both horizontal and diagonal. The only difference is the mask_height and mask_width.

Vertical

function resizePanel() {

	//get the browser width and height
	width = $(window).width();
	height = $(window).height();

	//get the mask height: height * total of items
	mask_height = height * $('.item').length;
		
	//set the dimension		
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: width, height: mask_height});

	//if the item is displayed incorrectly, set it to the corrent pos
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}

Horizontal & Diagonal

function resizePanel() {

	//get the browser width and height
	width = $(window).width();
	height = $(window).height();

	//get the mask width: width * total of items
	mask_width = width * $('.item').length;
		
	//set the dimension	
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	
	//if the item is displayed incorrectly, set it to the corrent pos
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}

Conclusion

That's it, simple and easy! I hope you all will enjoy it.

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. You can subscribe to my RSS for more jQuery tutorial posts! Or go to my website footer to follow me on twitter, and buy me a drink! Thanks!

Jump to Certain Item on Page Load

This is one of the most popular request. A lot of people want this content slider to display certain item on page load. It's simple, you need to use this:

$(document).ready(function () {

   $('#wrapper').scrollTo('ITEM-ID-HERE', 0); 

   ......
   ......
   ...... 
}

With that line of code, the slider will jump to the item on page load.

Update

31 Aug 2009 : Due to popular demand, and something I should have created. I have added window resize function.

Demo 1 Demo 2 Demo 3

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

792 comments

mark 14 years ago

This is awesome tutorial nice nice thanks for sharing queness...

Geoff C 14 years ago

Ok, i'm trying to make this AJAX SEO friendly... but having issues. Demo here: tristarclients.co.uk/weedon/build/index.php

Basically all i want to do is make the link #!item1 instead of #item1 (so minus the "!") so that Google doesn't ignore everything behind the hash as i'm pulling the content in dynamically via AJAX. Thought it'd be simple to change the menu href link and change the <a name> and it doesn't work....

Is there something else i'm supposed to change in jQuery?

Kevin Liew Admin 14 years ago

it's because the scrolling uses the div id in each .item. The <a name> is just a progress enhancement feature if javascript is turned off. In ID, i don't think you can add ! in front. So, what I can recommend is, leave the nav with ! mark. but in the script, this line:

$('#wrapper').scrollTo($(this).attr('href'), 800);

you need to strip the exclamation mark away, #!item become #item. Something like this, I haven't tested it

$('#wrapper').scrollTo($(this).attr('href').replace('!', ''), 800);

remove exclamation mark.

Geoff c 14 years ago

And one other problem i've encountered is at the "jump to section"... it slides there fine, but then the rest of the links don't slide they just jump with no transition... any ideas?! tristarclients.co.uk/weedon/build/about.php

Kevin Liew Admin 14 years ago

You missed the core script that does the scrolling. You have resize(), Jump to page, but no main script. Please refer to 3. Javascript section, the first block of script need to be included.

mrtavares 14 years ago

Hi, great work! Is it possible to have all three types of scrolling in one page? Horizontal, Vertical and Diagonal?

Kevin Liew Admin 14 years ago

Yes, just use the diagonal layout. If you have a 3x3 layout, just fill in all the items. ScrollTo plugin will do the rest.

gmoss 14 years ago

There is a bug in the script somewhere. If you go to the demo page, navigate to one of the slide, say #3 (doesn't matter which one). Now hit refresh (F5). And now resize the window. If you have a big enough monitor, you can see the other slides are becoming visible.

Kevin Liew Admin 14 years ago

Just did a quick check on Mac FF, Chrome and Windows IE8, they work fine :/

Kevin Liew Admin 14 years ago

I'm using 2560 res monitor.

gmoss 14 years ago

Thanks for the quick reply Kevin! It's weird. On Windows (W7 ultimate x64) using FF 10 and IE 7/8 the bug is visible. In Chrome 16 and Opera 11.61 it isn't. Let's say I scroll to slide #3. The navigation in the box will say "item3 back". If at this point I refresh (F5), Chrome 16 and Opera 11.61 will reset/refresh the page so that the navigation in the box will automatically set to the 1st slide/page. (So the navigation will display item1 1 2 3 4 5.) As such, if I resize the window, everything is fine. However, when I do this in IE 7/8 or FF 10, after refresh still the current slide will show (so in this example #3) and will not reset the slide to item #1 as in Chrome 16 or Opera 11.61.

Now, on the Mac (using an older Mac with Max OS X 10.4.11) FF 3.6.26 will exhibit this problem. Using Safari 4.1.3 and Opera 10.63 will work fine.

gmoss 14 years ago

This problem is also visible on one of the commenter's site (http://seegermattijs.be/!/) using the browsers and platforms I mentioned.

gmoss 14 years ago

The only way currently I can solve this issue, if I specify to jump to the first item in the list (as indicated at the end of the article). This way, when I refresh the page (F5) it will automatically jump back to the first slide, thus, resetting everything I assume. So when I resize the window, the various slides won't start appearing.

D 14 years ago

Hi, First of all, thank you very much for this Tutorial, it's great. I have a question, the vertical scrolling is working perfectly, but I would like to know if for example you have a section that has more content, would it be possible to actually scroll in that section only with the menu following you, then when you are done click on the next desired section? I dont really know if you understand what I mean... Complicated to explain lol Here is an example http://www.cymetriq.hu/ so you have the possibility to jump sections (pages) with the menu which is what your code does, but it is possible to scroll in one page if you have more content? Maybe more clear now... thanks in advance for your help. D.

Kevin Liew Admin 14 years ago

hmm, that's a NikeBetterWorld Parallax effect. If you want to learn more about it, please read this post:
http://www.queness.com/post/10498/build-interactive-websites-easily-with-javascript
and
http://www.queness.com/post/10498/build-interactive-websites-easily-with-javascript

However, if you want to fix position of the menu, you can use position:fixed.

D. 14 years ago

Hi Kevin, thank you so much for your quick answer and the links will have a look at those now, for the moment I've added the scroll bar, so it has a bit of the same way of working but need to add the sliding menu. Another quick question, is this adaptable to any screen size? If not is there anything I should do to adapt it? Thanks D.

Dresmine 14 years ago

Hello, im using Diagonal Sliding Content, it s pretty cool. Good work! But i need to get more divs, and also in two directions. U know what i mean? ill link you picture of this. Can u help me handle #mask and .item width , height? Grab the link: http://oi40.tinypic.com/1hf6gk.jpg

Kevin Liew Admin 14 years ago

Looks interesting. Basically, you just have to build that layout according to the calculation formula above. And then use the "jump to page" script to start it from middle top.

Dresmine 14 years ago

I already did that. It works fine with three rows, when creating fourth all crash. Calculation is 7 elem = 7*100%, and 100% divided by 7 = 14.30%. But i can see the last div in every row is moved to next row. I hope u know what i talking about. You can you can try it by yourself. Also <div> with clear is on good position. Thanks for fast reply.

Dresmine 14 years ago

Any ideas regarding this?

Kevin Liew Admin 14 years ago

Use 14%. I think the extra 0.3% pushes the last item out.

dragunz 14 years ago

Hey kevin. Its really amazing how you can come up with such a great idea. But im wondering, is there anyway I can make each of the item as a separate html document(item1.html, item2.html, item3.html) and not in the same html document?

Kevin Liew Admin 14 years ago

Sorry man, can't do it in this tutorial. That will involve ajax call etc. I have something similar, but not scrolling though. http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Pete 14 years ago

Hi,
thanks for this!! But before i will use it, does it work on an iPad? Or android pads?
Thanks a lot for making this, people like you are the base for many websites!

Kind regards,
Pete

Kevin Liew Admin 14 years ago

it should work on those platforms.

vayu 14 years ago

Hi Kevin, first of all. that's a great tutorial. Thank You very much.

I have one question I try to bulid an horizontal sliding. with 6 divs.

This is how my css looks

#mask {
width:500%;
height:100%;
background-color: transparent;
}

.item {
width:20%;
height:100%;
float:left;
background-color: transparent;
}

after i reading your post i tryed it with

#mask {
width:600%;
height:100%;
background-color: transparent;
}

.item {
width:16,70%;
height:100%;
float:left;
background-color: transparent;
}

always the last div gets vertical. whats wrong with my code? do you have an idea?

Kevin Liew Admin 14 years ago

Instead of 16.7% in .item, try 16%.

Pete 14 years ago

Hiya Kevin, i've got a simulair problem. I have 6 panels next to each other scrolling horizontal.
It doesn't matter which changes i make to the width of the mask and item, it causes the item to lose it's center.
I have to make a change because scrolling to the last item (item6) causes it to go diaganaly vertically, almost all over the place!

#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#mask {
width:500%; << 600% with six items?
height:100%;
}
.item {
width:20%; << 16%
height:100%;
float:left;
}
.content {
background-image: url(bg_images/hoofdveld.png);
background-repeat:no-repeat;
background-position: center top;
width:858px;
height:358px;
top:146px;
position:relative;
margin: 0px auto;
padding: 30px 0px 10px 15px;
}
When i make this change the item doesn't center anymore.

Hope i could make myself clear...

Thanks a lot in advance!!!

Kevin Liew Admin 14 years ago

Ok, 16% does make it a bit off..

try this:

#mask {
width:600%;
height:100%;
background-color:#eee;
}

.item {
width:16.6%;
height:100%;
float:left;
background-color:#ddd;
}

Kevin Liew Admin 14 years ago

Examples:
http://www.queness.com/resources/html/scroll/horizontal-6.html

jazkat 14 years ago

Thanks, that did the trick for me!

rick_izta668 14 years ago

Hi Kevin,
I tried using this plugin with bootstrap from twitter.
but when I tried use the modal plugin, the modal doesn't show.
http://twitter.github.com/bootstrap/javascript.html#modals

Great stuff btw!

Kevin Liew Admin 14 years ago

Not so sure what's wrong, what I can tell you to do is:
- open your console, to see if there any javascript error
- make sure you have included all the twitter bootstrap files.

rick_izta668 14 years ago

It's ok now, thanks Kevin!

Saverio Gentile 14 years ago

Hello, I been looking for some responsive vertical text scroller.. is it possible to use it for commercial purpose ?

Kevin Liew Admin 14 years ago

Yes, use it in whatever way you want.

Bryan 14 years ago

I've been using the horizontal example lately and I'm wondering if there is a way to allow for the page to scroll vertically but not horizontally until selecting a nav item?

Kevin Liew Admin 14 years ago

Wait you got me confused :) elaborate?

Previous 1 2...252627...35 36 Next

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

Introduction

1. HTML

Scroll Horizontally & Vertically

Scroll Diagonally

2. CSS

Scroll Horizontally & Diagonally

Scroll Vertically

3. Javascript

Conclusion

Jump to Certain Item on Page Load

Update

TRENDING Post

Javascript Library