jQuery Resources for One-Page Portfolios

A few weeks ago we published a showcase of one-page portfolios and pointed out some trends among them. Many of those sites are using jQuery to accomplish specific things. In this post we’ll feature some plugins and tutorials that are ideal for one-page portfolios. Of course, they can be used on other types of sites as well, but they are well-suited to match up with the trends among one-page portfolios.

Contact Forms:

All portfolio sites need to allow visitors to contact the designer, whether it is through an email address or a contact form. One-page sites face the challenge of including a usable contact form without using a separate page for it. These two resources can help for creating contact forms that will not take up too much space on the page.

Using Form Labels as Text Fields
CSS Globe provides a tutorial that is ideal for contact forms in limited spaces, which is often the case with one-page portfolios. The script can also be downloaded for use in your own work.

Using Form Labels as Text Fields

Creating a Slide-In jQuery Contact Form
Concealing a contact form can be very useful in situations where the page would otherwise be cluttered with a more traditional contact form. Design Shack shows us how to create a form that will slide in when clicked.

Creating a Slide-In jQuery Contact Form

Navigation:

Although one-page portfolios keep everything on a single page, the size of that page usually requires some type of navigation that will make it easier for visitors to get from one section of the page to another.

Create a Hovering Scroll to Top Button with jQuery
Because one-page sites tend to be rather long, it’s helpful to have a link to allow visitors to easily return to the top of the page. Cherrysave has a tutorial that shows how to create a button that will hover as the user scrolls.

Create a Hovering Scroll to Top Button with jQuery

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
This tutorial shows how you can create a navigation menu that will be almost hidden before sliding out, which can save some space on crowded pages.

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Scrolling:

JavaScript is often combined with the navigation on one-page sites to create a smooth scrolling effect. Here are a few resources.

Smooth Anchors jQuery Plugin

Smooth Anchors jQuery Plugin

Smooth Page Scrolling
Chris Coyier shows an easy way to accomplish smooth scrolling.

Smooth Page Scrolling

Lightbox:

One-page portfolios often use thumbnails to showcase their work, with larger images being shown when clicked. LightBox scripts are frequently used to give these images a nice look and to make it more usable for visitors. Here are a few options.

jQuery lightBox Plugin

jQuery lightBox Plugin

Fancybox

Fancybox

Shadowbox (JavaScript, but not jQuery)

Shadowbox

Fancy Zoom

Fancy Zoom

Sliders and Galleries:

jQuery sliders and galleries can also be used to showcase your work without taking up a lot of space. They can give the portfolio an attractive and impressive look, and there are a number of scripts and tutorials available.

Create a Slick and Accessible Slideshow Using jQuery
In this tutorial Jacob Gube shows how to create a slideshow that could be used for showcasing your work on a one-page portfolio.

Create a Slick and Accessible Slideshow Using jQuery

Fancy Thumbnail Hover Effect with jQuery
Soh Tanaka has written a tutorial that demonstrates a thumbnail gallery that could also be used to showcase your work with limited space available.

Fancy Thumbnail Hover Effect with jQuery

Create a Beautiful jQuery Slider Tutorial
This tutorial demonstrates an attractive slider to showcase your work.

Create a Beautiful jQuery Slider Tutorial

How to Create a Fancy Image Gallery with jQuery
Hear you will learn how to create a simple image gallery that displays full size images when the user hovers over a thumbnail.

How to Create a Fancy Image Gallery with jQuery

Coda Slider Effect
This popular tutorial shows how to replicate the slider used by Coda.

Coda Slider Effect

Easy Slider
This is a plugin from CSS Globe that can be used for showcasing your work.

Easy Slider

For more resources please see:

Published March 4th, 2010 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

32 Responses

Comments are now closed on this post.

  • Clay, March 4, 2010

    That is a great collection, thanks for putting them all in one place!

  • craft ideas, March 4, 2010

    Thanks for the stuff!

  • craft ideas, March 4, 2010

    I can always use this kinda of work!

  • cssah, March 4, 2010

    i was looking for some resources for build a portfolio ,i really need all of theses tools thanks .

  • Mary Lou, March 4, 2010

    Thanks for including our beautiful slide out navigation! For all the ones concerned about usability, there is also a revised version of the slide out menu with some text showing: http://tympanus.net/Tutorials/FixedNavigationTutorial2/

  • ejc, March 4, 2010

    Very slick. Bookmarked.

  • Thomas Craig Consulting, March 4, 2010

    Nice work putting this collection together, useful resource for inspiration.

  • Sean Randall, March 5, 2010

    I am half way through getting my first web site designed and I don’t know whether Vandelay are helping me or not but I am certainly taking all these advances in. Thanks Vandelay you guys are world leaders with this blog.

    Sean R – australia

  • Dragon, March 5, 2010

    This is perfect. I believe this is where the web is going. Why go to other pages if you don’t have too? Just refresh the relevant sections. People don’t read full pages of content anyway, they scan for groups of content. And these do just that, group content. The animation enhances usability by working as a visual cue to alert the user to new content. These also brake the traditional flat page paradigm and introduces the user to the concept of multiple layers on a single page layout. Another medium where multiple layered (sliding content) single pages are used? Smart phones.

    Great stuff! Thanks Vandelay!

  • Michael, March 5, 2010

    Thanks, shadowbox is going to get put to use very quickly!

  • Claire, March 5, 2010

    I absolutely LOVE the hovering scroll – what a great idea!

  • Uğur Eskici, March 6, 2010

    Nice resource thanks, bookmarked :)

  • bc, March 7, 2010

    Shadowbox can use jQuery. That’s how I use it. It can also be configured for MooTools, YUI, and a bunch of other frameworks. It is also very versatile.

  • O Zoke, March 7, 2010

    many joomla use this tools. For wordpress just a little. Need expert programmer to use it.

  • logolitic, March 7, 2010

    Beautiful Slide Out Navigation: A CSS and jQuery Tutorial it`s awesome!

    Thank you a lot.

  • lukasz, March 9, 2010

    great resources, I’ll have to try to look at them all.

  • Petko, March 9, 2010

    Always wanted on a site the form of feed-back as Slide – In jQuery Contact Form, only did not know how to do. It is now possible to take already working, it is not needed to squander time for own development! Thank you.

  • raj, March 9, 2010

    Beautiful Slide Out Navigation: A CSS and jQuery Tutorial it`s awesome!

    even all examples are very very good

  • form of feed, March 31, 2010

    great resources, I’ll have to try to look at them all.

  • el terminali, April 8, 2010

    great portfolios, ı will make for us a portfolios site

  • Federico Capoano, June 8, 2010

    What about jQuery Tools?

  • Aplos Systems, June 25, 2010

    Great selection of jQuery Resources. These are also very useful for multi-page websites too.

  • CSS Design, April 8, 2011

    Great collection of one page websites, i like it very much.

  • The smooth Page Scrolling tutorial is an absolute doddle to implement.
    Great resource.
    I was expecting to have to embark on a serious jQuery gap-year, but all you need is a few lines of JavaScript to intercept your standard HTML anchors.
    Wonderful!

  • Web Design Liverpool, January 31, 2012

    Great selection. Thanks so much

  • Chris Dawson, February 17, 2012

    If anyone is interested have a look too at this new template – Slidexy – we’ve put together: http://www.tallhat.com/templates/slidexy/ – it uses jQuery and also is responsive as it also presents the same content well on iPhone and iPad.

  • Taylor, August 20, 2012

    Jquery is a great way to really make your website shine. These tutorials are a great way to really become an expert with jquery.