Joel Besada 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
This article first appeared in issue 227 of .net magazine – the world's best-selling magazine for web designers and developers.
When looking at personal sites of web designers and developers, you’ll often see a lot of unique (and sometimes insane) concepts and designs that you’d never see on any ‘real world’ website. Personal sites tend to be the one area where people allow themselves to truly unleash their creativity. This often goes a long way in showing both your own personality, and the ability to think a little differently from the herd.
We’re going to use one of my own plug-ins, jQuery Scroll Path, as a tool to transform a conventional site layout into something that resembles an interactive presentation. The sections of the page will be spread out and rotated across a two-dimensional plane, and bound together with a path that the browser window follows when the user scrolls the page.
This is how our page looks before our transformation. It has five different sections with a layout that resembles a regular text document
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.
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.
transform: scale(0.1);
By adjusting the scale you can view all sections at once and better place them according to your initial sketch. You can also use your browser’s zoom function.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Positioning the Sections
In the CSS below, we’ve set a relative position to the wrapper element and an absolute position to all the sections, which are all contained in the wrapper element. This ensures the absolute positions of the sections are relative to the position of the wrapper element, which is what we want. While the plug-in automatically adds the relative position to the container element, it’s a good idea to set this from the outset to avoid any surprises in positioning that might arise if you originally were using some other type of position on the wrapper.
The initial sketch of how we plan to spread out all the sections, and the path connecting them all together
As you can see, we’ve left the #me element unpositioned. This is all fine, since the plug-in will automatically centre itself on the starting point of the path once the page loads. So, assuming that we start the path at that element, it will always be centred on the window from the beginning, no matter where we position it.
Before we start working on the scroll path, there’s one last thing left to edit in the CSS. Since we’re going to be using the built-in scrollbar of the plug-in, which will work with our custom path, we need to remove the default browser scrollbar by adding the following CSS rule to the body tag: overflow: hidden;
Shaping the path
If you’ve ever worked with the HTML5 canvas API, you’ll notice that the way we define our scroll path is very similar to how you draw paths on a canvas. The first step is to retrieve the path object from the plug-in:
var path = $.fn.scrollPath("getPath");
Think of the path object the same way as the canvas context object. We use it to call different methods that draw the path out for us. First we’ll use moveTo:
path.moveTo( 300, 150, { name: "me" });
The moveTo method sets the start of our path to the given x and y (left and top) coordinates in pixels, which are the first two parameters. We’ve chosen these numbers to be approximately at the centre of the first section of the page. The third parameter is an object literal in which we can put a number of different properties to set options in the scroll path plug-in. Here, we’ve simply set a name for the path – which we’re going to need later on in order to reference this specific step in the path.
Our next section, #about, is positioned directly to the right of the current position. We’ll use the lineTo method to have our path continue there:
path.lineTo( 1600, 150, { name: "about" });
The parameters here work the same way as in the moveTo method, but instead of simply jumping to the given position, a straight line is drawn between the previous and new coordinates. Once again, we’ve giving a name to our path segment. Next up is a slightly more complicated method, arc, used to draw a segment of the circumference of a circle:
path.arc( 1600, 975, 825, -Math.PI/2, 0, false );
Instead of specifying the coordinates of the end of the path segment with the first two parameters, they’re used to set the centre of the circle segment. The next parameter sets the radius, and the fourth and fifth parameters define the start and end angles in radians. Our set angles define a quarter of a circle, which starts at the top and goes down to the right. The last parameter is a Boolean, which decides whether the circle should be drawn clockwise or counterclockwise. A value of false sets a clockwise direction. We’ll leave this segment of the path unnamed, since we haven’t quite reached the next section we’re heading towards with the path.
The next lines of code define the rest of the path, using a couple of diagonal lines and another quarter circle arc.
// Short vertical line to the design gallerypath.lineTo( 2425, 1150, { name: "designed" });// Diagonal line down to the development gallerypath.lineTo( 1050, 1450, { name: "developed" });// Another line diagonal going up towards to the contact sectionpath.lineTo( -525, 1050, { name: "contact" });// Short vertical line upwardspath.lineTo( -525, 975 );// The last arc that connects back to the beginning,// going clockwise from the left to the top.path.arc( 300, 975, 825, -Math.PI, -Math.PI/2, false);
Our last part of the path actually connects back to the beginning, forming a complete loop. Now that we have our path set up, all that is left is to initialise the plug-in on our wrapper element:
We’re enabling the drawPath and wrapAround options in our initialisation. Setting drawPath to true gives us a visual representation of the path on an overlaid canvas. This helps a lot towards making sure that the path is correct, and is also useful during the path drawing process. Just remember to turn it off once you’re done, as it shouldn’t be used for anything else other than debugging purposes.
The wrapAround option makes the path loop, which in other words means that once you scroll to the end of the path, you’ll end up back at the beginning, creating an endless loop to scroll around.
It can be hard to wrap the head around the arc method, but in the end it all boils down to basic geometry and trigonometry
Adding rotations
To add more flavour to our site, let’s throw some rotations into the mix.
With these sections rotated, let’s also add rotations to the path. We can either rotate along a path by adding a rotate property to the object literal where we previously set path names, or use the rotate method on the path object to rotate the screen while staying in place at the current position. First, let’s make the screen rotate along the two arcs previously defined by editing the code for them.
We first rotate a quarter of a circle to align the rotation of the screen with that of the sections. At the end of the path, at the last arc, we rotate again so the screen is upside down once we return to the start. To rotate back to the original angle, add another rotation at the end of the path, using the rotate method.
path.rotate( 0 );
Now that we’ve added rotations to the page, which are only available in modern browsers, let’s take a quick look at browser compatibility. Before getting to this section, we’ve only been working with CSS absolute positioning properties, which have been available within browsers for over 10 years. So is our addition of rotations going to cause the site going to break completely in older browsers?
The answer is no – in fact, the plug-in makes sure that all rotations we add to the path are ignored in browsers that lack support for it, without getting any errors. That’s why we waited with adding rotations until we had completed the path, to confirm that it would look okay even without them.
A visual representation of the path can be enabled in the plug-in. This helps a lot in getting the right shape for your path
Creating a navigation menu
As the last part of this tutorial, we’ll create a navigation menu with links to the different sections. Clicking these will smoothly animate the screen to the chosen section. For this, we’ll use the scrollTo method of the plug-in, but before we write the JavaScript for the navigation, let’s add the markup to the body:
Our anchor elements in the code above link directly to the different sections using hashtag URLs, which will ensure that it works even in browsers that have JavaScript disabled. In order to tell the scrollTo method which part we want to scroll to, we reference different parts of the path using the names that we previously defined.
Notice how we’ve set up our path segment names to be the same as the IDs of their corresponding sections. This makes it easy for us to bind the navigation links to their path names:
The code above prevents the default hash link behaviour and instead enables the plug-in to scroll the screen to the given path name (hash link with the # excluded) over a duration of 2,000ms (two seconds). Our navigation menu is now complete, and that marks the end of this tutorial.
Conclusion
To summarise, we started off this session with a website employing a standard layout and have transformed it into something completely different – and something that is sure to impress future visitors. In the process, we’ve changed our paradigm about how a website should be structured and given ourselves the freedom to use the HTML body as a sandbox for creativity. Even though we still talk about web ‘pages’, this doesn’t mean we necessarily have to conform to the same boundaries we’re restricted to when dealing with pages in printed books and magazines.
Hopefully, this tutorial has inspired you to think more deeply about what’s possible in today’s browsers – and how you can make use of this potential to help you design new, creative and unique websites. By letting go of all previous conventions and allowing your own creativity to flow, you’ll soon find yourself coming up with new and innovative ways in which users can interact with your creations. It’s probable that you won’t hit upon solutions that work better straight away – but just bear in mind that experimentation is ultimately the key to success.
