25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites

Javascript Libraries have been a boon to the developers. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improves the user’s interaction with Web applications. It helps developers write code and develop products more quickly. Many of us have been using jquery to a great deal. Be it for photo gallery or featured items or be it any other purpose, jquery helps in developing any application that you want.

In this post we are publishing 25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites for your use. If you like any of these jquery and you plan to use them then please read the license agreement of the creator as they may change from time to time.

You may also be interested in the following jQuery related articles


Reorder and filter items with a nice shuffling animation. Just specify source container and destination collection which will replace the source collection. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.



prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)


Popeye – an inline lightbox alternative

It is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.



ImageFlow is an unobtrusive and userfriendly JavaScript image gallery. It is an object-oriented script, that means you can create many instances of it on one website. You can also customize each instance differently.


Circular Motion Effect with jQuery

The idea is to have a rounded content area with a main menu. When hovering over one of the menu items, a sub-menu element appears, circulating around the content area.


Create an Image Rotator with Description

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.



Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.


Galleria Image Gallery

Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project. Galleria clocks around 5k daily downloads, making it one of the most popular javascript galleries around.


jQuery Feature List Plugin

This plugin is used for Featured items in the product section. You can highlight the products and a small description of it. It has a the following features

  • Slick effect, no Flash needed
  • It’s just 2K
  • Reusable on multiple containers
  • Cycles items via slideshow
  • Can be styled with custom HTML/CSS


Control.Tabs jQuery

It creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not supportJavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.



  • 8 unique transition effects
  • Lots of easy to set options to create your own effects
  • Included Image preloader
  • Autoplay that stops on user interaction
  • Valid HTML5 and CSS 3 Markup
  • Packed version only weights 8kb
  • Supports linked images
  • already prepared to work with prettyPhoto Lightbox
  • works with jQuery 1.32 and higher


Coin Slider

Coin Slider is a jQuery image slider with unique effects.


Tutorial for Building a jQuery Image Scroller

Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.


Nivo Slider

Features of Nivo Slider are

  • 9 unique transition effects
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Built in directional and control navigation
  • Packed version only weighs 7kb
  • Supports linking images
  • Keyboard Navigation
  • Free to use and abuse under the MIT license


Piecemaker XML Gallery

Piecemaker is an open source 3D Flash image rotator gallery.



jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.



Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.



YoxView is a popup image viewer, built using jQuery 1.4. It’s simple to use yet quite powerful.

Key Features:

  • Images are resized to fit inside the browser’s window
  • Content can be pre-cached
  • Multiple instances in the same page may be used
  • Fully configurable


jQuery – dropline with current selection

A dropline menu with the ability to set the ‘current’ page and have the menu open with this highlighted. If you hover over any of the other menu options then the current trail is removed and the new trail displayed. Once you move the mouse ff the menu then the current seletion will re-appear.


Horizontal dropline/dropdown/flyout menu using jQuery

Dropline Menu with dropsown. It will automatically be close after 2 seconds if the mouse moves off any of the menu items. This ‘feature’ can be modified to collapse back to keep the dropline.



Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).


jquery Professional Dropdown Menu

This is a clean jquery menu for multiple drop downs


Creating a Floating HTML Menu Using jQuery and CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.


How to make accordion menu using jquery

First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.


Learn about jquery techniques with640-802 course. Take advantage of latest collection of 350-001 tutorial and VCP-410 guide and learn how to create awesome websites.

A total football nerd, he loves designing to the core and also likes to get his hands on some programming. He is the Co-Founder of ArtAtm. He hails from India. You may want to Follow Him On Twitter

Jitu – who has written posts on Artatm – Creative Art Magazine.

31 Responses to “25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites”
  1. syed mohammed ahmed

    check this one !

  2. kishor

    Thank you Very Much.. Do Continue with the gr8 work!

  3. friv games

    Like you said this are fantastic jQuery effects and now that I have this collection for sure I will make something splendid. Thanks!

  4. jayendra

    Nice collection.
    Thanks to share this.

  5. Sumit nagpal

    Nice Effects. Very useful.Thanks for Share.

  6. langga

    Nice Post, Thank you for sharing

  7. Izrada web Stranica

    Realy great collection, thanks for sharing!

  8. Jason Canberra

    Great collection, I’ve already tried prettyphoto for incorporating YouTube movies into a page, and it works a charm.

    • Jitu

      @Jason I did it sometime ago and the result was really fantastic!!!

  9. ocean

    longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery

  10. restinpeace

    richtig gut verfasst ist die halbe miete 🙂 wer mag kann gerne nen google + account leechen bei mir.

  11. iso internal audit training

    Hi are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding knowledge to make your own blog? Any help would be greatly appreciated!

  12. Akhilesh

    Great collections, thanks for sharing. I am looking for some banner scripts which can support content also… If you could… please share 🙂 thanks a lot

    • Jitu

      @Akhilesh Hey thanks for the comment… I will try to find banner scripts and publish article related to stuff like this 🙂
      Always Feel free to send us recommendations!

  13. Brett Widmann

    This is a great collection. I love all these helpful downloads.

  14. Alaa Badran

    Nice collection,

    I would like to share: jQuery Gloss

    Thaks 🙂

  15. technology review

    Quite good techniques Great work Thanks for sharing!!

  16. web

    Fantastic set of techniques, keep them coming!!!…

  17. 1000 MiiniClips

    Great collection! The Circular Effects are really awesome. Bookmarked and Stumbled.

  18. Host Monsterz

    nicce post and blue icons jquery is best

  19. Andy @ sales++

    Nice post, some great jQuery resources. Thanks

  20. Jatin

    G8 Stuff…Thnks for it

  21. mekanik proje

    perfect post, thanks for sharing……

  22. Zeeshan Rasool

    Thanks ! Its very good collection. I like it 😉

  23. SF

    AJAX-ZOOM is a multi-talent jQuery gallery with image zoom using image tiles. Link: http://www.ajax-zoom.com

  24. Jireck

    thanks for this list

  25. amit

    nice collections

  26. Jrodarte

    Great plugins….

  27. Good Web Design

    Nice collection. Will definitely go thru them and pick some cool effects for our next project 😉

    • Jitu

      @Good Web Design and Jeyaganesh Thanks for your Appreciation

  28. Jeyaganesh

    great collection…applause…

Leave a Reply