Just a while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. But today, there’s an upward trend seen in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Though Flash is still a very powerful and useful tool several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.
The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects. With jQuery, the programmers can keep their code organized, concise and simple which is the main objective of the library, “write less, do more”.
In this post we are publishing 40 Brilliant and Advanced jQuery Effects To Use In Your Websites. Some of these you may have already seen, others might be new to you. 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.
- 25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites
- Collection of mega drop down and multi level menus
- Nice jQuery Effects and Plugins for Gallery
- Creating Accordion, Dropdown and Sliding Menus in Mootools
MobilyNotes is a lightweight (2KB) jQuery plugin that shows your images or other html content in a stacked format. You could use it just below your header to represent some of your works or it could also be used to show off your services in a very fancy manner.
- Rotating your content
- Auto-generated buttons
MobilySelect is a jQuery plugin (2kB) that replaces one collection of items with another. This plugin could be used to show off your photo galleries. You could divide the gallery and put the images accordingly and then use this plugin to attract the visitors
- Shows specified collection on start-up
- Three types of animation
- Callback functions.
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute. By default, tooltips will appear centered underneath their anchor. It is also possible to control the positioning of the tooltip relative to the pointee. It is also possible to change the way the tooltip should appear.
FunkyTooltips, a cool jQuery plugin that will let you create tooltips describing the content of your links and images. The code for this jQuery plugin is quite easy to understand and implement
Simple Tooltip with jQuery & CSS is a really extended way to explain what goes on in the logic of the tooltip. This tooltip can be used to explain in a good depth what the text is all about. You could also show a image along with the text.
Speech Bubbles Tooltip lets you add tooltips to links using either the value of the link’s title attribute, or rich HTML defined all inside a single HTML file and fetched using Ajax instead. The style of the tooltip is modelled after the iconic speech bubble and uses NO images. Compatibility wise Speech Bubbles Tooltip makes use of CSS3 rounded corners and shadows. It looks best in FF3+, Opera 9+, and Google Chrome/ Safari 4+. In IE7 and IE8, the tooltip lacks the rounded corners and shadows but otherwise looks and behaves the same.
puff popup bubble is a fantastic way to have tooltips in your site. Rolling the mouse over and out from the image you would be able to see the popup fade in and out of view, while gently gliding upwards. It can attract the visitors in a very fancy manner.
Style-my-tooltips is a small in size (3kb unminified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a title attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.
There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page. There have been situations when you are not able to use plugins like fancybox and prettyPhoto. Inline Modal Window with CSS and jQuery tries to address this issue and pull inline html within the page.
Coda Slider demonstrates an accessible ‘Coda’-like slider interface, but in addition, allows you to place links to the sliding content anywhere on the page and have the effect (and navigation) still work in the same way.
vTicker is a jQuery plugin for easy and simple vertical news automatic scrolling. It will calculate height automatically, so no styling needed (added an option to set height manually). Just grab it and use it – so simple. No need to add margin/padding on ul and li tags, try to style elements inside li or around div tag. You could use this plugin with some other plugins like Tweet!
MobilySlider is an advanced slideshow plugin for jQuery (5KB).
- can add inline HTML content
- auto generated pagination
- auto generated arrows
- vertical slide
- transition effect
- pause on hover
- callback functions
MobilyBlocks is a jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.
- Clockwise and counter-clockwise
- Hover Trigger
- Click Event
MobilyMap is a jQuery plugin (7KB) that can create a Google Map like draggable interface from any image.
- Can add markers
- Display HTML content when markers are clicked
- The map can be positioned how you prefer
- Remember last position of the map (cookies)
- Display caption of the map
- Display buttons to pan in four directions
- Callback functions
Google Maps Slider gives a fantastic way to display different points in a geographic area. Roll over different locations and see the Google Map slide to center that location, as well as show a custom pin. This could be used to make your site or blog fairly interactive with your visitors.
The Organic Tabs is used to build a tabbed area, something pretty simple to do from scratch with jQuery, and then make it behave better. It is simple and the markup is clean and semantic. The guts of the functionality is based on calculating heights and animating between those heights on the fly. The content area fluidly adjusts in size to the new content, rather than jerk up or down.
Don’t just display images, showcase them in style using this sleek image slideshow script. Images are animated in horizontally or vertically , with a translucent effect applied during the process. Each image can be independently hyperlinked and with its own link target.
Giving users the ability to adjust the text size of your webpages can only be a good thing, as different people have very different needs when it comes to font size and comfort. With that said, this is Fluid Text Resizer, a compact yet versatile jQuery based text resizer script. It can adjust the text size of a particular section of your page, such as just the primary content area, multiple sections, or the entire document in general.
A fluid animation is used to morph into the new text size, and session cookies are used to remember the new setting. It works by first getting the default font size of the target section, whether the unit is pixels, em etc, then increasing or decreasing that accordingly. In other words, it’s adaptive.
This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.
- Ability to use a Magnified Image
- Magnified Image can only be loaded on demand (Mouse Hover action)
- When enabled, the user can adjust the zoom level on demand by using the mouse wheel while over the image
- Customize the dimensions of the magnified image
Some images are worth a closer look, which is why there’s Image Power Zoomer. It gives any image on your page the ability to be magnified when the mouse rolls over it. A “magnifying glass” that appears over the image lets the user zoom in on any portion of it as it follows the cursor around. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs.
With this script you can not only zoom in on images but also the whole content on your page. This could be pretty useful for many designers out there. Mouse over to see zoomed in version, double click to toggle between large and small versions. It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize (via CSS).
Slider Kit is used to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.
- Content slider with modular elements
- Multiple navigation controls: buttons, mousewheel, image click, keyboard (beta)
- Vertical/Horizontal navigation clip
- Vertical/Horizontal panels slide
- Auto scrolling / Circular scrolling
- Fading and sliding transitions effects
- Easing on transitions
- Slider Kit generates a minimum of inline CSS. The whole skin is CSS-made
SAG or Stop and Go Scroller – takes a regular UL list and scrolls it upwards, one LI at a time and pausing in between. It lets you showcase content that can either be defined inline on the page, or in an external file and fetched via Ajax instead. The scroller can be set to either auto scroll, or on user demand via the navigation panel as part of its interface. Either way, the contents are scrolled in an infinite, wrapping manner, so there are no breaks between the last and first LI contents.
This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow.
- Straightforward, auto playing slideshow
- Auto playing slideshow with descriptions shown automatically
- Auto playing slideshow with some slides hyperlinked and carrying a description, shown onmouseover
- Manual slideshow with custom buttons, persistent description panel
This jQuery script lets you easily embed a Google Map on your page that supports switching between multiple addresses. A two column layout is presented by default, with the list of desired addresses on the left column and a Google Map on the right. The script automatically adds a CSS class of “selected” to the selected address’s LI container to highlight the current address while updating the “View Larger Map” link below the Google map to the appropriate link as well. A simple, out-of-the- box script for instantly putting up a Google Map for multiple addresses on your page.
A Fantastic out-of-the-box idea. The script was used to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.
Rotating the albums when clicking on next or previous. A pretty unique way to display images on your website using this jQuery. There is also a description area that can be scrolled.
Expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect. Fantastic script to be used in portfolio websites. This could help make your portfolio look very unique.
Create our own version of Facebook’s wall. This script uses Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin allows to define templates within the page, and convert the posts obtained from the API into a real HTML page.
A cool jquery/css thumbnail scroller plugin inspired by the ones made in Flash. It works by cursor movement and it’s simple to configure and easy to style through css.
A simple navigation menu that “follows” page scrolling and expands on mouse over, made with css and jquery. You can expand your menu in vertical as well as horizontal sides. This script can help you to save some good amount of space on your website page and instead provide you with a fantastic way of navigation.
Create a website template with some really sweet animations using jQuery. The idea of this script is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. You can use some different animation effects that will add as options to the menu item.
A graphical way to upload your files.
- Multiple file upload
- Drag & Drop support
- Upload progress bar
- Cancelable uploads
- Resumable uploads
- Preview images
- Graceful fallback for legacy browsers
One of the easiest ways to boost up the sales of your products is to show the honest recommendations of people that have already purchased them. This is content that rarely changes, and you do not need a dedicated CMS system just to manage it. This script builds an XML backed testimonial viewer, which, along with jQuery, can display the set on the product pages.
Most of the people out there on the web most probably know what a Google Doodle is and they might also like it. This script tries to make Google’s Christmas Doodle with the help of jQuery and a bit of CSS.
This script builds a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support, scroll easing and adjustable scrollbar height/width.