Best jQuery Image Effects Plugins & Tutorials with Demo

FollowCursor : Following Effect on Hover with JavaScript

FollowCursor : Following Effect on Hover with JavaScript

FollowCursor is a rotate elements to create a following effect.

Sliced Dual Image Layout with CSS

Sliced Dual Image Layout with CSS

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making an interesting transition, we use a glitch effect. This effect we also apply to some of the text.

scrollToClip :jQuery Plugin to Clip two Elements on Scroll

scrollToClip :jQuery Plugin to Clip two Elements on Scroll

scrollToClip is a function to clip two elements on scroll to give a reveal effect.

jQuery Images Compare Plugin

jQuery Images Compare Plugin

A jquery plugin for comparing two images.

Features:

  • Effort to put appearance via css (easier to skin / override)
  • Touch friendly, mouse drag, with a big thanks to Hammerjs.
  • Responsive
  • You can listen to change event to add some of your logic
  • You can change the value from external code
  • Animation option when changing the value
  • Optional alternative interaction modes : drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings)

Scalize : jQuery Point Scale Plugin

Scalize : jQuery Point Scale Plugin

Scalize is a responsive scaling position with jquery, you can build awesome your project witch scalize.

ComicBubbles : Speech balloon JavaScript library

ComicBubbles : Speech balloon JavaScript library

ComicBubbles is a JavaScript HTML5 canvas library which simplifies the process of adding speech bubbles to photos. ComicBubbles bubbles can be saved as JavaScript objects or merged with the original image.

Key features:

  • small size, framework-independent
  • can produce interactive, animated speech|thought|scream balloons
  • API

jQuery Meme Generator Plugin

jQuery Meme Generator Plugin

Meme Generator is a jQuery plugin allowing easily creating images with captions (memes). It doesn’t require any special markup, you can use it on any <img> and the plugin will handle the rest. It uses HTML5 Canvas to create images.

Features:

  • Seperate styling for each text box
  • Drawing tool with customizable color and size
  • Two preview modes – canvas and CSS – latter being more suitable for slow machines
  • Saving image as data url or canvas
  • Predefining captions

jQuery Plugin For SVG Blur Effects On Image : jqImgBlurEffects

jQuery Plugin For SVG Blur Effects On Image : jqImgBlurEffects

This plugin was created on the concept un-blurring a part of image using SVG.

TwentyTwenty : jQuery Plugin to Compare Images

TwentyTwenty : jQuery Plugin to Compare Images

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!

Water Ripple effect jQuery plugin

Water Ripple effect jQuery plugin

I was always fascinated by the “water ripple effect” and so it was time to deal with it. The result is a small jQuery plugin, which you can easily integrate into your projects. As with my last jQuery plugins, you can use the “water ripple effect” with, or without jQuery. As a zip and minifiert is this plugin only 2KB large.