jQuery Resources for One-Page Portfolios
Published in Web DevelopmentA 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.
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.
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.
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.
Scrolling:
JavaScript is often combined with the navigation on one-page sites to create a smooth scrolling effect. Here are a few resources.
Smooth Page Scrolling
Chris Coyier shows an easy way to accomplish smooth 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.
Shadowbox (JavaScript, but not jQuery)
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.
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.
Create a Beautiful jQuery Slider Tutorial
This tutorial demonstrates an attractive slider to showcase your work.
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.
Coda Slider Effect
This popular tutorial shows how to replicate the slider used by Coda.
Easy Slider
This is a plugin from CSS Globe that can be used for showcasing your work.
For more resources please see:
31 Responses
That is a great collection, thanks for putting them all in one place!
Thanks for the stuff!
I can always use this kinda of work!
i was looking for some resources for build a portfolio ,i really need all of theses tools thanks .
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/
Very slick. Bookmarked.
Nice work putting this collection together, useful resource for inspiration.
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
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!
Thanks, shadowbox is going to get put to use very quickly!
I absolutely LOVE the hovering scroll – what a great idea!
Nice resource thanks, bookmarked
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.
many joomla use this tools. For wordpress just a little. Need expert programmer to use it.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial it`s awesome!
Thank you a lot.
great resources, I’ll have to try to look at them all.
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.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial it`s awesome!
even all examples are very very good
great resources, I’ll have to try to look at them all.
great portfolios, ı will make for us a portfolios site
What about jQuery Tools?
Great selection of jQuery Resources. These are also very useful for multi-page websites too.
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!
Great selection. Thanks so much
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.