Best jQuery Image Effects Plugins & Tutorials with Demo

    Image Trail Effects with TweenMax & CSS

    Image Trail Effects with TweenMax & CSS

    A set of brutalist effects for mouse-following image trails that show a random series of images with tweenmax and css.The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations.

    Image Distortion Effects with SVG Filters

    Image Distortion Effects with SVG Filters

    Today we would like to share three animated distortion effects by SVG filters that we apply to an image when hovering a text link. We use feTurbulence and feDisplacementMap to create different kinds of fragment and wave-like distortions. These kind of effects have become quite popular and there are many variations.

    Fake 3D Image Effect with WebGL

    Fake 3D Image Effect with WebGL

    Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.WebGL is becoming quite popular these days as it allows us to create unique interactive graphics for the web. You might have seen the recent text distortion effects using Blotter.js or the animated WebGL lines created with the THREE.MeshLine library. Today you’ll see how to quickly create an interactive “fake” 3D effect for images with plain WebGL.

    jQuery Interactive Image Plugin

    jQuery Interactive Image Plugin

    Interactive Image is a jQuery plugin to embed interactive images on your website.

    Features:

    • Interactive texts and images over large pictures
    • Flexible configuration of markers and items
    • Easily customizable with CSS
    • Installable via package managers

    Animate Images and Videos with curtains.js

    Animate Images and Videos with curtains.js

    curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
    You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

    Lazyestload.js : JavaScript Lazy Load Images Library

    Lazyestload.js : JavaScript Lazy Load Images Library

    Lazyestload.js is a javascript library which load images only when they are in (and remain in) the viewport.

    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.