Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader. For the demo itself, I’ve created a more practical example that shows a vertical scrollable layout with images, where each one has a variation of the effect. You can click on an image and it will expand to a larger version while some other content shows up (just a mock-up). We’ll go over the most interesting parts of the effect, so that you get an understanding of how it works and how to create your own.
Best jQuery Image Hover Effect Plugins & Tutorials with Demo
A simple jQuery plugin that adds hoverable image and video previews to links and other elements.
Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
jQuery parallax background plugin based on GSAP.In parallaxBackground you can add settings using the data-parallax-background attribute. You still need to call $(element).parallaxBackground() to initialize parallaxBackground on the element.
This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction.
The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.
FollowCursor is a rotate elements to create a following effect.
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.