Images Distortions Hover
Images distortion Hover exploits WebGL tecnology and operates on Canvas object.
Transformation occurs when rolling over the plane.
Several types of calculations produce different transformation effects:
- Horizontal displacement
- Vertical displacement
- Displacement image map
The following parameters are available to modulate the effects:
- Intensity (vertical displavement, displacement ima map, subdivision, blow)
- Width (drip, wave, ring)
- Radius (ring)
- ScaleX (drip)
- Scaley (drip)
In this DEMO you can see the effects.
The hover effect is applied to 2 images and you can set:
- Images resolution (watch out not to exagerate 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.
As for the image widget you can define the following style parameters:
- Border type and color
- Border Radius
- Box Shadow