25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites
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
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
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
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
- 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 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.
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.
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.
- 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.
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.