WebGL Distortion Hover Effects

Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little library is to recreate an effect similar to what we have done previously, but with broader support, better performance and that is easier to customize.

The demo is kindly sponsored by HelloSign API: Everything IT requires and Developers love. If you would like to sponsor one of our demos, find out more here.

The animation is based on WebGL and we use three.js, so it works in all recent browsers.

To get started we need two main images and one displacement image to create the effect.

Here is an example displacement image we’re using:

1

The effect works in the following three steps:

  1. Modifying the images with the displacement image
  2. A classic fade between the 2 images
  3. Reverse the displacement

DistortionHoverEffect_01

We can use a simple div to initiate our effect:

var myAnimation = new hoverEffect({
	parent: document.querySelector('.my-div'),
	image1: 'images/myImage1.jpg',
	image2: 'images/myImage2.jpg',
	displacementImage: 'images/myDistortionImage.png'
});

Keep in mind that the demo needs to run in a server environment.

We hope you like this library and find it useful!

GitHub link coming soon!

References and Credits

WebGL Distortion Hover Effects was written by Robin Delaporte and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants