This demo will shows you how to take a personal site with a common text document layout, and create something far more interesting with the jQuery Scroll Path plug-in.

Starting out

We’ll start out with a rather plain and simple personal web page with five different sections. Here’s our outlined HTML structure:

    <div class="wrapper">
      <header id="me">
        <!-- Name and area of expertise -->
      </header>
      <section id="about">
        <!-- Some text -->
      </section>
      <section id="designed">
        <!-- Design gallery -->
      </section>
      <section id="developed">
        <!-- Development gallery -->
      </section>
      <section id="contact">
        <!-- Some text -->
      </section>
    </div>

The first step in this transformation is to include the necessary files to get the plug-in running. For this, we need a jQuery version 1.7 or higher and, of course, the plug-in script.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></ script>
    <script src="script/min.jquery.scrollpath.js"></script>

Next, we’ll also include a small CSS style sheet setting the styles of the custom scrollbar that comes with the plug-in.

<link rel="stylesheet" type="text/css" href="style/scrollpath.css" />

Now that we have everything set up, let’s start moving things around. Something I recommend doing at this point is taking a pen and paper and sketching out the positions of the different sections and the path between them. This should give you a better overview of how everything will come together. A trick that will also come in handy once you start typing out your positions in CSS is to temporarily apply a scale transform on your container element.

Read more:http://www.netmagazine.com/tutorials/spice-your-personal-site-jquery