7 jQuery Effects to Sell More Templates

With jQuery popularity on the rise it seems like everyone is jumping on board with the lightweight and easy to learn Javascript framework. When I first started learning jQuery, I had a general fear of jQuery plugins. After all, I was already trying to learn one new thing, could I really handle piling on trying to work with plugins too?

As I soon found out, implementing jQuery plugins is usually a snap. Plus, there are tons of jQuery wiz’s out there and they’ve already done the legwork for you. By using a Javascript framework like jQuery and adding in plugins for any effect I needed, I was able to create pages and templates that seemed way beyond my current talents. And that’s what led me to compile this list. Anyone can use jQuery to produce visually stunning and complex effects with almost no real Javascript knowledge. Below you’ll find a small sampling of plugins and examples to get you started…


Coda Slider

This effect was originally created by Panic, on the site for their web development app, Coda. Since then, its been duplicated countless times in every corner of the web, and with good reason. The effect serves two excellent purposes: hiding lots of content in a single space and loading the different content with a smooth animation and no page reload. Despite its overuse, it always seems well received and instantly adds depth and a definite wow factor to any project.

See the effect: Coda

Get the plugin: Coda-Slider 1.1.1

Cycle

Cycle is one of the most flexible content cycling plugins available. There are literally dozens of ways you can configure the script. There are numerous transition effects, navigation elements, and with ways to integrate it with other plugins, the possibilities are endless.

See the effect: Cycle Demos

Get the plugin: Cycle 2.23

ScrollTo

With a plugin like ScrollTo you can really start change the way people navigate your site. Instead of having links take the user to a new page, you can have the link take them to a new section of your current page all with a smooth animation. The plugin is extremely flexible and allows multiple types of transitions and selectors.

See the effect: ScrollTo Demos

Get the plugin: ScrollTo 1.4.0

Galleria

Galleria is an image gallery plugin. It loads the images from an unordered list of thumbnails and displays the large image in a central viewing area. The plugin can even make your thumbnails for you and is extremely lightweight (only 4k!).

See the effect: Galleria Demo

Get the plugin: Galleria 1.0

jTruncate

jTruncate is a plugin for easily hiding some extra content. It could be used to automatically clip entries that are too long or to hide something you don’t want to be initially viewable (like a login form)

See the effect: jTruncate Demo

Get the plugin: jTruncate 1.0

Facebox

Facebox is another lightbox script. Been there, done that, right? Wrong. Facebox is a very flexible, lightweight lightbox, which allows you to not only load images, but divs, remote pages, and alerts. Plus as an added bonus (and as the name suggests) its designed in the familiar and popular style of Facebook.

See the effect: FamSpam

Get the plugin: Facebox 1.2

Inner Fade

An inner fade is one of the simplest ways to fit extra content into a small space. Think of it like a simple slide show;, content just fades in and out on a timer. There are countless ways it could be used: displaying your latest photos, works from your portfolio, or whatever else you might want to slowly cycle through.

See the effect: ClarkLab

Get the plugin: InnerFade

Don’t know a thing about jQuery? Why not review “15 Resources to Get You Started With jQuery From Scratch”.

I hope this short list has opened your eyes to the possibilities of what jQuery can do with even minimal practice. jQuery and jQuery plugins are so valuable to us as designers because of the huge community supporting it. If you ever need help or have questions, there is usually someone who can point you in the right direction or might even have a plugin already completed that does exactly what you wanted.


8

Comments
  • Kris says:

    Hey,
    Nice post thanks.
    I like the facebox one :) I read it quickly, and saw facebook, then I was like.. You cant say facebook, they are gonna get sued. But its box. Very sneaky :)

  • Nate Kieser says:

    Hey! Thanks for the post. This is great web design post!. I’m a web designer in Atlanta, GA and I just used the ScrollTo jquery for my company’s web design. Please check the web design out and let me know what you think. I love the truncate function and the galleries. I’m sure to use these with new web designs and tell other web designers.

    Thank you. Thank you. Thank you. I’m subscribing now with my Google reader for web design.

    -Nate

  • Singh says:

    Good work, I was also planning to implent simple, but useful effects like this in my new template, as it seems like it helps sell more !

  • muthu says:

    Its a very nice website. all the postings are really great. its a more informative.
    ———-
    Muthu

    Cv interview questions

  • Rahul says:

    I like the Coda, Cycle and Galleria. Facebox is also good. Btw, congrats on making on the top of page to delicious.com.

    cheers.

  • Crysfel says:

    well done, from now i’ll use them :D

    thanks guys

  • Vini says:

    I will use this plugins in my templates!!!! Tanks

  • Nice Work
    Thanks a lot! :D