Best jQuery Image Effects Plugins & Tutorials with Demo

Image splitting effect with CSS and jQuery

Image splitting effect with CSS and jQuery

In this tutorial we are going to make an image splitting effect. What’s that? It’s simillar to a sliding door effect where the image slides to left or right side and reveals the text behind it, but the thing that makes this different is that the effect looks like the image is splitted into half and one goes left and the other one goes right. One thing that’s very important is that there won’t be 2 images, it’s only one

Clip Gallery : jQuery Clip Animation Photo Gallery

Clip Gallery : jQuery Clip Animation Photo Gallery

ClipGallery is a new way to show your pics. In combination with jQuery and the ClipFX plugin, it puts your photos in a grid and as the mouse moves over the “thumbs” they expand at full size.

jQuery DragPan

jQuery DragPan

Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creating maps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.

Features:

  • Very few images, mostly CSS
  • Includes 19 different customizable options and 3 callbacks
  • Function to move map to position
  • Doesn’t stop user from dragging beyond map, just bounces back till the whole map fills the screen
  • Scrollbars (Colour changable using CSS )
  • Copyright/help message (You choose the message)
  • Restrict to horizontal/vertical panning
  • Customize grab/grabbing cursor
  • Change return animation speed

tiltShift.js : jQuery & CSS3 image filters to replicate tilt-shift effect

tiltShift.js : jQuery & CSS3 image filters to replicate tilt-shift effect

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

Full Screen Responsive jQuery Image and Content Slider:RSlider

Full Screen Responsive jQuery Image and Content Slider:RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

Picanim – jQuery image hover effect pulgin

Picanim - jQuery image hover effect pulgin

Picanim is jQuery plugin used to bring stylish image hover.

Features:

  • 27+ unique hover effects
  • include: such as grayscale blur transparent fadeIn slice fold boxRandom boxRandom boxDiagional…
  • small size,just 3kb after gziped
  • cross browser
  • you can easliy config the effect with a lot of options
  • also support the img tag with a specific width or height
  • easy to use
  • can show tooltip on image
  • with mouseout reverse effect

JZoopraxiscope : jQuery plugin for making animations from static images

JZoopraxiscope : jQuery plugin for making animations from static images

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.Besides jQuery, it also uses jQuery UI and requires the frames to be animated as a single, horizontal image.It all works by calling a simple function where we define dimensions of the images and the frame.

After that, JZoopraxiscope works with the help of play and pause buttons provided.Although it looks hard to use the resource widely, with a bit help of creativity, it can beautify a web page easily.

jQuery Iviewer : Image Viewer plugin with multiple Controls

jQuery Iviewer : Image Viewer plugin with multiple Controls

jQuery.iviewer is an jquery ui widget representing image viewer component used to load and view image with ability to zoom image and to drag it with mouse in container.

CropZoom : jQuery Plugin Select an area of an image and then Crop

CropZoom : jQuery Plugin Select an area of an image and then Crop

CropZoom is a plugin that let you select an area of an image and then crop it. whit this tool you also will be able to zoom in or to zoom out, to drag and also rotate an image.

jQuery Image ‘Wrap’ Captions

jQuery Image 'Wrap' Captions

Simply place some text in the title attribute and give the image class=”captionme” and you will get lovely “wrap-around” captions which compliment your inline images. Simply play around with the css and caption background image to customise as you wish. Those with javascript turned off simply see the image as normal, sans-caption.