JavaScript Library to Realistic Water Ripple Effect Using WebGL

Ripple Hover Effect is a JavaScript library applicable to realistic water ripple effects to move images using WebGL.

How to make use of it:

1. Load the needed JavaScript libraries as follows:

<!-- Three.js -->
<script src="/path/to/cdn/three.min.js"></script>

<!-- GSAP -->
<script src="/path/to/cdn/gsap.min.js"></script>

<!-- ripple-effect.js -->
<script src="src/ripple-effect.min.js"></script>

2. Create a container to hold the picture.

<div class="example"></div>

3. Apply a primary ripple effect to the picture.

var rippleDemo = new RippleEffect({
    parent: document.querySelector('.example'),      
    texture: '/path/to/image.jpg',
});

4. Config the ripple effect with the next parameters:

var rippleDemo = new RippleEffect({
    parent: document.querySelector('.example'),      
    texture: '/path/to/image.jpg',
    intensity: 1,
    strength: 2,
    area: 6,
    waveSpeed: 0.01,
    hover: true, // trigger the animation on hover
    speedIn: 1.4,
    speedOut: 1.2,
    easing: 'Expo.easeOut',
});

5. Start & Stop the animation manually.

rippleDemo.start
rippleDemo.stop

Read More – Material Ripple Effect with Ease Using a Vue.js Directive | ribble

Options

Mandatory parameters

NameTypeDefaultDescription
parentDom elementnullThe DOM element where the animation will be injected. The images of the animation will take the parent’s size.
textureImagenullThe Image of the animation.

Optional parameters

NameTypeDefaultDescription
intensityFloat1Used to determine the intensity of the ripple effect. 0 is no effect and 1 is a full ripple.
strengthFloat2Strength of the ripple effect.
areaFloat6The area affected by the ripple effect.
waveSpeedFloat0.01Ripple waves travel speed.
speedInFloat1.4Speed of the inbound animation (in seconds).
speedOutFloat1.2Speed of the outbound animation (in seconds).
hoverBooleantrueif set to false the animation will not be triggered on hover (see start and stop function to interact)
easingStringExpo.easeOutEasing of the transition

Methods

NameDescription
startStart the ripple effect.
stopStop the ripple effect.

Realistic Water Ripple Effect Using WebGL, Ripple Hover Effect Plugin/Github, webgl water ripple, water ripple effect html


See Demo And Download

Official Website(SaboSuke): Click Here

This superior jQuery/javascript plugin is developed by SaboSuke. For extra Advanced Usage, please go to the official website.

Share