Pros of JQuery
There are a number of reasons to use JQuery within a website. For one, it can add a lot to a page. Unique transitions for images or navigation, tool-tips, or seemingly anything can be added to enhance the content within a page to make it special and engaging to its audience. Actions that a designer may have thought only something like Flash could have performed can possibly be implemented. JQuery is also cross-browser; it even appears to support some of the older versions. Currently, the library of scripts is enormous, and the spectrum of commands contains tons of options to be chosen to add.
On that note: it’s not particularly complicated to implement. There are tons of tutorials and documents, both in verbal and even video form, that can guide a designer into adding scripts into their pages. With so many programmers and users, that means there’s a large community of people all working together to update and create new and enhanced scripts for pages. And, because of this community, many of the scripts are free of charge!
Cons of JQuery
Such a large opensource community means people that anyone can upload nearly anything. Not every script is going to be a premium, perfect script. In some cases, finding just the right script to customize may be a real challenge, or worse, a designer may implement a “bad” script. Too many or too poorly-scripted effects can turn the page cheesy and gimmicky.
This script allows a customizable and fancier-than-default tooltip to hover over whatever the designer wishes. It smoothly appears and can have multiple adjustments for size and position of appearance. It can also include various things, from not only text, but image too – so a designer can get a little creative with its use.
This script allows a second window to smoothly slide out from the edge of the browser window and display content via clicking a link-trigger. By clicking anywhere on the main frame of the page, the box smoothly slides away and disappears completely. This could be very convenient for pages that need copy, but don’t need it constantly present. For example, for short pages that are dependent on the graphics. This peek-a-boo panel can offer additional text that isn’t integral to the page at all times, and can conveniently disappear to reveal the rest of the content without leaving the viewer confused and without direction.
This plugin allows the page to include a slideshow based on one single unordered list. The images will gently slide to whichever image is clicked, without showing the other images included. A footer-bar will can also gently animate to include a caption if desired, to give a little extra information. There is also ( – ) and ( + ) buttons to switch image sets, so as to allow a large lot of images if that was so desired. All features can be specially tailored to fit the needs of the designer.
This script offers a zooming-lens effect for images. This could be extremely beneficial for people who have very large and/or very detailed graphics, such as illustrations of photos. This allows the designer to upload that image so that it starts at a reasonable, full size, but allows viewers to hover over selections and get a close-up, detailed view to see all the intricacies without having to print it out and stand across the room. It also has a grayscale-to-color mode, which could maybe be used in specific creative interactive scenarios.
This script allows a bar, containing customizable content, to slide out from one direction or another. This bar can remain hidden, or it can slide out or appear all at once. Like the PageSlide plugin, it can hide certain bits of content, however, with a smaller and more carefully shaped box, it can also work well with things like navigation, as explained with the following example.
JQuery in Action
The portfolio site of Martin Balhar relies heavily on the use of JQuery, implemented via MooTools. This site, while not written in english, it easy enough to navigate that you don’t even necessarily need to be able to read the content to know what to expect, and to be engaged by the aesthetics of it.
Homepage & Nav
The homepage appears to be composed of a three separate JQuery elements. The first is a unifying graphic to be explained later. The central navigation then uses the Fx.Slide code to gently animate a horizontal navigation bar out from the right. Hovering over the small arrow pops out the nav, and keeps it out without annoying snapping away. While it is dark in color, to mesh with the mood of the homepage design, it offers transparency to soften the intensity yet still retain contrast for the text links. This transparency also prevents the background graphic from being cut awkwardly and becoming completely unreadable; instead, it enhances the design already well-made on its own.
A navigation bar appears upon rollover of the arrow (LEFT). The links have a JQuery highlighting hover-state also though (RIGHT).
The links themselves then utilize the last bit of JQuery. They have an animated hover-state, where a white block flips over the word, highlighting it against the black bar. This allows them to stand out obviously against the semi-opaque background; due to the font choice and weight, a simple color shift might not have been enough to stand it apart from the other options.
The graphic is bold and energetic and quite modern, and when paired with the scripts, it helps define the designer’s abilities right off the bat. The navigation starts with the vital contact information, including his Twitter and LinkedIn, and is followed with a short list of various aspects of gallery.
The pages are not responsive, which may be alright due to the amount of JQuery on the page.
Since this is a portfolio site, the pages are made up pretty much exclusively to displaying various pieces of work created by the designer. The pages are unified via two things: (1) the JQuery sliding navigation bar, and (2) the miscellaneous “flip-page” animation.
The central navigation changes color to better suit the displayed page's design scheme.
Across the pages, the nav-bar remains, though it changes colors to better suit the overall scheme of the page its displaying. This allows the bar to be visible, but not distracting or detracting from the design display. Because it is also fixed, there’s no need to scroll back up and hunt for that blended-navigation arrow. The selected state of the links then simply changes color to a brighter white. While this wouldn’t have worked well with hover-state, focusing on what page you’re on at that very moment isn’t as important as knowing which link you’re about to click, at least in this scenario.
The sub-pages themselves are large and, while they don’t contain links to the actual functioning projects, display enough shots to give a mood. The custom backgrounds and layouts for each page also helps make each project appear special, as well as develop a mood for each project.
The bottoms of each page contain a thin, fixed, semi-opaque footer (similar to the navigation) that contains information about the project, including its date of release, the client, and what the designer contributed to. One minor detail that I noted, was that on both Chrome and Firefox, due to my own settings, a url-bar pops up the moment my cursor touches anything on the page, obstructing my view of the footer until I take it out of the window.
The footer is detailed (TOP) but depending on browser settings, that can be ruined if the page is touched with the cursor (BOTTOM).
Connecting the Pages
All of the pages are interconnected via giant JQuery arrows. When the cursor hovers over the left or right side of the screen, a very light, mostly transparent triangle appears. The arrow faces whichever direction is more relevant for the cursor location. The arrow is translucent enough to be barely distracting, and it also alludes to instruction on what to do. If you click on the right side, it will automatically transition to the next page on the list, and it will likewise go back a step by clicking on the left. This offers another way to flip through the pages without having to clonkily open and reopen the main navigation – which is of course always present should the viewer want to skip to a particular page.
The page is easy to navigate, as there are various facets to move. The pages are all labeled well, but in a way that’s not distracting. The designs are organized in an intelligent fashion that allows optimal viewing of the work, without actually viewing it first hand. The customized pages for each project help enhance the mood and overall reaction the viewer has.