Best jQuery Image Effects Plugins & Tutorials with Demo

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.

Blurify : JavaScript library to blurred Images

Blurify : JavaScript library to blurred Images

Blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.

Image Mask Effect with CSS & jQuery

Image Mask Effect with CSS & jQuery

An immersive transition effect powered by image masks and CSS transforms.

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js : jQuery Parallax Tilt Hover Effect

Tilt.js is a tiny request AnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, etc.

Features:

  • Fast and lightweight
  • No additional elements are created or necessary
  • Once set, position is taken care by the browser
  • srcset support
  • You can still access/change src and srcset properties and attributes: img.src = 'other-image.jpg'

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.

CSSCO : Photographic Filters made with CSS

CSSCO : Photographic Filters made with CSS

CSSCO is a photographic filters made with CSS, inspired by VSCO and CSSgram.



Best jQuery websites design awards