How to Build a Sliding One Page Portfolio with jQuery

In this tutorial, I will show you how to create an interesting sliding one page portfolio with jQuery. One page sites are usually a great way to show your prospective clients how good you are at what you do. This one is no exception.

Once again, very simple. There’s a “nav” element in each section, which contains an unordered list full of the links. Each link takes up 11.1% of the nav, so that it ends up stretching to almost the end of the section the user is currently on. Each link has a different background color that corresponds to the section that the link points to.

Each box is floated to the left so that they end up being right next to each other horizontally as well as vertically. Each one also has a different background color.

That’s it for the CSS. Next up is the jQuery that will power the whole thing.

The jQuery

Before we dive into the code, I’ll explain how it will work. When the document is loaded, a “resizeBoxes” function will run, which resizes the boxes to be the same size as the user’s viewport. The same function will run whenever the window is resized. When a link is clicked, the margin-top and the margin-left of the “main” div will be animated so that the user will end up seeing the section that we want them to see. We’ll have a neat “goTo” function to power that.

This is the base template, which we’ll fill with some code in a moment. [js] $(document).ready(function(){

function resizeBoxes() {

}

resizeBoxes();

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

$(‘nav ul li a’).click(function(){ return false; });

function goTo(horizontal,vertical) {

}

}); [/js]

Now that we’ve got the skeleton, we can start writing the actual functions.

$(‘nav ul li a’).click(function(){ return false; }); [/js] In this function, “main” is resized to just barely fit each box so that there is a grid of 3 by 3, and each box resizes to the dimensions of the viewport. Then, we execute the function. There’s also a browser resize handler, which recalculates the dimensions of each box whenever the user’s browser is resized. Lastly, there’s a return false for each nav link so that the browser doesn’t actually follow each link.

Up next, we have the “goTo” function. [js] function goTo(horizontal,vertical) {

} [/js] The function gets the viewport dimensions and and writes them to 2 variables. Then, it animates the margins of the “main” element so that the user ends up seeing the section we want them to see.

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.