This is a fork of hover-effect which is a Javascript library to draw and animate images on hover.
For now, this fork attempts to accomplish the following:
- Convert Javascript to Typescript
- Convert the main function to a class with a constructor
- [] Add a method to destroy the effect
Three.js (plus types) and TweenMax scripts are included as dependencies in the package so you don't need to manually include them.
npm install bouzidanas/hover-effect
import HoverEffect from 'hover-effect'import HoverEffect from 'hover-effect';
const hoverEffect = new HoverEffect({
parent: document.getElementById("hover-effect-container"), // the parent DOM element of the hover effect
displacementImage: "/heightMap.png",
image1: "/first-image.jpg",
image2: "/second-image.jpg",
// optional options here ...
});
hoverEffect.next();
hoverEffect.previous();
hoverEffect.destroy();| Name | Type | Default | Description |
|---|---|---|---|
parent |
Dom element |
null |
The DOM element where the animation will be injected. The images of the animation will take the parent's size. |
image1 |
Image |
null |
The first Image of the animation. |
image2 |
Image |
null |
The second Image of the animation. |
displacementImage |
Image |
null |
The Image used to do the transition between the 2 main images. |
| Name | Type | Default | Description |
|---|---|---|---|
intensity |
Float |
1 |
Used to determine the intensity of the distortion effect. 0 is no effect and 1 is full distortion. |
intensity1 |
Float |
intensity |
Overrides the distortion intensity of the first image. |
intensity2 |
Float |
intensity |
Overrides the distortion intensity of the second image. |
angle |
Float |
Math.PI / 4 |
Angle of the distortion effect in Radians. Defaults to Pi / 4 (45 degrees). |
angle1 |
Float |
angle |
Overrides the distortion angle for the first image. |
angle2 |
Float |
-angle * 3 |
Overrides the distortion angle for the second image. |
speedIn |
Float |
1.6 |
Speed of the inbound animation (in seconds). |
speedOut |
Float |
1.2 |
Speed of the outbound animation (in seconds). |
hover |
Boolean |
true |
if set to false the animation will not be triggered on hover (see next and previous function to interact) |
easing |
String |
Expo.easeOut |
Easing of the transition, see greensock easing |
video |
Boolean |
false |
Defines if you want to use videos instead of images (note: you need 2 videos, it doesn't work with one image and one video.) |
imagesRatio |
Float |
1 |
Specify a value if you want a background: cover type of behaviour, otherwise it will apply a square aspect ratio. usage: image height / image width example: 1080 / 1920 |
| Name | Description |
|---|---|
next |
Transition to the second image. |
previous |
Transition to the first image. |
destroy |
Destroy the effect. |
If you want to still use the original library, the following type declaration can be used:
declare module "hover-effect" {
export interface Options {
parent: HTMLElement;
displacementImage: string;
image1: string;
image2: string;
imagesRatio?: number;
intensity?: number;
intensity1?: number;
intensity2?: number;
angle?: number;
angle1?: number;
angle2?: number;
speed?: number;
speedIn?: number;
speedOut?: number;
hover?: boolean;
easing?: string;
video?: boolean;
}
declare class hoverEffect {
constructor(opts: Options);
next: () => void;
previous: () => void;
}
export default hoverEffect;
}Thanks to :
- Codrops for the creation of the example
- Aarni Koskela for the improvements
- Celso White for the multiple module formats
- Codepen demo and Medium article by Alex Brown
- https://stimmt.digital/en/
- https://www.fabiofantolino.com/en
- Youtube tutorial
- https://www.youtube.com/watch?v=9kcOQdJHyIo
- https://www.estudionk.com/en
- https://github.com/AlbanCrepel/vue-displacement-slideshow
- https://digitalpresent.io/about
- https://www.couleecreative.com/
- https://two.zero.nyc/
- https://www.danilodemarco.com/
- https://lsce.com/
- http://vadimtyurin.com/