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.