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

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


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

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!

Advertisement

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.

Structure for jQuery share it toolbox

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.

Author: 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.

Share the love

786 comments

Behzad
Sun, 4th November 2012
Thanks a lot. I was wondering if somebody could possibly give me a solution. When I add the 6th and 6th and ... pages to it, it does not slide horizontally any more. Reply
Michael
Sun, 11th November 2012
Hi,

This really saved me a lot of time, thanks.

Can I ask one question please. How can I chose which div is centre on page load?

Thanks for your help.

M Reply
Kevin Liew Admin
Sun, 11th November 2012
Hi Michael, you can read this section in the article: Jump to Certain Item on Page Load Reply
Wolfgang
Wed, 21st November 2012
Hello Kevin,

I found your plugin and description, because I was so fascinated about a website http://www.orfgen.net . After that I searched for a template for wordpress but couldnt find one. I am not very experienced in CSS and Javascript but I understand the concept and I would be able to work it out "somehow" :).

More likely I would order it, if probably you could reengineer a layout like the one on http://www.orfgen.net ?
Do you do commissional work?

Anyway, thank you for posting this lesson!

Wolfgang
Reply
Kevin Liew Admin
Wed, 6th February 2013
Yes, that layout can be done. Do you still need it? Reply
Ben
Tue, 13th November 2012
Hi, love the script and have used it to good effect to display my portfolio... 1 issue I am finding (i assume because the width of the pages are so wide) is that they overlap each other when you minimize the page, the previous ones come through.

For example you can view it here: www.begraphics.com/p3 and if you click on print then minimise the browsers page so only a small amount of the page is showing you will see the 2 previous pages come through on this page... Can this be fixed without changing the look of my site?

Many thanks

Ben Reply
Logan
Thu, 29th November 2012
I'm a novice at web design, but I'm usually pretty good about deconstructing to figure it out, but I just can't figure out how to place my image for the #item references. Actually, I have figured out how to replace my image, but then I can't get the text to show up to allow me to go back to the first image. Should I be setting up which images I want and using the ID of "item1....2....etc"?

I understand if this requires way too much explanation, I am just trying to see what it is I'm missing.

Thank you Reply
Jason
Tue, 4th December 2012
Hi,

I'm using the horizontal version, is there a way to change the anchor to the bottom or middle of the page for example? I mean, when the page is too big and I get a scrollbar, when I go to the bottom of that page but I still can reach the button to go forward, the next page goes automatically to the top, so I'm getting a diagonal effect instead horizontal.. =[

Thank you in advance!! Reply
Bosun
Fri, 28th December 2012
Any plan on adding jquery easing. Or better still how can I add some jquery easy effect on it. This is a good work. Reply
Kevin Liew Admin
Thu, 3rd January 2013
Just refer to jquery.easing website, it's easy to add scroll effect.

http://demos.flesler.com/jquery/scrollTo/

should look something like this: $(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} ); Reply
Peter
Thu, 24th January 2013
Hey Kevin, great code. Using it to fancy up my portfolio a bit.

Took me some time to get the fixed menu going as I wanted. (Been a while since I coded anything!) but I got that working. My only question is; how do you get vertical scrolling working with the horizontal animation. If I make my page longer than the browser screen, then my scollbar is gone. Turning off overflow: hidden won't do it for me unfortunately. Reply
Kevin Liew Admin
Thu, 24th January 2013
Hi Peter, thanks for your comment. For displaying scrollbar, what you need to do is remove overflow:hidden in #wrapper. It will work. Try to refresh to make sure it's not cached.

Reply
DanS
Tue, 29th January 2013
Is it possible to make it ease in or out more than what is displayed in the examples? Great code by the way, great job! Reply
fondowe
Thu, 31st January 2013
Hello Kevin. You have done an amazing job. Thank you.

There is one thing that have been bothering me. When i resize or drag to make the browser window smaller/bigger, i get errors in all demo pages:
Firefox (firebug console)
targ is undefined, attr[key] = targ[pos]; (jquery.scollto line 157)

Internet Explorer (console log)
Message "targ" is null or not an object, line 157, char 6, jquery.scrollto.js

Any idea how to make it error free? Reply
Kevin Liew Admin
Thu, 31st January 2013
Try this code:

try {
//if the item is displayed incorrectly, set it to the corrent pos
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
} catch (e) {
//error
} Reply
fondowe
Fri, 1st February 2013
Thank you for your quick response. The code works perfectly and i don't see any errors anymore. Reply
FishingGor
Sun, 3rd February 2013

Hi ! Kevin Liew, you did such a great job, and your plugin works perfectly in my web page, but I am wondering if I can combine the drag gesture effect to your plugin, I tried copy both codes into the html, only your plugin works but gesture don't...

here is the gesture plugin made by another guy :

http://www.smoothdivscroll.com/touchScroller.html Reply
Marek
Tue, 5th February 2013
Dear Kevin,

Thank you for all this! I have one small issue, though.

My website: http://www.inbrackets.dk/with_the_font_face/index.php appears to have some kind of padding or margin on the items(even though I have padding: 0; and margin: 0; on each of the subpages).

It actually seems, that it is only the last page that doesn't scroll all the way. Once you press "contact", the page will scroll almost all the way, yet it'll not scroll more or less 20 pixels. The content of the contact page under the contact form has darker grey background.

Would you please tell me what's the solution, if you know such?

