Images Distortions Hover
Images distortion Hover exploits WebGL tecnology 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
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 displavement, 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:
- 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.
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