1.0.0 • Published 3 years ago
ripple-hover-effect v1.0.0
Ripple effect
Javascript library to animate images on hover.
If this project help you, don't forget to star it.
Codepen demo by Essam Abed
Example 1
Example 2
Use locally
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
.
Basic usage
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>
Options
Mandatory parameters
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. |
Optional parameters
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 | image widthexample: 1080 / 1920` |
Methods
Name | Description |
---|---|
start | Start the ripple effect. |
stop | Stop the ripple effect. |
Credits
Thanks to :
- Three.js
- Gsap by GreenSock
- Images from Unsplash.com
1.0.0
3 years ago