Best jQuery Image Effects Plugins & Tutorials with Demo

    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.

    PixelFlow.js : jQuery Image Pixelating Plugin

    PixelFlow.js : jQuery Image Pixelating Plugin

    PixelFlow.js is an image pixelating filter jquery plugin using canvas.