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

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

Ahmed Makki 15 years ago

Thanks For the Lovely tutorial ,

Every thing works fine , i just want to ask for 2 things
1. Can I Mix Diagonal slide with Vertical slide or Horizontally , such as creating more than 1 function for custom sliding.

2.I Do have a Very Big Picture , (4000x4000) and i would like it to be the background image for the website.
How can i apply the image for the whole website and let the selected content with the focused part of the image.

Ahmed Makki 15 years ago

Well , never mind .. i found the solution , just add the required div instead of <div class=item></div> ...

So the only problem i am having now is the big picture. Can you help me with it?

Kevin Liew Admin 15 years ago

big background image?

Ahmed Makki 15 years ago

Yes , Big Background image , such as 3090 x 3010 which i want to apply on the mask Div , which means all the 9 divs that it's class name is :"item".

I have to say that there is no problem when scrolling via the X axis. , It works perfect and nice with the first row.

but when i scroll via the Y axis. it doesn't load the rest of the image. it just blank background.

so my problem is with the second and the third row?

Thank You

mike western 15 years ago

I'm having the same issue. Hope you can help :)

Kevin Liew Admin 15 years ago

I assume both of you are using diagonal layout with a massive background? from my understand, you have 9 divs, and 3 rows.. so it's a 3x3 layout ?

it's something to do with the mask, I think you should have something like this in your CSS:

width:300%;
height:100%;

the reason why it doesn't work with 2nd and 3rd rows is the heigh set to 100%. The solution I can think of, add another div to wraper around all the .item div and put the background to that new div.

Otherwise, you can upload it online so I can have a look.

Ahmed Makki 15 years ago

Well , I did like what u said , and YES , it WORKED
only i am facing a little problem which i don't really know what it's cause.

The Content div doesn't appears , to make it appear i have to zoom in or out from the browser in order for the content div to appear , strange right ? :)
and at the IE browser , it never appears.

I uploaded the file online for you in order to help you.

http://www.megaupload.com/?d=GVGQCIUS

please note that i set the background color for the content div 'RED' to help you showing the problem.

I hope you can help me fix this and works at all browsers .

Any way , Thank You for the help

Kevin Liew Admin 15 years ago

Just about to download your file but it's no longer exist.

Ahmed Makki 15 years ago

Hello Again Sir ,
i uploaded in to another 3 servers for making sure.

http://depositfiles.com/en/files/8itd4lb2i

OR

http://depositfiles.com/en/files/8itd4lb2i

OR

http://depositfiles.com/en/files/8itd4lb2i

Thank You for Your Time

Dante 15 years ago

2)If you mean that you want an image that moves with the content boxes then that is what I'm looking for as well . For some reason setting it as the background-image of body does not show up even when the background-color's of the various div's are commented out.

Oleg 15 years ago

I have made "content" 100%. If i try to change size of browser window the page is breaking, i see another parts from another pages. How can I fix this bug?

Kevin Liew Admin 15 years ago

is you again!!! :)

do you have the resize function?

$(window).resize(function () {

//call the resizePanel function
resizePanel();

I think you need the diagonal resize function.

oleg 15 years ago

ye, that what i have:

$(window).resize(function () {
resizePanel();
});

});

function resizePanel() {

width = $(window).width();
height = $(window).height();

mask_width = width * $('.item').length;

$('#debug').html(width + ' ' + height + ' ' + mask_width);

$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

but.... :(
bad..

Kevin Liew Admin 15 years ago

it shouldn't be a bug, does the demo work for you?

Ash 15 years ago

Hey - I am trying to use your code for a project - Set up everything similar to your setup - but the transition effect doesn't show - When I click on a link it just shifts to that link without the gradual transition.
Thinking their might be some issue with my setup or server or whatever - I setup your demo files as you have it on my server - and the transition doesn't apply for your demo also(no changes made to it)

I was just wondering if I am missing something here regarding the setup of javascripts or something

Thanks for any help...

Ash 15 years ago

finally figured it out - tht took four days... but still - I failed to call that ajax library javascript file onto my page.

Ash 15 years ago

Thanks for the tut! I want to create a single page vertical sliding website with at least six sections('pages") each section with a different background with a fixed menu position whch can fit any browser wndow. Do you know of any step by step tutorial out there!!?

Kevin Liew Admin 15 years ago

if you want a menu in fixed position and dont mind about IE6. you can take the menu out from the item and apply position fixed to it.

Jessica Wi Mui Eng 15 years ago

is it possible that the background colour is different for each of the item1,2,3?

Kevin Liew Admin 15 years ago

yes, definitely. you can see there is an id for each of the item, eg:

<div id="item2" class="item">...</div>
<div id="item3" class="item">...</div>

in css, just do like this:
#item2 {background:#f00}
#item3 {background:#00f}

Dante 15 years ago

If you add lines like this to the end of the css page you will be able to change the colour of the background around the items. Just change the #ccc to whatever the hexadecimal code is for the colour you want.
#item1 {background-color: #ccc;}
#item2 {background-color: #ccc;}
#item3 {background-color: #ccc;}

Steve 15 years ago

Wonderful tutorial. It works like a charm! Thanks!

I do have a question though. I have noticed that if the window is large, you'll only see one "item" at a time. Is there anyway to overlap some of the content so you'll see a preview of the next content if the window is large enough. I guess we wouldn't use percentages, but instead hard numbers?

Thank you in advance.

Dante 15 years ago

If you go into the css file and change the width and height values of .item and #mask keeping them percentages you will be able to show some of the other items along the edge.

rorry 15 years ago

hello,.i need a little help,. how can i add another page? on your demo you have 5 page,. let say i want to make it 7 page?.. thanx

Kevin Liew Admin 15 years ago

First, add the extra two items. See the html structure? do the same for the 2 items. and then, in CSS, you will need to calculate the height and width. Please refer to the tutorial.

Maher Anis 15 years ago

Wonderful idea, and very easy to be applied, my problem is that i am adding a new item to the vertical sample with new item ID but it is not appearing, not working at all... need your help please.
Thanks

Kevin Liew Admin 15 years ago

You need to go to CSS section, readjust the height and width. Please refer to that section, I have put in instructions.

Raju 15 years ago

Thanx for nice tutorial.
Instead of putting size in % can i have it in pixel?

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

background-color:#eee;
}

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

and after making size in pixel, how i can have div in center align (same like auto margin page)?

Kevin Liew Admin 15 years ago

you need it in percentage. If you put pixel, it only works in certain resolution.

Harry 15 years ago

Hi Kevin,
Great tut! Can we have auto-slide in vertical slider?

Kevin Liew Admin 15 years ago

erm.. nope.

hai 15 years ago

It doesnt work. the item doesnt animate, how to resolve it? should I download Jquery.scroll to plugin before? i still dont get it. thanks :D

Kevin Liew Admin 15 years ago

download the zip file I have, then start from there. Yes, you need jquery.scroll.

matheen dubai 15 years ago

hey Kevin, great stuff.. its not working in google chrome.. just showing a blank page

Dante 15 years ago

It is working fine for me in The latest version (11.0.696.71)

Kevin March 15 years ago

Hi Kevin, I love the script and tutorial.

I have one questing I am hoping you can help me with. Some of my content is taller then the browser window and some of the area is hidden and doesn't have a scroll bar in the browser. I have played with the CSS, things like overflow, height, etc but I cannot get scroll bars working for content taller then the browser window. Can this be done?

Thanks in advance and awesome site :)

Kevin Liew Admin 15 years ago

it should be overflow hidden... try to set it to auto in #wrapper.

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