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

Written by Kevin Liew on 14 Jul 2009 •
709,865 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

Danielle 15 years ago

This is AWESOME, I love it, BUT:

I am wondering if there's a way to have the CSS menu relationships, and also do rollover image tabs of different sizes, so that I can have rectangular buttons that change to squares on rollover, WITH this type of navigation.

Any suggestions??!?!

Kevin Liew Admin 15 years ago

yes, you just need to style the nav with css.

photoman 15 years ago

Hi Kevin, great tutorial many thanks for this. I'm using your code for a project and wondered if there is any way to get the url to change as a user clicks the navigation link eg change the url to mysite.com/#about, mysite.com/#contact.

When javascript is turned off your code does this but when its back on the url seems to be stuck on mysite.com by default. Any thoughts on if this is possible?

Kevin Liew Admin 15 years ago

You actually can do this, but it's not supported in this example. what you can do is, you need to write a script to detect the hash tag and scroll it.

document.location.hash

then, you just have to scroll it to the correct location with this on page load:

$('#wrapper').scrollTo($(ID_PUT_HERE), 0);

I think it will work without javascript as well, just make sure you have put

<a name="hashtag"></a>

Should work.

Dante 15 years ago

Try out the demo on this page and see if it is what you need http://balupton.com/projects/jquery-history
There might be a better way of doing it but that is what I'm using

novellino 15 years ago

Hello,
thanks for the tutorial, works fine! I have a question though. Can you set a starting point for the animation. For example starting for item2 instead of item 1. It this possible?
Thanks

Kevin Liew Admin 15 years ago

Yes, possible, if you check back old comments... that's a lot of them... so I paste it here anyway.

You need to put this on page load:

$('#wrapper').scrollTo($('#item3'), 0);

replace item3 to the id of the page you wish to scroll to.

Oleg 15 years ago

Could you be more detailed, please? In which part of code must I put it? Or must I write above the whole code the new function? Ex.

window.onload = init;
function init() {
$('#wrapper').scrollTo($('#item3'), 0);
}

Kevin Liew Admin 15 years ago

I think your code should work. Otherwise, just put it under:

$(document).ready()

Dante 15 years ago

Add this between the <script> tags on your html page below $(document).ready(function() {
// Reset all scrollable panes to (0,0) on browser refresh
$('#wrapper').scrollTo( "#Home", { margin: true } );
// Reset the screen to (0,0)
$.scrollTo( "#Home", { margin: true } );
$('#Home').toggleClass('selected');

Change #Home to whatever the id of the div is you want to start on (keep the #)

Richard 15 years ago

Your horizontal scroll is what I need but I can't work out how to make it work. I've tried copy-paste of the various components into an html file and I've tried just simply copying the whole of your source code and pasting into an empty html. But it doesn't work. Does jQuery need something that doesn't copy? Thanks.

Kevin Liew Admin 15 years ago

Have you downloaded the demo? I have a zip file for it. It should work because I don't have any complaints before.

Dante 15 years ago

If you download the whole .zip file that is under the demo buttons then it will work. Just modify the horizontal.html file to fit what you need.

Dani 15 years ago

I had struggled with Spry for 2 days before I found your stuff. Thanks a million!
But I do have an isseu:

I only have two "items", one on load and one that slides in/out. I like to have the links located top-right and not default top/center. It's OK with the first "item" that opens onload. When I click for the second item, it slides in perfectly.

But when I click "back" for the first item again, it doesn't work if I have placed that link top-right with css, regardless of which way. The item just snaps in place without sliding. When I remove the styling, it slides.

Any suggestions?

Cheers!
Dani

Kevin Liew Admin 15 years ago

Okay, Not sure what's happening, but my advise is, grab my demo, and remove the item and restyle it step by step. So you will know what's wrong.

Fabiano Chagas Guerra Pereira 15 years ago

ihave a problem, i make it works to all directions, but, when i apply the script to page loads in one detrmineted item, like exemple item 13, ti just go to the next one below... what it could be?

Kevin Liew Admin 15 years ago

Does it happen on all browsers or just one?

ayush 15 years ago

Thanks for the great tutorial..
I hav a ques..
I have more number of pages in my website... i want to move in multiple directions...is that possible??

Kevin Liew Admin 15 years ago

Yes, it's possible, look at the diagonal layout, you actually can put all your content to fill out all the item. Just make sure you name each of the item.

Jake 15 years ago

Hey Kevin,

Is there any way you can change the speed of the transition? I looked into the javascript code and found

o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400}

and changed the numbers there... but no matter what values I put in it didn't seem to make a difference at how face it jumped from item to item. Any insight would be helpful! Thanks!

Jake

Kevin Liew Admin 15 years ago

Not sure which part of the script did you change, I guess that's the scrollTo plugin? What you need to change is this line:

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

change 800 to something else.

Dante 15 years ago

Change those values back to what they were originally.
Then look in the html file right near the top between the <script> and </script> tags.
Look for the line that says:
$('#wrapper').scrollTo($(this).attr('href'), 800);
and change the number to whatever else you want. A larger number will be slower animation.

Arnold Babasa 15 years ago

Hi Kevin!
I LOVE your tutorial. Good work! I am having trouble though with the diagonal sliding. I know you have stressed this before but i'm still stuck. I have added an extra page (to make four instead of 3). What extra css configurations do i need to make? Thank you!

Kevin Liew Admin 15 years ago

Hi Arnold, you need to calculate this. I should have make it automatically, perhaps in the next revision:

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

in your case, the total number of items is 3. Please check the CSS section.

oleg 15 years ago

sorry, it is not clear, Kevin, could you please give real formel for css - matrix is 5x6 - all is in center rows and colums - cross system....it is realy incredible to calculate css

Kevin Liew Admin 15 years ago

I think this CSS should work on your layout:

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

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

make sure you put <div class="clear"></div> after the end of every 5 item div.

oleg 15 years ago

Kevin, the trouble is going on! (headbang)... 4 full divs, then-grey, and last, 5-th div falls down-in next stroke....

oleg 15 years ago

excuse me, that was with my border, that i have made for controllin... Thank you, friend for your great job.... i think, you could make updated tutorial with FAQ(with often asking quastions) :)

Kevin Liew Admin 15 years ago

I think i need to create a new revision to answer most of the question. I will be working on it soon.

Vinh 15 years ago

Hi folks,

Thank you for this great tut! But I need help to create "prev & next" and "up & down" buttons, if you have any idea. Thanks

Kevin Liew Admin 15 years ago

You can't do that in this tutorial.

Dante 15 years ago

Just make links in each of the divs that reference the next/prev/up/down divs.
eg. You are on div 5 and div 6 is the one next to it.
Just put in some code like this and it will scroll to it:
<a href="#Six" class="panel">NEXT</a>|

Do the same for all the divs around it changing the word six (in #Six) to the id name (ie id="Six") of the div you want and the word NEXT to whatever you want the link to say

jayman 15 years ago

great tutorial there. loved the comprehensive step by step instructions to this great plugin. i have a question though, is there a way to combine all three types of scrolling together such that the site will scroll diagonally/horizontally/vertically to the desired section in relation to the page the user is at?

Kevin Liew Admin 15 years ago

Yes, just use the diagonal layout and fill in all those blank item with your content.

jayman 15 years ago

hi kevin, thanks for the reply, but do you mean filling in the div classes labelled as "item"?

Kevin Liew Admin 15 years ago

yea.. item class.

Dante 15 years ago

All you need to do is add links to each of the divs that send you to the other divs and the animation will happen automatically.
eg.
<a href="#Two" class="panel">2</a> |

Will send you a div named:

<div id="Two" class="item">

and it will animate in a straight line from the div you are on to the div you want to go to

Ollie 15 years ago

Hi, I'm having problems with getting links to open in new windows at a certain size. _blank works fine, but opens in a new tab, and javascript just comes up on the page as text. Sorry for stupid newbie question, but it's one I can't get my head around.

Kevin Liew Admin 15 years ago

you can use window.open method to open a new popup window. Google it for the settings.

Ollie 15 years ago

Thanks for that, turns out I was just being an idiot and not looking at my code properly.

stephanie 15 years ago

is it possible to use the vertical scrolling in such a way.. instead of the website starting from item 1 it starts from item 1 moving from down to top

Oleg 15 years ago

Hi, i have 1 trouble. I wanna make page with structure: 5 vertical and 5 horizontal div-pages with the cross-div in the middle(where vertical and horizontal containers are crossing). This middle container must be startpage with menu for another div-containers. How could I use your example for it? (Example: http://centratissimo.musings.it/) Zhank you!

Kevin Liew Admin 15 years ago

Use the diagonal layout. put your start page in the middle. Then on window load, execute this script so it displays the middle page first.

$('#wrapper').scrollTo('#id of your middle page here', 0);

Dante 15 years ago

If you add this to the javascript section:
// Reset all scrollable panes to (0,0) on browser refresh
$('#wrapper').scrollTo( "#Home", { margin: true } );
// Reset the screen to (0,0)
$.scrollTo( "#Home", { margin: true } );
$('#Home').toggleClass('selected');

with the #Home changed to whatever your central div is called then it will return there on browser refresh or when you open the page first.

Then you just need to create the different divs in the html page and create links to them in the home page div.
eg.
<div id="Home" class="item">
<a name="Home"></a>
<div class="content">HOME
<a href="#One" class="panel">1</a> |
<a href="#Two" class="panel">2</a> |
etc

Previous 1 2...151617...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