40 Brilliant and Advanced jQuery Effects To Use In Your Websites

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”.

We already have an article on 25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites. We all love the fancy effects that can be produced with the jQuery Javascript library. Below are some effects that are all based on different topics, but they all include some kind of super cool visual effects as part of their finished product.

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.

In the meanwhile you may also want to view some more Javascript OR jQuery related articles

MobilyNotes

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.

Features:

  • Rotating your content
  • Autoplay
  • Auto-generated buttons

moby_notes.jpg

Demo
Download

MobilySelect

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

Features:

  • Shows specified collection on start-up
  • Three types of animation
  • Callback functions.

moby_select.jpg

Demo
Download

Tipsy – Facebook-style tooltip plugin for jQuery

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.

tipsy-tooltip.jpg

Demo
Download

Funky Tooltips

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

funky_tooltip.jpg

Tutorial
Download

Simple Tooltip w/ jQuery & CSS

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.

simple_tool_tip.jpg

Demo
Tutorial

Speech Bubbles Tooltip

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.

bubble_tooltip.jpg

Demo
Download

Coda Popup Bubbles

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.

codabubble.jpg

Demo
Tutorial

Style-my-tooltips jQuery plugin

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.

style_my_tooltip.jpg

Demo
Download

Inline Modal Window w/ CSS and jQuery

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.

popup.jpg

Demo
Tutorial

Coda Slider

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.

coda-slider.jpg

Demo
Tutorial
Download

vTicker (vertical news ticker)

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!

vticker.jpg

Demo
Download

MobilySlider

MobilySlider is an advanced slideshow plugin for jQuery (5KB).

Features:

  • can add inline HTML content
  • looping
  • auto generated pagination
  • auto generated arrows
  • autoplay
  • fade
  • horizontal
  • vertical slide
  • transition effect
  • pause on hover
  • callback functions

mobyslider.jpg

Demo
Download

MobilyBlocks

MobilyBlocks is a jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.

Features:

  • Clockwise and counter-clockwise
  • Hover Trigger
  • Click Event

mobyblocks.jpg

Demo
Download

MobilyMap

MobilyMap is a jQuery plugin (7KB) that can create a Google Map like draggable interface from any image.

Features:

  • 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

moby_map.jpg

Demo
Download

Google Maps Slider

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.

google_map_slider.jpg

Demo
Download

Organic Tabs

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.

organic_tabs1.jpg

Demo
Download

Translucent Slideshow Script

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.

slideshow.jpg

Source

Expandable Sticky Bar

This script uses CSS’s “positon:fixed” property plus a splash of JavaScript to create a sticky footer or header bar that expands when the mouse rolls over it. It’s useful for showing supplemental information of a site that should always be in within a mouse action away. The markup of the bar can either be inline HTML defined within the page it’s on, or entirely in a separate HTML file and fetched via Ajax. The sticky bar can either be positioned at the bottom of the window or top instead. Furthermore, the bar can either be activated when the mouse rolls over it, or manually via a click on a user defined button within the bar.

sticky_bar.jpg

Source

Fluid Text Resizer

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.

text_resizer.jpg

Source

Featured Image Zoomer v1.5

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.

Features:

  • 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

zoomer.jpg

Source

Image Power Zoomer v1.1

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.

poower_zoomer.jpg

Source

AnythingZoomer v1.0

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).

anything_zoomer.jpg

Demo
Download

Slider Kit, sliding contents with jQuery.

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.

Features:

  • 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

slider-kit.jpg

Download

SAG Content Scroller v1.3

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.

Content_Scroller.jpg

Source

Ultimate Fade-in slideshow (v2.4)

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.

Features:

  • 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

fade-in-slider.jpg

Source

Google Map Selector

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.

google_map_slector.jpg

Source

Cursor following menu

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.

cursor_following_menu.jpg

Demo
Download

Better Check Boxes with jQuery and CSS

This script helps in creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.

better_check_box.jpg

Demo
Download

Circular Discography Template with jQuery

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.

circuler_discography.jpg

Demo
Download

Expanding Image Menu with jQuery

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.

expanding_image_menu.jpg

Demo
Download

Making a Custom Facebook Wall with jQuery Template

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.

facebook_wall.jpg

Demo
Download

jquery Thumbnail Scroller

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.

thumbnail_scroller.jpg

Demo
Download

jquery Floating Menu

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.

floating_menu.jpg

Demo
Download

Moving Boxes Content with jQuery

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.

moving_boxes.jpg

Demo
Download

jQuery File Upload

A graphical way to upload your files.

Features:

  • Multiple file upload
  • Drag & Drop support
  • Upload progress bar
  • Cancelable uploads
  • Resumable uploads
  • Preview images
  • Graceful fallback for legacy browsers

uploader.jpg

Demo
Download

Client Testimonials Powered by PHP, XML and jQuery

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.

testimonial.jpg

Demo
Download

Google’s Christmas Doodle with jQuery

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.

doodle.jpg

Demo
Download

jQuery Confirm Dialog Replacement

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.

Dialog_Replacement.jpg

Demo
Download

jquery custom content scroller

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.

custom_scrollbar.jpg

Demo
Download

A music lover, creativity is all that he has in his mind and a very avid reader. He is the Founder of ArtAtm. He is a web designer by profession from India. You may want to Follow Him On Twitter

Rocky – who has written posts on Artatm - Creative Art Magazine.


13 Responses to “40 Brilliant and Advanced jQuery Effects To Use In Your Websites”
  1. jibon_cse

    Nice Work

  2. Rafael

    Great list. Thank you.

  3. Edwin Sm

    Really used Tutorials.. thz a lot…

  4. bhargav

    nice

  5. Vickey

    Awesomeness, is best one

  6. Silvina

    Muy buena recopilación! excelente! muchas gracias!

    • Jitu

      @Silvina Glad that you liked it!!!

  7. Lee

    Awesome jQuery goodness you have here. Thanks for the share…I’m really liking it!

  8. Mark WSD

    The notebook comment is just great!
    Just great one to use in your blog, thanks!

  9. Sandipan Mukherjee

    Great list dude..

  10. Rocky

    @TN34.DE Agentur
    I am glad that you like my list :)
    I will include some of your plugin in my next jQuery article.. Thanks

  11. TN34.DE Agentur Schorndorf

    Great list! Have also a look at our plugins: http://www.tn34.de/werkstatt/downloads.html

  12. GNS

    Awesomeness one indeed.. <3

Leave a Reply