Images Distortions Hover

Images Distortion Hover Exploits WebGL Technology and Operates on Canvas Object.

When using Threejs, a 3D environment is created. It shows a plane which is orthogonal to the camera and applies an image-based texture.Transformations are processed using the shaders.

Effects

A transformation occurs when rolling over the plane.

Several types of calculations produce different transformation effects:

Drip;
Wave;
Ring;
Horizontal displacement;
Vertical displacement;
Displacement image map;
Subdivision;
Blow.

The following parameters are available to modulate the effects:

Intensity (vertical displacement, displacement ima map, subdivision, blow);
Width (drip, wave, ring);
Radius (ring);
ScaleX (drip);
Scaley (drip);

In this DEMO you can see the effects.

Roll-over

The hover effect is applied to 2 images and you can set:

Image resolution (be careful not to exaggerate with pixels amount);
The transition speed;
The easing function.

Displacement Image Map

For some of the effects a displacement map is required, i.e. an image that is used to process the effect.

You can choose it from a predefined list or upload a customized one.

Style

As for the image widget you can define the following style parameters:

Width;
Height;
Alignment;
Border type and color;
Border Radius;
Padding;
Box Shadow.