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.
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:
- 15 Resources for Easily Creating Web Forms
- 35 Useful Scripts for Tooltips
- 21 Resources for Getting Design Feedback
- 60+ Helpful Resources for Portfolio Design
- 75 PSD to HTML Resources for Web Designers
Comments