Javascript library to animate images on hover.
If this project help you, don't forget to star it.
Codepen demo by Essam Abed
ripple-effect-demo.mp4
Install using npm:
npm i ripple-hover-effect
Or use a cdn:
https://unpkg.com/browse/ripple-hover-effect@1.0.0/src/ripple-effect.js
To load the images you'll need to view the demo via a web server, simply open the projet with vscode then run the index.html
file with Live Server
.
This little library needs Three.js and Gsap to do the transition, so you need to include it before this library.
How it works:
<!-- Div to draw the effect on -->
<div class="my-div"></div>
<!-- library needed -->
<script src="three.min.js"></script>
<script src="gsap.min.js"></script>
<script src="dist/ripple-effect.js"></script>
<script>
var ripple = new RippleEffect({
parent: document.querySelector('.my-div'),
intensity: 1,
strength: 2,
area: 4,
waveSpeed: 0.001,
speedIn: 2,
speedOut: 1.5,
easing: 'Expo.easeInOut',
hover: true,
texture: './img/my-img.jpg',
});
</script>
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. |
texture |
Image |
null |
The Image of the animation. |
Name | Type | Default | Description |
---|---|---|---|
intensity |
Float |
1 |
Used to determine the intensity of the ripple effect. 0 is no effect and 1 is full ripple. |
strength |
Float |
2 |
Strength of the ripple effect. |
area |
Float |
6 |
Area affected by the ripple effect. |
waveSpeed |
Float |
0.01 |
Ripple waves travel speed. |
speedIn |
Float |
1.4 |
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 start and stop function to interact) |
easing |
String |
Expo.easeOut |
Easing of the transition, see greensock easing |
Name | Description |
---|---|
start |
Start the ripple effect. |
stop |
Stop the ripple effect. |
Thanks to :
- Three.js
- Gsap by GreenSock
- Images from Unsplash.com