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
- Nice jQuery Effects and Plugins for Gallery
- Creating Accordion, Dropdown and Sliding Menus in Mootools
- Collection of mega drop down and multi level menus
QuickSand
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
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
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.
Gallerific
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.
AviaSLider
- 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.
Spritely
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
Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.
YoxView
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
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.
About the Author:
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 98 posts on Artatm - Creative Art Magazine.
great collection…applause…
Nice collection. Will definitely go thru them and pick some cool effects for our next project
@Good Web Design and Jeyaganesh Thanks for your Appreciation
Great plugins….
nice collections
thanks for this list
AJAX-ZOOM is a multi-talent jQuery gallery with image zoom using image tiles. Link: http://www.ajax-zoom.com
Thanks ! Its very good collection. I like it
perfect post, thanks for sharing……
G8 Stuff…Thnks for it
Nice post, some great jQuery resources. Thanks
nicce post and blue icons jquery is best
Great collection! The Circular Effects are really awesome. Bookmarked and Stumbled.
Fantastic set of techniques, keep them coming!!!…
Quite good techniques Great work Thanks for sharing!!
Nice collection,
I would like to share: jQuery Gloss
http://www.freelancer-id.com/gloss
Thaks
This is a great collection. I love all these helpful downloads.
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
@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!
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!
richtig gut verfasst ist die halbe miete
wer mag kann gerne nen google + account leechen bei mir.
longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery
Great collection, I’ve already tried prettyphoto for incorporating YouTube movies into a page, and it works a charm.
@Jason I did it sometime ago and the result was really fantastic!!!
Realy great collection, thanks for sharing!
Nice Post, Thank you for sharing
Nice Effects. Very useful.Thanks for Share.
Nice collection.
Thanks to share this.
Like you said this are fantastic jQuery effects and now that I have this collection for sure I will make something splendid. Thanks!
Thank you Very Much.. Do Continue with the gr8 work!
check this one !
http://workwithphp.info/?p=38