Great thanks in advance! Reply
Digby
Wed, 6th February 2013
I was wondering if theres add a next/previous button to go through each item one by one? Reply
Jennifer
Thu, 7th February 2013
Hi! Thank you for this great tutorial. I just have one quick question...There was this website I really admired http://www.bountybev.com/home.php and I was trying to get similar scrolling and navigation effect on my website. I am a newbie at coding with javascript and was wondering if I could use this tutorial along with other plugins to get the desired effect...and if so, do you know how?Thanks. Reply
Nathan
Mon, 11th February 2013
Hi Kevin,

Firstly, I love the script! It works real well when all the content is on one page like your demo. But my question is:

I'm developing a site where only 4 of the pages slide. The other pages of the site are dynamic and standalone. My question then is how to link from the static pages back to the sliding panel pages.

I assumed that something like this would work: <a href="index.html#item1">Home - Panel 1</a>

But alas, it didn't. Do you have any tips for us so that we can link back to a specific panel from stand alone pages elsewhere in the site?

Thanks!

Nathan Reply
Franck
Fri, 8th March 2013
i have this message .
scrollTo is not a function
$('#wrapper').scrollTo($(this).attr('href'), 800);
when i use scrolling script with jquerysupersize script Reply
Kevin Liew Admin
Fri, 15th March 2013
Does the scrolling works?
To eliminate that message, wrap it with
try {
....
} catch (e) {} Reply
Ben
Thu, 4th April 2013
Is there any possibility to get this script work horizontally AND vertically?
Means i have your diagonally graphic as layout and can target any of these div's?

(pushing the script into contao cms is another story :x ) Reply
Kevin Admin
Thu, 4th April 2013
Basically, just use the diagonal layout and fill up those boxes with your content. scrollTo.js plugin will navigate to the right position. Reply
Jason
Wed, 1st May 2013
I would like to create a simillar layout to www. steveandjacqs .com, would you be able to help me get that done. I've been trying for a couple of days now and can't seem to get it right. To have 3 horizontal pages and 1 vertical in the center. Thanks. Reply
George
Fri, 17th May 2013
Would be great with touch event - swipe for mobile devices :) Reply
Nikz
Sun, 26th May 2013
Does your script works with js floating menu? I cant get it to work properly regardless of where I insert the <div> of the menu. Reply
Kevin Admin
Mon, 27th May 2013
Hi Nikz, Should be outside #wrapper. Reply
elly
Wed, 5th June 2013
I'm trying to add url but it's not working. Basically, what I want is when I click on item 2 (for instance), it takes me to a url. But when i modified the code, nothing happened. Do u know what i'm doing wrong? Reply
Dylan
Mon, 1st July 2013
Hi Kevin,
Thanks so much for this tutorial, it is exactly what I needed! I am having 2 issues though:

1. How do I get the clicked link to highlight a different color once the page has scrolled? Right now, it changes on click, but as soon as it scrolls, it reverts back to a standard link.

2. When I resize my window smaller, the div to the right of the current one overlaps onto the screen. This does not happen on the left side when I resize bigger/smaller, so I'm not sure why it is only happening on the right?

Hope you can help, thanks! Reply
Suzanne
Tue, 23rd July 2013
Having the same problem as number 2 on your comment, did you ever find a solution for this issue? Reply
Liam Jay
Thu, 11th July 2013
Thanks for the tutorial, it is really helpful. My only question is can you combine the horizontal and vertical scrolling of the content. Reply
Joseph
Fri, 12th July 2013
Ok cool, but how do i edit this for my own content?? Reply
timoe
Tue, 16th July 2013
thx 4 this tut.

do u think it may be possible to have 5 x 3 panels and scroll in every direction - vertical, horizontal and diagonal?

and the final site should be scrollable with scrollbars too (there are here missing)

that's what i need :)
so is that possible with this basic? Reply
BK Alley
Thu, 15th August 2013
Easy? I have no idea how to implement this because you're more interested in showing off than actually teaching others. Reply
kevin Admin
Thu, 15th August 2013
Anything I can help you? This tutorial is a bit messy now because new things were added to help other readers.

You can download the zip file, it has 3 different scrolling demo. Reply
earl smith
Wed, 21st August 2013
I love the thought of using this to learn jQuery. I've tried implementing whats here but am failing. Could someone please tell me what I may be doing wrong by taking a quick look at my test? The url is http://www.earlsmith.co.uk/jquerytest/earl.html All looks fine but no slide! Kind regards, in anticipation-earl. Reply
Sindri Stefánsson
Sun, 27th October 2013
Thank you for this, i have been looking for some demos for 3 days :) Reply
Edmund
Thu, 7th November 2013
Awesome tutorial. Got lots of compliments when I applied this to my portfolio site. Thanks!
http://edmundyu.com/
Reply
Nils
Mon, 17th March 2014
Your portfolio site is very well-designed indeed! 4 stars!

Sometimes though, the keyboard events don't register or register wrongly and the vertical scroll skips around...that breaks down UX pretty rapidly, unfortunately. The concept is sweet!

Does it have to do with my older versions of Chrome and Safari? Reply
okhaifo
Sat, 23rd November 2013
thanks alot for this its wonderful, but how do I do it to make another item so it can reach item6 rather than item5 Reply
amro tarawneh
Fri, 6th June 2014
How can i add more than 5 items? Reply
Jason
Thu, 9th January 2014
Hi there,
Is there any way that this can be incorporated with Adobe Muse. The reason I ask is because I have some animations that I wanted to use. Reply
alpkan
Sat, 15th March 2014
how is it possible to combine vertical and horizontal sliding?
are there any example, tutorials? thank you. Reply
Colin
Fri, 28th March 2014
I'm also looking for that. If you find something similar please let me know! Thanks! Reply
MikeCS
Wed, 2nd April 2014
Nice tutorial. But i would like build website which starts on item 3 and not on item 1 after loading. Does anyone know how to code it? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement