Advanced Search
Keywords

Our 7 Favorite jQuery Template Effects

This entry was posted By Cubert on Monday, July 26th, 2010 at 10:27 pm and is filed under BoxedArt, Inspiration, Web Markup. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

jQuery Favorites Regular visitors of BoxedArt will have noticed the recent jQuery section on the site. If you’re still a little green to jQuery, the best way to explain it is that it is a client side scripting language (meaning that all activity occurs in your web browser, and not on the web server), and it creates an interaction between simple HTML and Javascript. What this means, is that there can be dynamic and interactive action on a website without using a scripting resource that requires a browser plug-in, such as Flash or Swish. It also lets you use simple HTML text within the content, so it doesn’t require additional software to manage a site.

Anyway, for those of you that don’t need the lesson and are here for the eye candy, below you’ll find a list of our 7 favorite jQuery scripts and effects that we have used in our new jQuery template category so far:

#7 Portfolio Image Slider

A slider is a good tool for showcasing a variety of images on the homepage of your website. You could use to to show off your design portfolio, provide snapshots of your services, or even give a quick tour of what you offer. The “Easy Slider” from cssglobe.com really is just about the simplest possible method out there for adding a plug-in slider.

Get the Slider jQuery Script

Where We Use It:

This was one of the first jQuery scripts we implemented. It can be found in our Drafting Table portfolio template:

#6 Style Switcher

The style switcher by Kevin Luck, or style sheet chooser, is a script that lets your visitors change the style of your website with a single click. The premise involves creating multiple style sheets that all contain the same css classes but with different properties. When the user selects a link for a particular style, the site switches from the default style sheet to the new one selected. It’s a really simple way to add new interest to the design of your site.

Get the Style Sheet Chooser jQuery Script

Where We Use It:

We added the style sheer chooser to our Design Star web design portfolio template to switch between wild patterned backgrounds:

#5 Multi Level Drop Down Menu

Drop down menus are a tidy way to organize your navigation links, especially if you want to give users direct access to a sub page within a main section without having to hop through several pages. The unhiply named “jQuery Multi Level CSS Menu #2” by DynamicDrive.com gives this option, but allows a navigation system that goes 3 levels deep, switching between vertical and horizontal drop down links.

Get the Multi Level Menu jQuery Script

Where We Use It:

The multi level jQuery menu adds a level of depth to the trendy 5 Band music web template:

#4 Custom Content Slider

Not to be confused with a main image slider, the content slider actually contains all of the content for your entire site. This means than you will not have multiple HTML pages, and all of your site’s content will be contained within a single HTML file. When you click a button that sends a user to a new page, you simply scroll through to the next section of content. It provides an appearance similar to frames, but I assure you, there are no framesets in this code.

Get the Custom Content Slider from Queness

Where We Use It:

Our cutesy Pet Club website design uses this script to scroll through the content without requiring a reload for each page:

#3 Horizontal Javascript Accordion

This script is 1kb of pure awesomeness. It has a similar purpose as an image slider, but instead of sliding your images, it expands and reduces them, enlarging the selected image to full width on hover, and reducing the others back to tab sized. This cool little script is from leigeber.com.

Get the Horizontal Javascript Accordion

Where We Use It:

You could lose hours (or at least minutes) playing with the accordion menu installed on the Big Wind and Solar clean energy template:

#2 and #1 Corner Peel & Accordion Content

The final two of our top 7 favorite jQuery template effects are actually contained within the same web design, so I figured why not demonstrate an act of efficiency and group ‘em together?

Corner Page Peel Effect
There’s no better way to add an announcement that will be seen by all of your users on any page of your site. This effect allows you to add some little icon or image to the corner of the page, and then display a full sized promotional message when the user clicks it to peel the corner away.


Get the Page Peel Effect

Accordion Content

Looking to combine the playfulness of an accordion menu with the sleek functionality of the custom content slider? That;s exactly what’s done with the Stemkoski’s “Stupid Simple jQuery Accordion Menu”. It makes navigating your website’s content an absolute blast!


Get the Stupid Simple jQuery Accordion Menu

Where We Use Them:

Both these playful effects have been lovingly applied to the Faber College education template:

The above jQuery effects vary in usefulness, admittedly, and I know we have used scripts that have a far more functional benefit. However, these are my favorites, and are often playful and fun. There are dozens of other jQuery scripts used throughout our jQuery template section as well, so feel free to take a browse through all of our current jQuery Templates.

Tags: , , , , , , ,

('DiggThis') StumbleDelicious

Comments

Really cool designs

jquery slides ! its awesome

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost