Water wave Background with Jquery ( Source Code )

Water wave Background with Jquery ( Source Code )

First download the plugin 

Add these files first

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

HTML


<div class="banner"> <h2> Beautiful Nature</h2> </div>

css


* { margin: 0; padding: 0; } .banner { background-image: url(1.jpeg); -webkit-background-size: cover; background-size: cover; background-position: center center; height: 100vh; } h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 5em; text-shadow: 0 0 50px rgba(0, 0, 0, 0.5); font-family: poppins; }


Initiate the plugin


$('.banner').ripples({ dropRadius: 10, perturbance: 0.03 });