Best jQuery Image Effects Plugins & Tutorials with Demo

Motion Blur Effect with SVG & jQuery

Motion Blur Effect with SVG & jQuery

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.

SmarterImages : jQuery Dynamic Image Replacement Plugin

SmarterImages : jQuery Dynamic Image Replacement Plugin

SmarterImages aims to be the most flexible dynamic image replacement jQuery plugin. Think CDN, but without the server.The plugin watches the browser viewport width on load() and resize(), and when the zone changes the plugin rebuilds a new src URL.

Features:

  • Works with any custom image processor URL or CloudImage.io
  • Define your own custom breakpoints: as many or few as required (“small / medium / large” wasn’t exactly flexible)
  • Works with inline images and background images
  • Option to upsize and downsize images, or upsize only to reduce server calls
  • Option to maintain image aspect ratio or resize-only
  • Define image URL protocols
  • Callback function for custom code image replacements after

VectorCam : jQuery Pictures to Vector files Converter plugin

VectorCam : jQuery Pictures to Vector files Converter plugin

A website for taking pictures and converting them into vector files – designed for use on smartphones. Quickly vectorize your sketches and designs!

AutoFit : jQuery Automatic Responsive Image

AutoFit : jQuery Automatic Responsive Image

AutoFit is a jQuery script that allow you to transform your images into automatic responsive elements. With a simple and smart code the image will be resized and cropped to fit the container. This script preserve the structure HTML5 and is SEO friendly.

jQuery 3D Heart Animation

jQuery 3D Heart Animation

Animated heart prototype for the Climate Coalition exploring 3D transitions and masking techniques.

Background Blur : jQuery Plugin

Background Blur : jQuery Plugin

Ultra light cross browser image blurring plugin for jQuery

Prideify.js : jQuery Rainbow Stripes Image Effect

Prideify.js : jQuery Rainbow Stripes Image Effect

Inspired by https://facebook.com/celebratepride – a super-lightweight library (< 100 lines of code) to “prideify” (add rainbow stripes to) any image using the <canvas> API.

Gradify : CSS Gradient Placeholders

Gradify : CSS Gradient Placeholders

A module to produce CSS gradients as placeholders for images.

PolyClip : jQuery plugin to Mask Images

PolyClip : jQuery plugin to Mask Images

A jQuery plugin to mask images with a simple polygonal shape.The mask expands on hover and collapses afterwards.

Image Tilt Effect with CSS3 3D Transform

Image Tilt Effect with CSS3 3D Transform

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.



Best jQuery websites design awards