Revealing Photo Slider
This beautiful piece of jQuery by Chris Coyier allows you to turn thumbnail images into full-size images in one simple animation. Since one of our tips from the previous article was to create a simple portfolio, I thought this script might help achieve that goal.
Sliding Door Effect
Another option for your portfolio is to have thumbnails of the images with a sliding-door effect to reveal more information about the project. This method can be used to achieve that task in a beautiful and effective way. (Also, take note that there are many CSS3 and HTML5 effects that can achieve these same results. Depending on your target audience, you may want to consider using a few more modern techniques. Perhaps we can explore some of those options on a later post here at GDB.)
Smooth Scrolling
As mentioned in the comments on the previous post, a “to top” link/button can be extremely useful for a one-page portfolio design. Not only that, but any navigation using anchor tags can help the user navigate your one-page site. One way to help them realize where they are on the page in relation to where they came from is by using a Smooth Scrolling jQuery snippet. There are many smooth-scrollers out there; I enjoy this one because it automatically turns all the anchors on the page into smooth-scrolling anchors.
Fancy Navigation Menu
This simple yet attractive navigation menu provided by NetTuts+ offers a sleek, non-distracting look for any sidebar navigation. Perhaps using this menu with a fixed position in CSS would make for a beautiful portfolio style.
Another attractive sliding door technique
This tutorial, offered by Timothy van Sas, is another very professional alternative to the sliding doors example mentioned above. Simply cause an image of any project in your portfolio to rollover to a description of the project.
Simple Dropdown Menu
This jQuery tutorial is extremely simple-looking. There’s not really anything too fancy about it, but it offers one solution to a more attractive dropdown menu and it’s easy to execute. Perhaps it’s the space-saver your one-page portfolio needs.
Tool-tip Style Animated Hover
Brought to us by WebDesignerWall.com, this article contains a variety of extremely useful jQuery animation tricks for designers who are new to the jQuery neighborhood. One particular effect that might prove useful in a one-page portfolio, is the tool-tip style hover animation effect. Essentially, you hover over a button, some text, anything you choose, really, and a speech-bubble appears with further information. This can come in useful when you want to include more information without taking up the precious (and limited) real estate on your one-page portfolio site.
VIEW TUTORIAL (scroll to 5a.) – VIEW DEMO
Content Slider
There are millions of content sliders available out there. If you are pressed for space, but have a lot of content you want to display, a content slider is an excellent solution. They allow you to have multiple panes of content and a navigation that lets you scroll through that content. The following slider is easy to use and quite effective.
What else would you add to the list?
Have you used a really cool piece of jQuery in your portfolio? Have your written your own snippet that might come in handy for the rest of us? Please share your thoughts, experiences, and resources with us!
Written by Preston D Lee Preston is the founder of GDB, a designer, programmer, marketer, and entrepreneur. Follow @prestondlee
Great! I’ve been looking for these things…
@fauzone,
Glad the article could be of some help to you! Good luck with your site!
P-diddy. This is an excellent post. Just thought you should know.
Chris,
Good to hear from you! Glad you enjoyed the compilation.
great, nice collection!
jQuery Masonry, some kind of “lightbox” clone and a complete window slider could be good to add too
bye! till next time
@dlv,
Thanks for the additions, any links to specific tools you suggest?
Been working with jQuery for a little while now and find it an excellent attribute for working with websites.
Do you know of any other simple jQueries (if that’s a word…) similar to lightbox2 for photos?
@Sarah, I think you are looking for this thing http://warren.mesozen.com/jquery-lightbox/
These are some great Jquary examples. You should do a post like this on MooTools as well
Thank you very much. It’s a nice content.
Amazing blog and thank you for your share.
Very good plugins , loved the image gallery plugin with easing effect