Jquery Water Ripple Effect ( source code )

Jquery Water Ripple Effect ( source code ) 

Add this files

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.js"></script>

HTML


<section> <header> <h1> Jquery Water Ripple Effect</h1> <h2> A nice Jquery Plugin for your Website</h2> </header> </section>

CSS


html { height: 100%; } body { color: #fff; font-size: 16px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; background-image: url(https://i.postimg.cc/XvT12qdD/3.jpg); background-size: cover; background-position: 50% 0; height: 100%; text-align: center; margin: 0; padding: 0; } body:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } section { display: inline-block; vertical-align: middle; padding: 100px; max-width: 500px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

INITIATE THE PLUGIN


$('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, });