Best jQuery Image Effects Plugins & Tutorials with Demo

imageLife : jQuery plugin for Interacting Image with Mouse Move

imageLife : jQuery plugin for Interacting Image with Mouse Move

ImageLife is Jquery Plugin purpose for interacting image with event mouse move.

Password Strength Visualization with JavaScript

Password Strength Visualization with JavaScript

Today we’d like to share a little reimplementation of an interesting effect with you. The idea came from this Reddit entry which describes a method of showing an image less pixelated the stronger the password entered is. You can see the idea in action on the signup page of Colibro. We thought this was an awesome idea and wanted to experiment with it, and also with the reverse logic.

jQuery Image Map Plugin

jQuery Image Map Plugin

A native JavaScript solution for creating responsive image-maps that rerender on image or viewport changes.

Translucent : jQuery Transparent Card Theme Plugin

Translucent : jQuery Transparent Card Theme Plugin

Translucent is a jQuery plugin for make transparent/translucent design element in webpage.

Instagram.css : Pure CSS Instagram Filters

Instagram.css : Pure CSS Instagram Filters

Instagram.css is a pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only.

Analog Film Emulator – Photo Editor

Analog Film Emulator - Photo Editor

A web based analog film emulator/photo editor. This is a simple photo editor with an analog film emulation mode based on the color lookup tables.

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)