Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Overview

Demo

Download

jQuery image slide on hover effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. Have a look at the demo below for a better understanding.

Overview

Demo

Longer Captions for jQuery’s FancyBox Plugin

jQuery’s FancyBox Plugin has been a huge hit and is now being used in a lots of websites. But still there is something that is missing in it. That something is the “Longer Captions”. FancyBox allows only short captions, in short it could turn out to be a bad option for the ones who need to provide longer and bigger captions.

Over here you will get an improvised version of the jQuery’s FancyBox

This version of FancyBox has been modified to handle captions in a more interactive way. It also doesn’t break on excessively large captions. This example is based on FancyBox 1.2.1.

View Demo

Download

jQuery’s Star Rating Widget

What is this?

The Star Rating widget is a plugin for the jQuery javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes or select options.
What it does?

* It turns a collection of radio boxes / select options into a neat star-rating control.
* It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
* It gives you the full access to each instance of “stars” created on the page, with an easy to use syntax provided by the jQuery UI core library.

Overview

View Demo

Download

LavaLamp for jQuery Users

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction.

Overview

Download

Hover zoom Effect with jQuery and CSS

The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. You can check out a demo or grab the source right here if you don’t want to read the entire tutorial.

Demo

Download

Greyscale Hover Effect with CSS & jQuery

This effects would help you in making your portfolio or making portfolio websites. In this effect, with the help of CSS and jQuery, a greyscale effect comes into being on Hover

Overview

Demo

jQuery Image Zoom Plugin

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner for portfolios.

Overview

Demo

Download

Join testking HP0-S20 online training with testking 642-481 design guides and other testking 642-426 web development products to improve your creativity and work.