20 Awesome JQuery Effects Plug-ins

JQuery helps you to improve your website in many ways. As a part of JavaScript frameworks, JQuery is constantly updated and you can find a new library based on JQuery almost every day. In this post we present you 20 Awesome JQuery Effects Plug-ins for your reference to improve your website…!!

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear.

The main idea is to create an easily configurable set of contextual slide outs. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plug-in for a even nicer effect.

This is a jQuery plug-in, so obviously it relies upon the jQuery library. Specifically, jQuery 1.4 or later, because we are using the .animate functions new ability to have per property easing. This means we can animate the “top” value with one easing function while animating the “left” value with a different easing function.

Craft Map (previous Mobily Map) is a lightweight (6KB only), fully configurable jQuery plug-in that converts a simple image into a functional map by overlaying dynamic elements on it such as markers. Like Google Maps, you can place your own marker icons and add location information to specific markers with a drag gable image interface.

This Plug-in fetches a Face book Page Photo Album as a JSON object and uses Fancy box to render the gallery in word press. It is specifically for public photos particularly those belonging to a Face book Page.

Fancy Gallery is a state of the art Word Press Image Gallery Plug-in you can use to create, manage and handle image galleries easily in your Word Press backend and present images to your website visitors.

Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

So in my journey to to learn jQuery, I’m trying to learn to do some things that CSS can already do but that jQuery can do “sexier”. Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over.

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

I was looking all over the Internet for some jQuery gallery plug-in with some interesting transition effects. I found a lot of great plug-ins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plug-ins for jQuery. That’s how was born jqFancy Transitions.

This easy scroll application was made to simplify your work and save you time in developing any kind of web template or application, it can be easily inserted in any context and has a wide range of parameters that can make your scrolling unique.

By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).

Rhinoslider is the most flexible jQuery slideshow there is. Be welcome to try it yourself. Not only do we offer a variety of effects, we also allow you to add your own styles, effects and features to the slider.