Press "Enter" to skip to content

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.

water ripple effect codepen, water ripple animation, water ripple effect gif, water ripple effect on image, water ripple effect javascript, javascript water ripple effect mouse over

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

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *